Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Android Implementing Designs for Android Using Custom Styles and Themes Styling EditTexts and Buttons

Noah Schill
Noah Schill
10,020 Points
Posted by Noah Schill
Noah Schill
10,020 Points

All my EditTexts crammed into the top part of the screen!

I added the styles and then they all cramped together into what appears to be one EditText with the hints overlapping.

Here is my styles.xml:

<resources>

<style name="AppTheme" parent="@style/_AppTheme" />

<style name="_AppTheme" parent="android:Theme.Holo.Light">
    <item name="android:editTextBackground">@drawable/apptheme_edit_text_holo_light</item>
</style>

<style name="AuthBackground">
    <item name="android:background">@drawable/background_fill</item>
</style>

<style name="AuthBackgroundImage">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:layout_alignParentLeft">true</item>
    <item name="android:layout_alignParentTop">true</item>
    <item name="android:scaleType">fitStart</item>
    <item name="android:contentDescription">@string/content_desc_background</item>
    <item name="android:src">@drawable/background</item>
</style>

<style name="AuthTitle">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_alignParentTop">true</item>
    <item name="android:layout_centerHorizontal">true</item>
    <item name="android:layout_marginTop">32dp</item>
    <item name="android:textSize">60sp</item>
    <item name="android:textColor">@android:color/white</item>
    <item name="android:textStyle">bold</item>
    <item name="android:text">@string/app_name </item>
</style>

<style name="AuthTitle.AuthSubtitle" parent="AuthTitle">
    <item name="android:layout_below">@+id/title</item>
    <item name="android:textSize">13sp</item>
    <item name="android:text">@string/subtitle</item>
    <item name="android:layout_alignParentTop">false</item>
    <item name="android:layout_marginTop">0dp</item>
</style>

<style name="AuthEditText" parent="android:Widget.Holo.Light.EditText">
    <item name="android:ems">10</item>
    <item name="android:textColorHint">@color/light_gray</item>
    <item name="android:textSize">17sp</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
</style>

</resources>

Here is my activity_sign_up.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".SignUpActivity" style="@style/AuthBackground">

<ImageView
    android:id="@+id/backgroundImage"
    style="@style/AuthBackgroundImage"/>

<EditText
    android:id="@+id/usernameField"
    style="@style/AuthEditText"
    android:hint="@string/username_hint" >

    <requestFocus />
</EditText>

<EditText
    android:id="@+id/passwordField"
    style="@style/AuthEditText"
    android:inputType="textPassword"
    android:hint="@string/password_hint" />

<EditText
    android:id="@+id/emailField"
    style="@style/AuthEditText"
    android:inputType="textEmailAddress"
    android:hint="@string/email_hint" />

<Button
    android:id="@+id/signupButton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/emailField"
    android:layout_below="@+id/emailField"
    android:text="@string/sign_up_button_label" />

<ProgressBar
    style="?android:attr/progressBarStyleLarge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/progressBar"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"/>

</RelativeLayout>

Much thanks!!

Noah Schill
Noah Schill
10,020 Points
Noah Schill
Noah Schill
10,020 Points

Oh and the resource element in styles.xml is in the file , but isn't displaying here for some reason :/

Same with the RelativeLayout in activity_sign_up.xml.

1 Answer

Rebecca Rich
PLUS
Rebecca Rich
Courses Plus Student 8,592 Points
Rebecca Rich
Rebecca Rich
Courses Plus Student 8,592 Points

For a RelativeLayout you need to tell the layout how the different elements on the screen should be located relative to one another. So for example, where is usernameField located relative to backgroundImage. This can be established with things like layout_below, layout_toRightOf, etc. Check out http://developer.android.com/guide/topics/ui/layout/relative.html

If you have a LinearLayout, for that layout you can just specify whether it is vertical or horizontal and then just place a bunch of different things into that layout and it will take care of lining them up vertically or horizontally. However, for RelativeLayout you need to be specific about how things are placed on the screen relative to one another.

Note: You may also want to specify the height and width for your elements more thoroughly.

Good luck!

Noah Schill
Noah Schill
10,020 Points
Noah Schill
Noah Schill
10,020 Points

Thanks Rebecca! You have some very good tips! Turns out tho, that my problem was that I forgot to place the EditTexts in a LinearLayout xD.

Thank you so much anyways!