Android Spinner Divider Color Style Size Programmatically

Android Spinner Divider Color Style Size Programmatically Tutorial is the topic of the day.

Spinner is a UI widget using which you can fetch the selection of the user among different options.

You can set options in spinner by two methods : In drop down manner and in pop up dialog manner.

In this tutorial, I will explain three methods using which you can set divider between two spinner options.

Generally, divider is a line with different colors which separates two options from each other.

You can set the height and color of the divider as per your requirements.

One can also use gradient effect using multi color to make attractive dividers.

Let is make three spinners with three different colored dividers.

Last Output View

Step 1. Using Drop down View Resource

Make a new project in android studio. I recommend to make project with “Empty activity.”

Then add the below lines in your activity_main.xml file

<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/spGames"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="10dp"
        android:spinnerMode="dropdown"/>

</LinearLayout>

• You have one spinner in layout file.
• Now create a new XML file under res->drawable directory.
• Set the name of this file as games_border.xml

Write down the following source code in games_border.xml

<?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="#ff2632"/>
        </shape>
    </item>
    <item android:bottom="5dp">
        <shape android:shape="rectangle">
            <solid android:color="#e5e912"/>
        </shape>
    </item>
</layer-list>

• Above file will create one view which we will use in our spinner. This view contains a divider like strip at the bottom.
• Prepare a new file in res->layout directory with name games_dropdown.xml.

Add the below code in games_dropdown.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:gravity="center_vertical"
    android:padding="10dp"
    android:background="@drawable/games_border" />

• This file represents the main view for the spinner.
• The background of this file is referencing the games_border.xml
• We will use this file in the java file.

Now write the below code in MainActivity.java

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[] games = {"Cricket","Tennis","Football"};
    private Spinner spGames;

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

        spGames = findViewById(R.id.spGames);
        // Initializing an ArrayAdapter
        ArrayAdapter<String> spinnerArrayAdapter = new ArrayAdapter<String>(this,R.layout.games_dropdown,games);
        spinnerArrayAdapter.setDropDownViewResource(R.layout.games_dropdown);
        spGames.setAdapter(spinnerArrayAdapter);

    }
}

• In the above code, we have first define the object of the spinner.
• I have also defined a string array which holds the names of the games which are the options of the spinner.
• Now first we will create the object of the ArrayAdapter (spinnerArrayAdapter).
• We will use setDropDownViewResource() method to set the layout file games_dropdown.xml as a main view file.

Step 2. Give style to spinner

Second method to customize divider is using the style method.

Write the following code in res->values->styles.xml file

 <style name="MatchSpinnerStyle" parent="android:style/Widget.ListView.DropDown">
        <item name="android:divider">#e713c0</item>
        <item name="android:dividerHeight">2dp</item>
    </style>

    <style name="MatchSpinnerTheme" parent="AppTheme">
        <item name="android:dropDownListViewStyle">@style/MatchSpinnerStyle</item>
 </style>

• You can set the divider height and divider color in this file.

Add the below code in activity_main.xml

  <android.support.v7.widget.AppCompatSpinner
        android:layout_width="match_parent"
        android:id="@+id/spMovies"
        android:layout_height="45dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="10dp"
        android:theme="@style/MatchSpinnerTheme"/>

To set the adapter of this spinner, add the below code in MainActivity.java file

private String[] movies = {"Jumanji","Central Intelligence","Twilight"};
private Spinner spMovies;

Write the above code before the onCreate() method.

Adapter related lines are as below.

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

• Add the above lines after onCreate() method.

Step 3. Divider with Custom Adapter

Last method is to create an adapter with custom views.

You can change views and colors easily using this method.

Add the below code in activity_main.xml

 <Spinner
        android:id="@+id/spBrands"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="10dp"
        android:spinnerMode="dropdown"/>

• Make a new file under res->drawable directory.
• Set the name of the file as gradient_divider.xml

Write down the below coding lines in gradient_divider.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient android:startColor="#ff2632" android:centerColor="#5797cf" android:endColor="#d057d2"/>
        </shape>
    </item>

</layer-list>

• Above file will create a view with gradient effect.
• You can use three different colors to make attractive gradient colors view.
• Now in the res->layout directory, prepare a new file named brand_main.xml

