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.

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”

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

Shape of the Spinner

First of all, check the below line

  • 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

  • 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

  • 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> 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.

  • 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

  • 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

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

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

Code structure for MainActivity.java is as the following

  • 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.

Similar Articles

View Custom Dropdown Icon And Background Color

Download Source Code For Android Custom Spinner Dropdown Arrow Background

[sociallocker]Download Source Code For Spinner_Custom_Arrow Background[/sociallocker]

Hardik Parsania

I am mobile app developer. I am always passionate about solving complex and real world problems.I have developed many apps with great interest and superior logical skills.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *