Android Custom Spinner Dropdown Arrow Background Border Icon Color

Android Custom Spinner Dropdown Arrow Background Border Icon Color example is today’s topic.

In this tutorial, we will add custom dropdown icon or image in the spinner.

You will also learn how to set the background color, border color and arrow icon in spinner in android.

Customizing dropdown icon, image color, background color, border color etc. in spinner is not complex if you do it in the proper manner.

Android Course

Below is a good course to gain important knowledge of android development.

Course for android development.

(Disclaimer : If you sign up using the above link we may receive small commission without any addition cost to you)

View Custom Dropdown Icon And Background Color

Step 1. Inserting Images

For making custom dropdown image, we need to insert images in the res->drawable directory.

Download images by using the following link

[sociallocker]Download Dropdown_Image[/sociallocker]

When you successfully download arrow images, add them in res->drawable directory.

Step 2. Drawable XML files

We want to customize border color, background color, border width, dropdown arrow image and it’s color.

For this purpose, we need to create one xml file drawable folder.
In this file, we will add some coding lines which will help us to achieve our goal.
So create a new xml file under res->drawable directory. Give it a name “spinner_cars.xml”

Write down the following lines in “spinner_cars.xml”

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

    <item>
        <layer-list>
            <item>
                <shape android:shape="rectangle">
                    <padding
                        android:left="4dp"
                        android:top="4dp"
                        android:right="4dp"
                        android:bottom="4dp"
                        />

                    <gradient android:startColor="#ffea03" android:endColor="#f364e619" android:angle="270" />
                    <stroke android:width="10px" android:color="#fa01dd" />
                    <corners android:radius="5dp" />
                </shape>
            </item>

            <item>

                <bitmap android:gravity="center|right" android:src="@drawable/dropdown_blue1"/>

            </item>

        </layer-list>
    </item>
</selector>

Now let us understand one by one what above lines will generate.

Shape of the Spinner

First of all, check the below line

<shape android:shape="rectangle">

This line will suggest compiler to create a rectangular shape. By default, spinner also have rectangular shape so it is ideal situation.

Padding

Now see the following source code

<padding
    android:left="4dp"
    android:top="4dp"
    android:right="4dp"
    android:bottom="4dp"
/>

It will write any text in the spinner with giving the space of 4dp to each four sides. (left, right, top and bottom)
You should set the value of padding as per the original size of your spinner (Height and Width of the spinner).
For smaller spinner it should have lower value and for bigger spinner it should have higher value.

Background Color Effects

Consider the following coding lines

<gradient android:startColor="#ffea03" android:endColor="#f364e619" android:angle="270" />

This line is responsible for filling the background of the spinner with various colors.
Gradient will add some attractive effect using two colors (startColor and endColor).
angle will decide how to mix up the to colors (vertically, horizontally or as per the angle size)

If you do not want to mix two colors then give same value to both startColor and endColor properties.

For making transparent background, give transparent colors (colors with 0 Opecity) in startColor and endColor properties.

Border Color And Width

For customizing the border of the spinner read the below code

////////////
<stroke android:width="10px" android:color="#fa01dd" />
///////////

<Stroke> have two properties : width and color.
If you want to increase the width of the border of your spinner than increase the value of android:width property.
And simply, give a color value to set the color of the border of the spinner.

Corners of Spinner

Below line will set the four corners (upper and lower left, upper and lower right) of the spinner.

<corners android:radius="5dp" />

It is giving a radius value of the corners. Higher value will create more rounded corners.

Custom Drop down Arrow

Now it is time to customize our drop down arrow which is really important thing in customizing the spinner.

Read the following coding line

 <item>
  
       <bitmap android:gravity="center|right" android:src="@drawable/dropdown_blue1"/>

 </item>

You can set any image as a drop down arrow by setting it as a value of the android:src property.
Then using android:gravity property, you can set the place of the arrow.
In most common case, we set the drop down arrow at the right side which I have set in above line.
But you can set it as per your requirement by changing the value of android:gravity property

Size And Color Of Drop Down Arrow

Unfortunately, we can not set the size and color of the arrow using this current method.(method to create a drawable file and set it as a background of the spinner)

For this, you need to directly change the whole image.
You can use the image editor like photoshop to increase or decrease the size of the dropdown image or to change the color of the image.
I have set the drop down arrow image with the height and width as 40 (40 * 40 image)

Size of your image should increase or decrease with respective to the original size of the spinner.

So till now, we created a file “spinner_cars.xml” in drawable.

Again make a new xml file named spinner.xml in drawable.

Code block for spinner.xml is as below structure

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

    <item>

        <layer-list>

            <item>
                <shape android:shape="rectangle">
                    <padding
                        android:left="4dp"
                        android:top="4dp"
                        android:right="4dp"
                        android:bottom="4dp"
                        />

                    <gradient android:startColor="#00c4c7a9" android:endColor="#00d6dadf" android:angle="270" />
                    <stroke android:width="2px" android:color="#0004fa" />
                    <corners android:radius="2dp" />
                </shape>
            </item>

            <item>

                <bitmap android:gravity="center|right" android:src="@drawable/dropdown_green1"/>

            </item>

        </layer-list>

    </item>

</selector>

It is quite similar to the code of that spinner_cars.xml file.

Both file have same properties. I have just change the values.

Step 3. Adding Spinner in Main File

Now we need to change the activity_main.xml and MainActivity.java file.

Add the below lines in activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Spinner
        android:id="@+id/spCountry"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/spinner"
        android:singleLine="true" />

    <Spinner
        android:id="@+id/spCars"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/spinner_cars"/>

</LinearLayout>

I have taken two spinners in main layout. Nothing else.

Code structure for MainActivity.java is as the following

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.Spinner;

public class MainActivity extends AppCompatActivity {

    private String[] country = {"India","USA","Canada"};
    private Spinner spCountry;

    private String[] cars = {"Ferrari","Lamborghini","Rolls Roys"};
    private Spinner spCars;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        spCountry = findViewById(R.id.spCountry);
        spCountry.setAdapter(new ArrayAdapter(this,android.R.layout.simple_spinner_dropdown_item,country));

        spCars = findViewById(R.id.spCars);
        spCars.setAdapter(new ArrayAdapter(this,android.R.layout.simple_spinner_dropdown_item,cars));

    }
}

In the above main activity file, I have created two string array variables.
First is country and second is cars. Country holds the names of three countries and cars includes the names of three cars.

Then, compiler will simply create a two objects of spinner and then it will set the adapter to those spinners.

Web Host Recommendation

If you are planning to buy best web hosting at an affordable prize then we recommend bluehost.

Click this link to see affordable plans.