Hi I have spent 2 days trying to style an AutocompleteTextView that acts as a DropDown menu.
My best result is the next:
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>
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>