Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Customize Spinner in Android

In this tutorial we will customize a spinner with Images and text within it in Android Applications.

Introduction:

Spinner is a type of widget in android. Spinner is same as ComboBox in Java. User can add values in spinner as per desire. Spinner can also be customized like other widget in Android. For the customization of Spinner we will use ArrayAdapter in this tutorial which is commonly used for view customization in android.

Classes used to perform this task:

  • Spinner class
  • LayoutInflator Class
  • ArrayAdapter class

Objective :

  • Provide knowledge to viewers about the ArrayAdapter for the customization of views.
  • Provide knowledge how to use LayoutInflator class.
  • Customization of spinner for better enhancement of User Interface (UI).

Introduction to Classes Used :

Spinner Class : Spinner class in android is used to do work with Spinner widget. This class provides one sibling in view and user can choose among rest of the items. Package from where spinner comes is “android.widget.spinner”.

Here are below some public method of spinner class which is commonly used :

  • void setAdapter(SpinnerAdapter adpt) : This method is used to set the data to spinner which is shown by it.
  • void setGravity(int grvty) : Describe the position of selected view.
  • void setPrompt(CharSequence prmpt) : This method sets the prompt means Heading to the spinner as per defined by need of the developer.
  • Boolean performClick() : This method will call the onclick listener of the view , if defined any.

LayoutInflator Class: This class is used to set the XML file into its corresponding objects of view. LayoutInflator class uses inflate method to bind the XML file. This class comes from “android.view.LayoutInflater” package. Here is below some methods of this class which is mostly used.

  • Static LayoutInflator from (Context ctx): This method will obtain the LayoutInflator from the given context.
  • Context getContext() : This method will return the context currently running in , for access to the resources, class loader etc.
  • View inflate (int resource , ViewGroup root) :This method will inflate the specified XML file.

ArrayAdapter <T>: This class is very powerful which acts as concrete BaseAdapter that holds the array of arbitrary objects. ArrayAdapter class extends the BaseAdapter class for the functionality. ArrayAdapter class is mostly used to customize the view that holds array of objects. Here are below some methods of ArrayAdapter class which are Overridden and must be used with in the class for definition.

public View getDropDownView(int position, View cnvtView,ViewGroup prnt) {
			return getCustomView(position, cnvtView, prnt);
	}

Note: This method is used to display the dropdown popup that contains data.

public View getView(int pos, View cnvtView, ViewGroup prnt) {
		return getCustomView(pos, cnvtView, prnt);
}

Note: This method is used to return the customized view at specified position in list.

Steps evolved in this task :

Create a project with name “SpinnerCustomization” and the package name should be “com.nkm. spinnercustomization”.

Creating the project

Figure 1: Creating the project

Creation of Project: Next Step

Figure 2: Creation of Project: Next Step

Right click on the res folder, choose New>Folder , then give name drawable to it as shown below in figure :

Selecting the Folder

Figure 3: Selecting the Folder

Naming the Folder

Figure 4: Naming the Folder

Listing 1: Right click on layout folder and choose New>Android XML File and give name custom_spinner to it then paste the following code in it.


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

    <ImageView
        android:id="@+id/left_pic"
        android:layout_width="100px"
        android:layout_height="80px"
        android:background="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/text_main_seen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5px"
        android:layout_marginTop="2px"
        android:layout_toRightOf="@+id/left_pic"
        android:padding="3px"
        android:text="JMD Group"
        android:textColor="#0022ee"
        android:textSize="22px"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/sub_text_seen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/text_main_seen"
        android:layout_marginLeft="5dip"
        android:layout_toRightOf="@+id/left_pic"
        android:padding="2px"
        android:text="beyond the expectations..."
        android:textColor="#777777" />

</RelativeLayout>

Listing 2: Open the main.xml file and paste the following code in it.

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="Spinner Customization"
        android:textSize="30px" />

    <Spinner
        android:id="@+id/spinner_show"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="100px"
        android:drawSelectorOnTop="true" />

</RelativeLayout>

Listing 3: Open your SpinnerCustomizationActivity. java and paste the following code in it.

package com.nkm.spinnercustomization;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.Spinner;
import android.widget.TextView;

public class SpinnerCustomizationActivity extends Activity {
	String[] spinnerValues = { "Blur", "NFS", "Burnout","GTA IV", "Racing", };

