Wednesday 10 May 2017

Spinner example using AppCompatSpinner widget


          When we have a requirement to use spinner(drop down) to show list of objects in your application. Here we will see how to use AppCompatSpinner widget in this tutorial. Also we will see how to pass list of objects and getting selected object.

Screen Shot:


Download Source Code:


Step 1:   "activity_main.xml"

   Open activity_main.xml and add AppCompatSpinner view with TextView like below.

<?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"
    android:background="#FFF2A9"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Select Company"
            android:textColor="@color/colorPrimary" />


        <android.support.v7.widget.AppCompatSpinner
            android:id="@+id/sp_companies"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_marginTop="5dp"
            android:background="@drawable/bg_dropdown" />
    </LinearLayout>


</LinearLayout>

Step 2:  "bg_dropdown.xml"

 For adding background create css xml file in your drawable folder. the code like below.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>


        <layer-list>
            <item>
                <shape>
                    <stroke
                        android:width="1dip"
                        android:color="@color/black_text" />

                    <corners android:radius="3dp" />

                    <solid android:color="@android:color/transparent"></solid>


                    <padding
                        android:bottom="5.0dip"
                        android:left="5.0dip"
                        android:right="5.0dip"
                        android:top="5.0dip" />
                </shape>
            </item>


            <item>
                <bitmap
                    android:gravity="center_vertical|right"
                    android:src="@drawable/ic_keyboard_arrow_down_black_24dp" />

            </item>


        </layer-list>


    </item>
</layer-list>

Step 3:  "CompanyModel.java"

           Create Company Model class to pass objects in ArrayList. I am taking Id, name, and location parameters. then generated setters and getters with toString() method. toString() will use in spinner to show name parameter. you can get complete class from below.

package com.prasad.customspinnerex;

import java.io.Serializable;


public class CompanyModel implements Serializable {
    private String CompanyId;
    private String CompanyName;
    private String Location;

    public CompanyModel(String companyId, String companyName, String location) {
        CompanyId = companyId;
        CompanyName = companyName;
        Location = location;
    }

    public String getCompanyId() {
        return CompanyId;
    }

    public void setCompanyId(String companyId) {
        CompanyId = companyId;
    }

    public String getCompanyName() {
        return CompanyName;
    }

    public void setCompanyName(String companyName) {
        CompanyName = companyName;
    }

    public String getLocation() {
        return Location;
    }

    public void setLocation(String location) {
        Location = location;
    }

    @Override
    public String toString() {

        return CompanyName;
    }
}

Step 4: "MainActivity.java"

          Open MainActivity class and we declare Spinner view and ArrayList. Then we will added List of objects to ArrayList. Now list will pass to Adapter. you can get complete class from below.

package com.prasad.customspinnerex;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.AppCompatSpinner;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private AppCompatSpinner sp_companies;
    private List<CompanyModel> companies_list;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        sp_companies = (AppCompatSpinner) findViewById(R.id.sp_companies);
        companies_list = new ArrayList<>();

        companies_list.add(new CompanyModel("Id1", "Android", "Hyderabad"));
        companies_list.add(new CompanyModel("Id2", "Apple", "Banglore"));
        companies_list.add(new CompanyModel("Id3", "TCS", "Chennai"));
        companies_list.add(new CompanyModel("Id4", "IBM", "Mumbai"));
        companies_list.add(new CompanyModel("Id5", "Google", "Banglore"));

        ArrayAdapter adapter = new ArrayAdapter<>(this, android.R.layout.simple_spinner_item, companies_list);
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        sp_companies.setAdapter(adapter);
        sp_companies.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {

                String companyId = companies_list.get(i).getCompanyId();
                String companyName = companies_list.get(i).getCompanyName();
                Toast.makeText(MainActivity.this, "Company Name: " + companyName, Toast.LENGTH_SHORT).show();

            }

            @Override
            public void onNothingSelected(AdapterView<?> adapterView) {

            }
        });


    }
}

Step 5: "colors.xml"

       Open colors.xml file from values folder under res. add the below text colors.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="hint_text">#919191</color>
    <color name="black_text">#000000</color>
</resources>


Spinner example using AppCompatSpinner widget

          When we have a requirement to use spinner(drop down) to show list of objects in your application. Here we will see how to use Ap...