Android UI

Create Custom Spinner In Android

custom_spinner

Custom Spinner means a spinner with different look and feel other than it’s default look. It is a part of adding our own branding to an Android Application. Spinner is a common UI element in a form and unlike TextViews, EditTexts and Buttons customization of Spinner requires few steps.

In this article we will change the background and text style of spinner through XML. Also will show how to select values of list item.

Spinner works similar to listview which needs an adapter. This adapter holds data to be filled. We achieve this style modification by creating a custom adapter. In this article i will explain about custom spinner adapter.

Creating Custom Spinner In Steps

  1. Add A Spinner Widget To Layout XML
  2. Define Desired Item Values in array.xml
  3. Create A Custom Adapter
  4. Create Custom View XML File For Adapter
  5. Connect Adapter To List Items And ListView

custom_spinner_arch

Drag A Spinner Widget To Layout

drag_a_spinner_widget

Open you layout XML file of your Activity in Design mode.

Define Spinner List Items In Resource File

in res/array.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="items">
        <item>Select item</item>
        <item>Item no 1</item>
        <item>Item no 2</item>
        <item>Item no 3</item>
        <item>Item no 4</item>
        <item>Item no 5</item>
    </string-array>
</resources>

strings.xml

<resources>
    <string name="app_name">DevDeeds.com</string>

    <string name="meta_position">meta_position</string>
    <string name="meta_title">meta_title</string>
</resources>

Create Background Drawable For Spinner Item

Create box.xml under res > drawable

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

    <solid android:color="#bdc8ec" />

    <stroke
        android:width="1dp"
        android:color="#bd74e2" />

    <padding
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp" />

</shape>

Create Custom View XML File For Adapter

Create a layout xml file with name adapter_spinner.xml with below content.

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

    <TextView
        android:id="@+id/list_item"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#cabbb3"
        android:clickable="false"
        android:focusable="false"
        android:gravity="start|center_vertical"
        android:padding="5dp"
        android:textColor="#ea3e3e"
        android:textColorHint="#df000000"
        android:textSize="16sp" />

</RelativeLayout>

Create Adapter Class

import android.app.Activity;
import android.content.Context;
import android.content.res.Resources;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;
import java.util.ArrayList;
import app.devdeeds.com.myapplication.R;

public class SpinnerAdapter extends ArrayAdapter<String> {

    private ArrayList mData;
    public Resources mResources;
    private LayoutInflater mInflater;


    public SpinnerAdapter(
            Activity activitySpinner,
            int textViewResourceId,
            ArrayList objects,
            Resources resLocal
    ) {
        super(activitySpinner, textViewResourceId, objects);

        mData = objects;
        mResources = resLocal;
        mInflater = (LayoutInflater) activitySpinner.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public View getDropDownView(int position, View convertView, ViewGroup parent) {
        return getCustomView(position, convertView, parent);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        return getCustomView(position, convertView, parent);
    }

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

        View row = mInflater.inflate(R.layout.adapter_spinner, parent, false);
        TextView label = (TextView) row.findViewById(R.id.list_item);
        label.setText(mData.get(position).toString());


        //Set meta data here and later we can access these values from OnItemSelected Event Of Spinner
        row.setTag(R.string.meta_position, Integer.toString(position));
        row.setTag(R.string.meta_title, mData.get(position).toString());

        return row;
    }
}

Create XML layout for Activity

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="16dp"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="16dp">

    <Spinner
        android:id="@+id/custom_spinner"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_centerInParent="true"
        android:background="@drawable/box"
        android:entries="@array/items" />
</RelativeLayout>

Create Activity Class

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Spinner;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.Collections;

import app.devdeeds.com.myapplication.R;

public class MainActivity extends ActionBarActivity implements AdapterView.OnItemSelectedListener {

    private Boolean mAllowSelectionFiring = false;
    //For ignoring first time onItemSelected Event Firing

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ArrayList<String> spinnerAdapterData = new ArrayList<>();
        String[] spinnerItemsArray = getResources().getStringArray(R.array.items);
        Collections.addAll(spinnerAdapterData, spinnerItemsArray);
        SpinnerAdapter adapter = new SpinnerAdapter(this, R.layout.adapter_spinner, spinnerAdapterData, getResources());

        Spinner itemList = (Spinner) findViewById(R.id.custom_spinner);
        itemList.setAdapter(adapter);

        itemList.setOnItemSelectedListener(this);
    }


    @Override
    public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {

        if (mAllowSelectionFiring) {
            int selectedItemPosition = Integer.parseInt(view.getTag(R.string.meta_position).toString().trim());
            String selectedItemTitle = view.getTag(R.string.meta_title).toString().trim();

            Toast.makeText(getApplicationContext(), selectedItemPosition + ". " + selectedItemTitle, Toast.LENGTH_LONG).show();
        } else {
            mAllowSelectionFiring = true;
        }
    }

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

Build & Run

run_custom_spinner

About author

Geethu is a teacher by profession, but she likes to research new things and is also interested in writing. Devdeeds is her blog, where she writes all the blog posts related to technology, gadgets, mobile apps, games, and related content.

Leave a Reply

Your email address will not be published. Required fields are marked *