Android spinner with underline appcompat
Solution 1:
Update your support library and in XML use
Please add this style to your Spinner
style="@style/Base.Widget.AppCompat.Spinner.Underlined"
Solution 2:
This is hacky (and not perfect) way to change spinner and underline color in appcompat theme. Main point that I customized Android support library images and xml files to change color.
1) go to support library package and copy 2 images (or download my custom from the bottom of this post)
/your-app/build/intermediates/exploded-aar/com.android.support/appcompat-v7/23.1.0/res/drawable-hdpi/abc_spinner_mtrl_am_alpha.9.png
and
/your-app/build/intermediates/exploded-aar/com.android.support/appcompat-v7/23.1.0/res/drawable-hdpi/abc_textfield_default_mtrl_alpha.9.png
2) Make a copy of those images
3) Change color of abc_spinner_mtrl_am_alpha.9.png (warning: leave black borders as they are, it's for 9 patch)
4) Change color of second bottom line of abc_textfield_default_mtrl_alpha.9.png (you can see in attached small image below)
5) Save and move files to your project drawables
6) Create bottom_line_color.xml drawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-6dp" android:left="-6dp" android:right="-6dp">
<shape>
<stroke android:color="@color/brown" android:width="6dp"/>
</shape>
</item>
7) Create spinner_bottom_line.xml
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="@dimen/abc_control_inset_material"
android:insetTop="@dimen/abc_control_inset_material"
android:insetBottom="@dimen/abc_control_inset_material"
android:insetRight="@dimen/abc_control_inset_material">
<selector>
<item android:state_checked="false" android:state_pressed="false">
<layer-list>
<item android:drawable="@drawable/my_custom_abc_textfield_default_mtrl_alpha" />
<item android:drawable="@drawable/my_custom_abc_spinner_mtrl_am_alpha" />
</layer-list>
</item>
<item>
<layer-list>
<item android:drawable="@drawable/my_custom_abc_textfield_default_mtrl_alpha" />
<item android:drawable="@drawable/my_custom_abc_spinner_mtrl_am_alpha" />
</layer-list>
</item>
</selector>
</inset>
P.S. I couldn't achieve same visual style as default spinner (visual changes shown below). If you start using this custom spinner theme you should use it in all project.
So add to values/styles.xml
<style name="My.Spinner.Style" parent="Base.Widget.AppCompat.Spinner.Underlined">
<item name="android:background">@drawable/spinner_bottom_line</item>
</style>
And use it in application like this:
<Spinner
android:id="@+id/account_spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/My.Spinner.Style"
/>
Important: You should resize spinner and place to various drawables folders. You can find size in same path as I showed above. There are few popular sizes:
drawables-mdpi 20x26
drawables-hdpi 29x38
drawables-xhdpi 38x50
drawables-xxhdpi 74x98
You can take my customized images from here:
my_custom_abc_spinner_mtrl_am_alpha:
my_custom_abc_textfield_default_mtrl_alpha:
Spinner example is (xxhdpi), line is mdpi (because we don't need various lines in various drawable folders, so we can have only 1).
Visual difference (from android studio xml preview window) is shown here:
First line is my custom underline spinner, second is default Base.Widget.AppCompat.Spinner.Underlined
Solution 3:
Applying style="@style/Base.Widget.AppCompat.Spinner.Underlined"
didn't show any difference .Then gave android:backgroundTint
and android:backgroundTintMode
to spinner and it worked.
<Spinner
android:id="@+id/spBookingType"
android:spinnerMode="dropdown"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/Base.Widget.AppCompat.Spinner.Underlined"
android:backgroundTint="#ff000000"
android:backgroundTintMode="src_in" />
Solution 4:
in styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:spinnerStyle">@style/holoSpinner</item>
</style>
<style name="holoSpinner" parent="Widget.AppCompat.Spinner.Underlined">
<item name="android:textSize">16sp</item>
<item name="android:textColor">@color/colorPrimary</item>
</style>
========================
in Layout
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<Spinner
android:id="@+id/spinCountry"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/edit_text_bottom_border"
android:paddingBottom="10dp" />
</android.support.design.widget.TextInputLayout>
===============================================
edit_text_bottom_border.xml file in Drawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="1dp"
android:left="-3dp"
android:right="-3dp"
android:top="-3dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#535353" />
<!--android:color="#535353" />-->
</shape>
</item>
</layer-list>