Search code examples
androidstylesautocompletetextviewtextinputlayout

TextInputLayout > AutompleteTextView (dropdown stlyle) styling problem

Hi I have spent 2 days trying to style an AutocompleteTextView that acts as a DropDown menu.

My best result is the next:

Problem image

My goal: When focused, the blue outline go arround all the component.

My layout:

<com.google.android.material.textfield.TextInputLayout
                    android:id="@+id/vaultsDropDown"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    style="@style/til_dropDown"
                    android:layout_marginLeft="10dp"
                    >

                    <AutoCompleteTextView
                        android:layout_width="match_parent"
                        android:layout_height="50dp"
                        android:inputType="none"
                        android:paddingLeft="10dp"
                        android:text="Hola"

                         />

My styles:

<style name="til_dropDown" parent="Widget.Material3.TextInputLayout.FilledBox.ExposedDropdownMenu">
    <item name="android:textColorHint">#666666</item>
    <item name="boxStrokeWidth">0dp</item>
    <item name="boxStrokeWidthFocused">0dp</item>
    <item name="materialThemeOverlay">@style/til_dropdown_materialThemOverlay</item>
</style>

<style name="til_dropdown_materialThemOverlay" >
    <item name="backgroundTint">@android:color/transparent</item>
    <item name="android:background">@drawable/textinputlayout_edittext</item>
    <item name="android:textSize">15sp</item>
    <item name="android:textColor">#112531</item>
</style>

The background state for the blue focused:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <solid android:color="#F5F5F5"/>
            <stroke android:width="2dp" android:color="@color/colorPrimary"/>
            <corners android:radius="3dp"/>
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#F5F5F5"/>
            <stroke android:width="0dp" android:color="#F5F5F5"/>
            <corners android:radius="3dp"/>
        </shape>
    </item>
</selector>
Solution

  • So the solution is to make it styles from Outlined instead of Filled:

    <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/vDropDown"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="@style/til_dropDown"
                android:layout_marginLeft="10dp"
                >

                <AutoCompleteTextView
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:inputType="none"
                    android:paddingLeft="10dp"
                     />
            </com.google.android.material.textfield.TextInputLayout>

    About styles:

    <style name="til_dropDown" parent="Widget.Material3.TextInputLayout.OutlinedBox.ExposedDropdownMenu">
        <item name="android:textColorHint">#666666</item>
        <item name="boxCornerRadiusBottomEnd">3dp</item>
        <item name="boxCornerRadiusTopEnd">3dp</item>
        <item name="boxCornerRadiusBottomStart">3dp</item>
        <item name="boxCornerRadiusTopStart">3dp</item>
        <item name="materialThemeOverlay">@style/til_dropdown_materialThemOverlay</item>
        <item name="android:background">@drawable/textinputlayout_edittext</item>
    </style>