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.
<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>
<?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.
Posted by: Dara | post date: 05-25-2014 | Subject: Android Apps Development
|
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.