Source code lines for brand_main.xml file is as follow

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:id="@+id/brand_main"
        android:singleLine="true"
        android:layout_marginLeft="50dp"
        android:text="At res"
        android:textColor="#000"
        android:textSize="20sp"
        android:gravity="center_vertical" />

</LinearLayout>

Make another file in the same directory.

This time, name of this file should be brand_dropdown.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/brand_dropdown"
        android:layout_width="match_parent"
        android:gravity="center_vertical"
        android:layout_height="50dp"
        android:paddingLeft="10dp"
        android:textSize="15sp" />

    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:background="@drawable/gradient_divider"/>

</LinearLayout>

Let us create adapter class. For this, make a new java class named Spinner_Adapter.java

Code snippet for Spinner_Adapter.java is as following

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.SpinnerAdapter;
import android.widget.TextView;

public class Spinner_Adapter extends BaseAdapter implements SpinnerAdapter {
    String[] brands;
    Context context;

    public Spinner_Adapter(Context context, String[] brands) {
        this.brands = brands;
        this.context = context;
    }

    @Override
    public int getCount() {
        return brands.length;
    }

    @Override
    public Object getItem(int position) {
        return brands[position];
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View view =  View.inflate(context, R.layout.brand_main, null);
        TextView textView = (TextView) view.findViewById(R.id.brand_main);
        textView.setText(brands[position]);
        return textView;
    }

    @Override
    public View getDropDownView(int position, View convertView, ViewGroup parent) {

        View view;
            view =  View.inflate(context, R.layout.brand_dropdown, null);
            TextView textView = (TextView) view.findViewById(R.id.brand_dropdown);
            textView.setText(brands[position]);


        return view;
    }
}

• In the above code, getView() method creates a view for the spinner main layout.
• getView() method uses brand_main.xml file making new view.
• getDropDownView() method will prepare a view for the drop down options.
• It will use brand_dropdown.xml file to make a view for options of the spinner.

Now in MainActivity.java file, add below lines before onCreate() method.

    private String[] brands = {"Addidas","Nike","Fila"};
    private Spinner spBrands;

Add the below lines inside the onCreate() method.

 spBrands = findViewById(R.id.spBrands);
        Spinner_Adapter adapter = new Spinner_Adapter(this, brands);
        spBrands = (Spinner) findViewById(R.id.spBrands);
        spBrands.setAdapter(adapter);
        spBrands.setSelection(1);

I have just created an object for the adapter class and have set this object to the spinner.

So the final code for activity_main.xml is

<?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/spGames"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="10dp"
        android:spinnerMode="dropdown"/>

    <android.support.v7.widget.AppCompatSpinner
        android:layout_width="match_parent"
        android:id="@+id/spMovies"
        android:layout_height="45dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="10dp"
        android:theme="@style/MatchSpinnerTheme"/>

    <Spinner
        android:id="@+id/spBrands"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="10dp"
        android:spinnerMode="dropdown"/>

</LinearLayout>

And for all the code of MainActivity.java is as below

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[] games = {"Cricket","Tennis","Football"};
    private Spinner spGames;

    private String[] movies = {"Jumanji","Central Intelligence","Twilight"};
    private Spinner spMovies;

    private String[] brands = {"Addidas","Nike","Fila"};
    private Spinner spBrands;

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

        spGames = findViewById(R.id.spGames);
        // Initializing an ArrayAdapter
        ArrayAdapter<String> spinnerArrayAdapter = new ArrayAdapter<String>(this,R.layout.games_dropdown,games);
        spinnerArrayAdapter.setDropDownViewResource(R.layout.games_dropdown);
        spGames.setAdapter(spinnerArrayAdapter);

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

        spBrands = findViewById(R.id.spBrands);
        Spinner_Adapter adapter = new Spinner_Adapter(this, brands);
        spBrands = (Spinner) findViewById(R.id.spBrands);
        spBrands.setAdapter(adapter);
        spBrands.setSelection(1);

    }
}

More Spinner Tutorials

• Android Spinner Search Hint Prompt Text And Background Color
• 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
• Android Custom Spinner Dropdown Arrow Background Border Icon Color

Download Source Code For Android Spinner Divider

[sociallocker]Download Source Code For Spinner_Divider[/sociallocker]