Using Custom Adapter with Spinner

In this example , we will be using a Custom Adapter to diaply data in a Spinner. Whenever user clicks on the Spinner all the entries show up in the dropdown with respective image and text in every unit of Spinner row.

Steps to develop this can be summarized below -

• Make a new project with Empty Activity.
• Add two arrays - one for names another for respective images
• Create a new Custom Adapter( MyAdapter.class) which extends ArrayAdapter
• Use this new Adapter to connect the data source and Spinner
• We put a Spinner in the layout for the launch activity
• Implement OnItemSelectedListener on the spinner object to detect any clicks on spinner
• We also need to implement the onNothingSelected though we dont use it.
• Prepare a layout for indivdual row to design the individual row of the spinner.
• In the MyAdapter, we need to prepare a constructor to create objects(views) for the spinner.
• We override 2 methods here - getView and getDropDownView
• getView() is called whenever a view is required to be displayed.
• getDropDownView() is called when spinner is opened
• Both these methods eventually call getCustomView() which is responsible for eventually generating Views.

Used Concepts & Used Version:

• compileSdkVersion 24
• buildToolsVersion "25.0.0"

Now, let’s begin the development...

1.MainActivity (Launcher Activity)

package in.sisoft; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.util.Log; import android.view.View; import android.widget.AdapterView; import android.widget.Spinner; import android.widget.TextView; import android.widget.Toast; public class MainActivity extends AppCompatActivity { private static final String TAG = "MainActivity"; public String[] versions = {"Android","Cupcake","Donut","Eclair", "Froyo"}; public int[] images = {R.drawable.android1,R.drawable.cupcake, R.drawable.dunut, R.drawable.eclair, R.drawable.froyo1}; Spinner spin; TextView tv; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Log.d(TAG, "onCreate: set content viewdone"); spin = (Spinner)findViewById(R.id.spinner1); tv = (TextView)findViewById(R.id.show); MyAdapter ad = new MyAdapter(this,versions,images); spin.setAdapter(ad); spin.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() { @Override public void onItemSelected(AdapterView parent, View view, int position, long id) { Log.d(TAG, "onItemSelected: "); Toast.makeText(MainActivity.this, versions[position], Toast.LENGTH_SHORT).show(); int x = position+1; tv.setText(""+x); } @Override public void onNothingSelected(AdapterView parent) { } }); } }

2. Layout for MainActivity.class

<RelativeLayout 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: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="com.example.shwetank.demoadapterspinnerrecording.MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textView1" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="34dp" android:typeface="serif" android:textSize="15sp" android:textStyle="bold" android:text="Custom Spinner"/> <Spinner android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/textView1" android:layout_centerHorizontal="true" android:layout_marginTop="77dp" android:background="#6495ED" android:id="@+id/spinner1"> </Spinner> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/position" android:layout_marginTop="32dp" android:typeface="serif" android:textSize="15sp" android:textStyle="bold" android:text="Position" android:layout_alignLeft="@id/textView1" android:layout_below="@id/textView1" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/show" android:layout_alignBaseline="@id/position" android:layout_alignBottom="@id/position" android:layout_marginLeft="30dp" android:layout_toRightOf="@id/position" /> </RelativeLayout>

3. row.xml (For every unit of Spinner)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#8A2BE2" android:orientation="horizontal"> <ImageView android:layout_width="50dp" android:layout_height="50dp" android:id="@+id/icon" android:src="@drawable/android1"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/tv1" /> </LinearLayout>

MyAdapter.class

package in.sisoft; 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; public class MyAdapter extends ArrayAdapter<String> { Context ctx; String[] v; int[] i; public MyAdapter(Context c,String[] versions, int[]images){ super(c,R.layout.row,versions); this.ctx = c; this.v = versions; this.i = images;} @Override public View getView(int position, View convertView, ViewGroup parent){ return getcustomView(position,convertView,parent);} @Override public View getDropDownView(int position,View convertView, ViewGroup parent){ return getcustomView(position,convertView,parent);} public View getcustomView(int position,View convertView,ViewGroup parent){ if(convertView==null){ LayoutInflater inflater = (LayoutInflater)ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE); convertView = inflater.inflate(R.layout.row,null);} TextView tv = (TextView)convertView.findViewById(R.id.tv1); tv.setText(v[position]); ImageView iv = (ImageView)convertView.findViewById(R.id.icon); iv.setImageResource(i[position]); return convertView; } }

Below Screenshots for the output.