	String[] spinnerSubs = { "Ultimate Game", "Need for Speed",
			"Ulimate Racing", "Rockstar Games", "Thunder Bolt" };

	int total_images[] = { R.drawable.one, R.drawable.two, R.drawable.three,
			R.drawable.four, R.drawable.five, R.drawable.six };

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

		Spinner mySpinner = (Spinner) findViewById(R.id.spinner_show);
		mySpinner.setAdapter(new MyAdapter(this, R.layout.custom_spinner,
				spinnerValues));
	}

	public class MyAdapter extends ArrayAdapter<String> {

		public MyAdapter(Context ctx, int txtViewResourceId, String[] objects) {
			super(ctx, txtViewResourceId, objects);
		}

		@Override
		public View getDropDownView(int position, View cnvtView, ViewGroup prnt) {
			return getCustomView(position, cnvtView, prnt);
		}
		@Override
		public View getView(int pos, View cnvtView, ViewGroup prnt) {
			return getCustomView(pos, cnvtView, prnt);
		}
		public View getCustomView(int position, View convertView,
				ViewGroup parent) {
			LayoutInflater inflater = getLayoutInflater();
			View mySpinner = inflater.inflate(R.layout.custom_spinner, parent,
					false);
			TextView main_text = (TextView) mySpinner
					.findViewById(R.id.text_main_seen);
			main_text.setText(spinnerValues[position]);

			TextView subSpinner = (TextView) mySpinner
					.findViewById(R.id.sub_text_seen);
			subSpinner.setText(spinnerSubs[position]);

			ImageView left_icon = (ImageView) mySpinner
					.findViewById(R.id.left_pic);
			left_icon.setImageResource(total_images[position]);

			return mySpinner;
		}
	}
}

Run the project and here is the below output will come.

Spinner showing first of five items

Figure 5: Spinner showing first of five items

This Menu will appear for selection of Items

Figure 6: This Menu will appear for selection of Items

When item selected in Spinner

Figure 7: When item selected in Spinner

Explanation of above Code

This is a Layout that is used to Customize the Spinner which contains :

  • <ImageView> is used to show the image on the left side of spinner for each item.
  • <TextView> is used to show the Blue colored text to the right of Image in each item.
  • <TextView> with id “sub_text_seen” is used to show the sub text of each item in Spinner.

String array for Values used in Spinner:

String[] spinnerValues = { "Blur", "NFS", "Burnout","GTA IV", "Racing", };

String array for Sub Values used in Spinner :

String[] spinnerSubs = { "Ultimate Game", "Need for Speed",
			"Ulimate Racing", "Rockstar Games", "Thunder Bolt" };

Array of Image resource in drawable :

int total_images[] = { R.drawable.one, R.drawable.two, R.drawable.three,
			R.drawable.four, R.drawable.five, R.drawable.six };

Note: Be sure that you have put these above named images in drawable folder.

Fetching Id and setting of Custom Adapter for Spinner :

Spinner mySpinner = (Spinner) findViewById(R.id.spinner_show);
mySpinner.setAdapter(new MyAdapter(this, R.layout.custom_spinner,	spinnerValues));

ArrayAdapter usage for Customization :

public class MyAdapter extends ArrayAdapter<String>

This method is used to return the Customized View of Spinner for a specified item.

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

			LayoutInflater inflater = getLayoutInflater();
			View mySpinner = inflater.inflate(R.layout.custom_spinner, parent,
					false);
			TextView main_text = (TextView) mySpinner
					.findViewById(R.id.text_main_seen);
			main_text.setText(spinnerValues[position]);

			TextView subSpinner = (TextView) mySpinner
					.findViewById(R.id.sub_text_seen);
			subSpinner.setText(spinnerSubs[position]);

			ImageView left_icon = (ImageView) mySpinner
					.findViewById(R.id.left_pic);
			left_icon.setImageResource(total_images[position]);

			return mySpinner;
		}

Here:

  • Int position : is having the position of items starts from 0.
  • View convertView : this is used to do work on current view.
  • LayoutInflator inflator = getLayoutInflator() ,is used to get Inflator service.
  • return mySpinner will return the current view of spinner.

What is Covered?

  • How to use LayoutInflator Class to work with Customizations.
  • Understanding of Customization of Spinner as per need.
  • Understanding of ArrayAdapter<T>.


I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login