Spinner

Spinner is use to select single option from number of listed choice. For the better user interference this is very important to customize the spinner according to need of theme. In this tutorial i am covering some steps of spinner customization. 

Download Demo 

 <Spinner
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         />

Steps to use Spinner in your project.

1. Crate a project in android studio.
    
2. Open your main_activity.xml and update it-
   
   

   <?xml version="1.0" encoding="utf-8"?>
   
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_margin="@dimen/activity_horizontal_margin"
       android:orientation="vertical"
       tools:context="com.pankaj.spinner.MainActivity">
   
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Select value from default spinner" />
   
       <!--_____________________________________________________-->
       <!--                                                                                                          -->
       <!--                               create default spinner                                     -->
       <!--_____________________________________________________-->
   
       <Spinner
           android:id="@+id/spinner_default"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_margin="10dp" />
   
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Select value from custom spinner" />
   
       <!--_____________________________________________________-->
       <!--                                                                                                          -->
       <!--                                  create custom spinner                                 -->
       <!--_____________________________________________________-->
   
       <Spinner
           android:id="@+id/spinner_custom"
           style="@style/spinner_style" />
       
   </LinearLayout>
   

    
   
3. In the above main_activity.xml, i am using two types of spinners. First one spinner have default theme and last spinner have custom theme which is defined in style.xml. So open the style.xml and update it.
   
   

   <!-- spinner styele-->
   <style name="spinner_style">
       <item name="android:background">@drawable/bg_spinner</item>
       <item name="android:layout_margin">10dp</item>
       <item name="android:paddingLeft">8dp</item>
       <item name="android:paddingTop">5dp</item>
       <item name="android:layout_width">match_parent</item>
       <item name="android:layout_height">wrap_content</item>
       <item name="android:paddingBottom">5dp</item>
   </style>
   

   
   
4. Now your style.xml should be like this-
   
   

   <resources>
   
       <!-- Base application theme. -->
       <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
   
           <!-- Customize your theme here. -->
           <item name="colorPrimary">@color/colorPrimary</item>
           <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
           <item name="colorAccent">@color/colorAccent</item>
       </style>
   
       <!-- spinner styele-->
       <style name="spinner_style">
           <item name="android:background">@drawable/bg_spinner</item>
           <item name="android:layout_margin">10dp</item>
           <item name="android:paddingLeft">8dp</item>
           <item name="android:paddingTop">5dp</item>
           <item name="android:layout_width">match_parent</item>
           <item name="android:layout_height">wrap_content</item>
           <item name="android:paddingBottom">5dp</item>
       
      <!-- we can add some more properties here-->
   
       </style>
   </resources>
   

   
    
5. Now see in your style, there are a custom drawable is used
    

   <item name="android:background">@drawable/bg_spinner</item>
   

   
   
   
6. So go to your resource directory and select your drawable directory and create new drawable resource file(selector)(drawable/bg_spinner.xml).
   
   

   <?xml version="1.0" encoding="utf-8"?>
   <selector xmlns:android="http://schemas.android.com/apk/res/android">
       <item>
           <layer-list>
               <item>
                   <shape>
                       <solid android:color="@android:color/white" />
                       <stroke android:width="1dp" android:color="@color/colorPrimary" />
                       <corners android:radius="5dp"></corners>
                   </shape>
               </item>
               <item>
                   <bitmap android:gravity="center|right" android:src="@drawable/dropdown_arrow" />
                   // you can use any other image here, instead of default_holo_dark_am
               </item>
           </layer-list>
       </item>
   </selector>
   

    
7. For the custom spinner a custom view will be required so create a layout(row_spinner.xml) in layout directory(res/layout/row_spinner.xml)
   
   

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
   
       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:gravity="left|center"
           android:orientation="horizontal">
   
           <!--______________________________________________________________-->
           <!--                                                              -->
           <!--   Looks of spinner options will be same as this textview    -->
           <!--______________________________________________________________-->
   
           <TextView
               android:id="@+id/tv_spinner"
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:gravity="center"
               android:padding="5dp"
               android:text="test"
               android:textColor="@color/colorPrimary" />
           
       </LinearLayout>
   </LinearLayout>
   

    
   
   
   
8. Open your MainActivity.JAVA class and update it -
   
   

   package com.pankaj.spinner;
   
   import android.os.Bundle;
   import android.support.v7.app.AppCompatActivity;
   import android.view.View;
   import android.widget.AdapterView;
   import android.widget.ArrayAdapter;
   import android.widget.Spinner;
   import android.widget.Toast;
   import java.util.ArrayList;
   
   public class MainActivity extends AppCompatActivity implements AdapterView.OnItemSelectedListener {
   
       //create spinner object
       private Spinner spinner_default, spinner_custom;
   
       //create adapter objects
       private ArrayAdapter arrayAdapterForDefault, arrayAdapterForCustom;
   
       //create an arraylist for showing options
       private ArrayList<String> optionList;
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   
           //initialize object
           spinner_default = (Spinner) findViewById(R.id.spinner_default);
           spinner_custom = (Spinner) findViewById(R.id.spinner_custom);
   
           //initialize options list
           optionList = new ArrayList<>();
   
           //add values for showing as options
           for (int i = 1; i <= 100; i++) {
               optionList.add("Option " + i);
           }
   
           //initialize adapters
           arrayAdapterForDefault = new ArrayAdapter(this, android.R.layout.simple_spinner_item, optionList);
           arrayAdapterForCustom = new ArrayAdapter(this, R.layout.row_spinner, R.id.tv_spinner, optionList);
   
           //add adapters to spinners
           spinner_default.setAdapter(arrayAdapterForDefault);
           spinner_custom.setAdapter(arrayAdapterForCustom);
   
           //add listener to both spinners
           spinner_default.setOnItemSelectedListener(this);
           spinner_custom.setOnItemSelectedListener(this);
       }
   
       @Override
       public void onItemSelected(AdapterView<?> adapterView, View view, int possiton, long l) {
   
           //add a switch case to differentiate options selected from which spinner.
           switch (adapterView.getId()) {
   
               //Toast will be shown when option will select from default spinner.
               case R.id.spinner_default:
                   Toast.makeText(this, "Selected by default spinner \n" + optionList.get(possiton), Toast.LENGTH_SHORT).show();
                   break;
   
               //Toast will be shown when option will select from custom spinner.
               case R.id.spinner_custom:
                   Toast.makeText(this, "Selected by custom spinner \n" + optionList.get(possiton), Toast.LENGTH_SHORT).show();
                   break;
           }
       }
   
       @Override
       public void onNothingSelected(AdapterView<?> adapterView) {
       }
   }
   

   
   
9. Now all the development steps for Spinner has completed, Please run the application.
   
   
   
   
   
   
10. Now select any option from first spinner and see the result on screen-
     
    
    
11. Now select any option from second spinner and see the result on screen-
    
     
    
    
    
    
12.  Good bye, Thanks to read this blog.

Download Demo