Android Spinner customized to show image and text

Spinner displays a list of items for selection. For a simple Spinner that shows only text items, you don't need to custom it. However, if you want every item of the Spinner to show both text and image (see the picture below), you need to customize it. Customizing a Spinner is similar to customizing a ListView. You need to design its layout to  each item or row to display both text and image, and override the getView method of the ArrayAdapter to supply text and images to the Spinner.




To get start, you need to create a new Android project. Then modify the activity_main.xml file to add a Spinner widget as shown below.

<LinearLayout xmlns:android= "http://schemas.android.com/apk/ res/android"
   xmlns:tools= "http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   android:paddingBottom= "@dimen/activity_vertical_margin"
   android:paddingLeft= "@dimen/activity_horizontal_margin"
   android:paddingRight= "@dimen/activity_horizontal_margin"
   android:paddingTop= "@dimen/activity_vertical_margin"
   tools:context=".MainActivity" >
  
   <Spinner
android:id="@+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
  
</LinearLayout>

After that, create a new layout file called spinner_layout.xml. This layout is a template designed for each row or item of the Spinner In the layout file you will have one ImageView and one TextView. The ImageView shows a small image and TextView shows a country's name.
  
<?xml version="1.0" encoding="utf-8"?>
<!-- Single Item Design -->
<LinearLayout xmlns:android= "http://schemas.android.com/apk/ res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="horizontal"
  >

<ImageView
   android:id="@+id/img"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:padding="10dp"
   android:layout_gravity="center_vertical"
  />
<TextView
   android:id="@+id/txt"
   android:layout_width="wrap_content"
    android:layout_height="wrap_content"    
   android:padding="10dp"  
   android:layout_gravity="center_vertical"     
>
</TextView>
</LinearLayout>
As I mentioned above, you need to override the getView method of the ArrayAdapter class to supply images and text to the Spinner. In the src/main/java/your_package directory, you create SpinnerAdapter class that overrides the getView method of the ArrayAdapter.

import android.app.Activity;
import android.content.Context;
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 java.util.ArrayList;		
public class SpinnerAdapter extends ArrayAdapter<ItemData> { int groupid; Activity context; ArrayList<ItemData> list; LayoutInflater inflater; public SpinnerAdapter(Activity context, int groupid, int id, ArrayList<ItemData> list){ super(context,id,list); this.list=list; inflater=(LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); this.groupid=groupid; }
public View getView(int position, View convertView, ViewGroup parent ){ View itemView=inflater.inflate(groupid,parent,false); ImageView imageView=(ImageView)itemView.findViewById(R.id.img); imageView.setImageResource(list.get(position).getImageId()); TextView textView=(TextView)itemView.findViewById(R.id.txt); textView.setText(list.get(position).getText()); return itemView; }
public View getDropDownView(int position, View convertView, ViewGroup parent){ return getView(position,convertView,parent);
} }
In the src/main/java/your_package, you create a ItemData class. An object of the ItemData class stores data (image id and text) of an item of the Spinner.

public class ItemData {
String text; Integer imageId; public ItemData(String text, Integer imageId){ this.text=text; this.imageId=imageId; }
public String getText(){ return text; }
public Integer getImageId(){ return imageId; } }
To see the Spinner when the main activity opens, in the onCreate() method of the MainActivity class, code will be written to make a reference to the Spinner, create an ArrayList to store  items of the Spinner, create a SpinnerAdapter object, and set the object to the Spinner with the setAdapter method. You need to have four example images (aud, khr, jpy, and usd) in your res/drawable folder.


import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Spinner;
import java.util.ArrayList;		
public class MainActivity extends ActionBarActivity {
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ArrayList<ItemData> list=new ArrayList<>(); list.add(new ItemData("Khr",R.drawable.khr)); list.add(new ItemData("Usd",R.drawable.usd)); list.add(new ItemData("Jpy",R.drawable.jpy)); list.add(new ItemData("Aud",R.drawable.aud)); Spinner sp=(Spinner)findViewById(R.id.spinner); SpinnerAdapter adapter=new SpinnerAdapter(this, R.layout.spinner_layout,R.id.txt,list); sp.setAdapter(adapter); } }
Now run the program. You will see the output as shown in the picture below.

Android-Spinner-customized-to-show-image-and-text

Posted by: Dara | post date: 05-25-2014 | Subject: Android Apps Development

write programming tip



This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.