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

Android Ribbit Application: using styles

I am using Android Studio. The styles applied to the title and subtitle work perfectly fine in both the login activity and sign in activity, though the same cannot be said for the AuthFieldContainer style. Nothing from the style is utilized. If I try to build the app with just the ID and style defined in the Linear layout like Ben does in the video, then the compiler will ask for android:layout_width and android:layout_height; both of which are defined within the style.

Login activity 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="com.example.gaming.ribbit.Activities.LoginActivity" style="@style/AuthBackground">

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

<TextView
    android:id="@+id/title"
    style="@style/AuthTitle"/>

<TextView
    android:id="@+id/subtitle"
    android:layout_below="@+id/title"
    style="@style/AuthSubtitle"/>

<LinearLayout
    android:id="@+id/editTextLayout"
    style="AuthFieldContainer"
    android:layout_below="@+id/subtitle"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="60dp">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/usernameField"
        android:hint="@string/username_hint"
        android:textColorHint="@color/light_gray"
        android:textSize="17sp"
        android:maxLength="20"
        android:maxLines="1"
        android:layout_weight="1"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:inputType="textPassword"
        android:id="@+id/passwordField"
        android:hint="@string/password_hint"
        android:textColorHint="@color/light_gray"
        android:textSize="17sp"
        android:maxLines="1"
        android:layout_weight="1"/>

</LinearLayout>

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/login_button_label"
    android:textSize="13sp"
    android:textColor="@color/text_color"
    android:id="@+id/loginButton"
    android:layout_below="@+id/editTextLayout"
    android:layout_alignParentLeft="true"
    android:background="@drawable/button_custom"
    android:layout_marginRight="@dimen/activity_horizontal_margin"
    android:layout_marginLeft="@dimen/activity_horizontal_margin"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/sign_up_text"
    android:id="@+id/signUpText"
    android:textColor="@android:color/white"
    android:layout_below="@+id/loginButton"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="43dp"/>

</RelativeLayout>

Style xml:

<resources xmlns:tools="http://schemas.android.com/tools" xmlns:android="http://schemas.android.com/apk/res/android">

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <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_alignParentTop">true</item>
    <item name="android:layout_alignParentLeft">true</item>
    <item name="android:src">@drawable/background</item>
    <item name="android:scaleType">fitStart</item>
</style>

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

<style name="AuthSubtitle" parent="AuthTitle">
    <item name="android:textColor">@android:color/white</item>
    <item name="android:textSize">13sp</item>
    <item name="android:layout_below">@+id/title</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="AuthFieldContainer">
    <item name="android:layout_centerHorizontal">true</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_below">@id/subtitle</item>
    <item name="android:layout_marginLeft">@dimen/activity_horizontal_margin</item>
    <item name="android:layout_marginRight">@dimen/activity_horizontal_margin</item>
    <item name="android:layout_marginTop">@dimen/login_vertical_margin</item>
    <item name="android:background">@android:color/white</item>
    <item name="android:orientation">vertical</item>
    <item name="android:paddingTop">@dimen/login_vertical_padding</item>
    <item name="android:paddingBottom">@dimen/login_vertical_padding</item>
    <item name="android:paddingLeft">@dimen/login_horizontal_padding</item>
    <item name="android:paddingRight">@dimen/login_horizontal_padding</item>
</style>

</resources>

This results in an error, and even if I define the width and height, the edit text fields end up horizontally next to each other, with no white background. (sorry no pictures.)

Hello Jacob,

You have style="AuthFieldContainer".

Do you not need style="@style/AuthFieldContainer" ?

Let me know if this helps or not.

Regards,

Chris

Thanks Chris for responding, the forum system won't let me upvote your answer for some reason.

No problem Jacob. All that matters is that your issue gets resolved. It is good to hear that you got it working!

Regards,

Chris

1 Answer

Hi Jacob, nice name!

You just forgot to add "@style/" at the start of the style value!