Change spinner background color but keep arrow

Question

I\'ve read several thing about it but I can\'t find what I need. I want to keep the grey arrow but I want to remove the horizontal bar from the default style and have a whit

Answer 1

I think the best way without doing complex layouts is this:

Use this xml for your spinner background and you are good to go!!!

<item android:state_pressed="true">
    <shape>
        <solid android:color="@color/materialBlueGray600" />
        <corners android:radius="3dp" />
    </shape>
</item>
<item android:state_selected="true">
    <shape>
        <solid android:color="@color/materialGray50" />
        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <layer-list>
        <item>
            <shape>
                <solid android:color="@color/materialGray50" />
                <corners android:radius="3dp" />
            </shape>
        </item>

        <item android:gravity="right">
            <bitmap android:antialias="true"  android:gravity="right" android:src="@drawable/ic_expand_small" />
        </item>
    </layer-list>
</item>

Answer 2

A simple solution that doesn't require you to create your own drawable for the arrow is to wrap the spinner with a RelativeLayout, and set the background color in the RelativeLayout, not the spinner:

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#f00" >
    <Spinner
        android:id="@+id/spinner1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

Answer 3

I did a little modification based on @Mansur Khan 's answer.

We don't have to add an ImageView in this case because the spinner already has a triangle arrow. So check the code below:

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:background="#FFFFFF">
        <Spinner
            style="@style/Widget.AppCompat.DropDownItem.Spinner"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:id="@+id/sign_up_country"
            />
    </RelativeLayout>

Here is the screenshot

Before:

After:

Answer 4

A good way to customise spinners and any other Android controls is to use the Android Asset Studio site and choose the Android Holo Colors Generator. This will create all the assets you might need, including the "underline". It also generates the XML files that implement the changes.

Once you download the ZIP file from that site, you just copy the images and XML files into your project.

You can then edit the required image files to remove the underline. They are 9-Patch files, called:

• apptheme_spinner_default_holo_light.9.png
• apptheme_spinner_disabled_holo_light.9.png
• apptheme_spinner_focused_holo_light.9.png
• apptheme_spinner_pressed_holo_light.9.png

---

For a more complete explanation of the process, and to see some of the sample XML files, please refer to my related answer:

• Change colour of small triangle on spinner in android

Answer 5

Here is the code of custom spinner. Please check it out and tell me. Not yet I tested this. So please inform me after checking this whether it solves your problem.

<Spinner                                
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/spinner_background"
    android:gravity="center"
    android:paddingRight="10dp"
    android:spinnerMode="dropdown"
    android:textColor="your text color"
    android:textSize="your text size" />

Here is the drawable(spinner_background.xml) to create the background of spinner.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="border color" />

            <corners android:radius="3dp" />
        </shape>
    </item>
    <item
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp">
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/white" />

            <corners android:radius="3dp" />
        </shape>
    </item>

</layer-list>

Edit:

please check this link which gives you an idea to do. Customize spinner background

OR

you can do something like this.

<RelativeLayout 
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:background="spinner background image">

        <Spinner       
        android:layout_width="match_parent"
        android:layout_height="match_parent"        
        android:background="@null"/>

        <ImageView 
         android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:src="arrow image" />

    </RelativeLayout>