TextInputLayout and AutoCompleteTextView background looks fine in preview, but on device it is always white

Question

To keep it as short as possible.

This is my style for TextInputLayout

<style name="TextLabel" parent="Widget.AppCompat.AutoCompleteTextView">
    <!-- Hint color and label color in FALSE state -->
    <item name="android:textColorHint">@color/pure_white</item>
    <!-- Label color in TRUE state and bar color FALSE and TRUE State -->
    <item name="colorAccent">@color/pure_white</item>
    <item name="colorControlNormal">@color/pure_white</item>
    <item name="colorControlActivated">@color/pure_white</item>
    <!-- When everything else failed I tried this but with no effect -->
    <item name="android:background">@android:color/transparent</item>
</style>

And this is the implementation in the layout

    <android.support.design.widget.TextInputLayout
        android:theme="@style/TextLabel"
        android:layout_margin="@dimen/activity_margin_basic_double"
        android:layout_centerInParent="true"
        android:id="@+id/team_name_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <AutoCompleteTextView
            android:id="@+id/new_team_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/prompt_team_create"
            android:maxLines="1" />

    </android.support.design.widget.TextInputLayout>

And this is what I get on the device (both physical and emulated):

But this is what I actually want and Android Studio preview actually shows it correctly, it just won't compile this way:

Any ideas how to get this sorted please? I've wasted few days trying to figure this one out but just can't figure the problem

Many thanks in advance! Sloba

Answer 1

The issue is in your styles. You are applying Widget.AppCompat.AutoCompleteTextView to TextInputLayout with the results that you are seeing. You can change this parent style to AppTheme or move android:theme="@style/TextLabel" to the AutoCompleteTextView and not change the parent. I show the first way below.

This little video shows the changes I made to get what I think is what you want. I added a few things to better show how it is working. It may not be 100% of what you need, but it should get you over the threshhold.

Demo video

Here is the XML:

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:background="#FFcc9c00"
    android:orientation="vertical">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/team_name_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:theme="@style/TextLabel">

        <AutoCompleteTextView
            android:id="@+id/new_team_name"
            android:layout_width="match_parent"
            android:hint="Choose a Team Name"
            android:layout_height="wrap_content"
            android:maxLines="1" />
    </android.support.design.widget.TextInputLayout>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/team_name_container"
        android:layout_margin="8dp"
        android:hint="EditText hint" />
</RelativeLayout>

And styles.xml:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="TextLabel" parent="AppTheme">
        <!-- Hint color and label color in FALSE state -->
        <item name="android:textColorHint">@android:color/white</item>
        <!-- Label color in TRUE state and bar color FALSE and TRUE State -->
        <item name="colorAccent">@android:color/white</item>
        <item name="colorControlNormal">@android:color/white</item>
        <item name="colorControlActivated">@android:color/white</item>
    </style>
</resources>