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.
(Disclaimer : If you sign up using the above link we may receive small commission without any addition cost to you)
Similar Articles
- Android Spinner Search Hint Prompt Text And Background Color Example
- Android Spinner Divider Color Style Size Programmatically Tutorial
- Android Spinner Text Color Size Programmatically tutorial example
- Android Spinner Searchable With Search Box Example
- Android Spinner Disable Item Dropdown example tutorial
- Android Spinner Custom Adapter Example Tutorial
Download Source Code For Android Custom Spinner Dropdown Arrow Background
[sociallocker]Download Source Code For Spinner_Custom_Arrow Background[/sociallocker]