Thursday, December 01, 2016

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. 



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




No comments:

Post a Comment