Custom Spinner in Android

Spinner is one of the most popular widget in android which allow us to pick an item from the list . Follow the bellow steps to create a custom spinner(Image with Text) in android .

Step 1: Create Project 

          a) Open Android Studio

          b) Go to File >New> New Project  > Project Name  > Next > Next > Next > Finish 

Step 2  : Design , Code and Output (Spinner with Text)

       

(a)   open activity_main.xml file and add the bellow code 

         <?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@color/wallet_holo_blue_light">

    <Spinner

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:minHeight="40dp"

        android:id="@+id/spinner"

        android:layout_gravity="center_horizontal" />

</RelativeLayout>

 (b) create a layout file "row_spin1.xml" and the bellow code

  <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imgLanguage"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:src="@drawable/ic_launcher" >
    </ImageView>

    <TextView
        android:id="@+id/tvLanguage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="8dp"
        android:text="Text Here" >
    </TextView>
</LinearLayout>

(c) Code 
                       Open MainActivity class and add the bellow code

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.Toast;

import app.demo.utils.CustomSpinAdapter;

/**
 * Created by anupam on 28/9/16.
 */
public class MainActivity extends Activity implements AdapterView.OnItemSelectedListener {
    Spinner sp;
    CustomSpinAdapter mAdapter;
    Context context;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        context=this;
        sp = (Spinner) findViewById(R.id.spinner);

        // Declaring the String Array with the Text Data for the Spinners

        String[] Languages = { "Select a Language", "Java", "C",
                "Swift", "Php" };

         // Declaring the Integer Array with resource Id's of Images for the Spinners

        Integer[] images = { 0, R.drawable.java, R.drawable.c,
                R.drawable.swift, R.drawable.php };

          // Declaring an Adapter and initializing it to the data

        mAdapter= new CustomSpinAdapter(context, R.layout.row_spin1,Languages,images);

     
           // Setting Adapter to the Spinner
        sp.setAdapter(mAdapter);

           // Setting OnItemClickListener to the Spinner
        sp.setOnItemSelectedListener(this);
    }

    @Override
    public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
          // write code as per your requirement
        Toast.makeText(getApplicationContext(),
                sp.getItemAtPosition(position).toString(), Toast.LENGTH_LONG)
                .show();
    }

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

    }
}
 

(d) create a class CustomSpinAdapter who extends ArrayAdapter  and add the bellow code 

import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import app.demo.R;

/**
 * Created by anupam on 28/9/16.
 */
public class CustomSpinAdapter extends ArrayAdapter {
    String[] Languages;
    Integer[] images;
    Context context;
    LayoutInflater inflater;
    public CustomSpinAdapter(Context _context, int textViewResourceId,
                             String[] objects,Integer[] img) {

        super(_context, textViewResourceId, objects);

        Languages=objects;
        context=_context;
        images=img;
        inflater = (LayoutInflater)_context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    }

    public View getCustomView(int position, View convertView,
                              ViewGroup parent) {

// Inflating the layout for the custom Spinner
        View layout = inflater.inflate(R.layout.row_spin1, parent, false);

// Declaring and Typecasting the textview in the inflated layout
        TextView tvLanguage = (TextView) layout
                .findViewById(R.id.tvLanguage);

        tvLanguage.setText(Languages[position]);
        tvLanguage.setTextColor(Color.rgb(75, 180, 225));
        ImageView img = (ImageView) layout.findViewById(R.id.imgLanguage);
        img.setImageResource(images[position]);

// Setting Special atrributes for 1st element
        if (position == 0) {
// Removing the image view
            img.setVisibility(View.GONE);
// Setting the size of the text
            tvLanguage.setTextSize(20f);
// Setting the text Color
            tvLanguage.setTextColor(Color.BLACK);

        }

        return layout;
    }

    // It gets a View that displays in the drop down popup the data at the specified position
    @Override
    public View getDropDownView(int position, View convertView,
                                ViewGroup parent) {
        return getCustomView(position, convertView, parent);
    }

    // It gets a View that displays the data at the specified position
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        return getCustomView(position, convertView, parent);
    }
}
 

Find Us : 
        Facebook : @apnaandroid
        Google+   : Apna Java
        Youtube : Android & Java Tutorial