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>


8 comments:

  1. Fantastic article. Thanks to the author. I learnt many things from your blog. Thank you.

    I referred your blog and also the below website

    https://www.wikitechy.com/tutorials/android/spinner-android

    Thanks to you both for helping me.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. verry good.
    https://code-android-example.blogspot.com/2019/10/how-to-add-hint-to-spinner-in-android.html

    ReplyDelete
  4. Informative Post...!!! Thanks for Sharing.....

    If you want to make custom website & application you can contact us on our Android Application Development Company and iOS Application Development Company anytime.

    ReplyDelete
  5. Great post. Thanks for sharing this. Also, check this out if you are looking for professional website or logo design services:


    Buy Logo

    ReplyDelete
  6. Hey everyone.
    We are giving you the big best offer buy logo design for your business with 75% off I expect You will be happy with us.Logo Designer

    ReplyDelete
  7. Amazing!
    Such a wonderful and helpful blog for me.
    Thank you for sharing it with us.
    Buy Law Essay UK

    ReplyDelete

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