Android spinner with underline appcompat

Question

I am using a appcompat theme for my application. Need to know how i can show underline to spinner. It is just showing anchor. I tried setting up underline using android:background but it makes the anchor disappear.

Answer 1

Update your support library and in XML use

Please add this style to your Spinner

    style="@style/Base.Widget.AppCompat.Spinner.Underlined"

Answer 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

Answer 3

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>

Answer 4

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" />