Android Custom Spinner (drop down list) example

The Android Spinner is similar to a drop-down list or AWT combo-box, used for displaying multiple items from which the user can choose one. In this example, after creating a new project with a main activity, we will do the following tasks:

1. Create an XML layout file for a single spinner item
2. Create a CustomAdapter which extends BaseAdapter
3. Attach the adapter to the spinner widget
4. Run the code

1. Android XML Layout Files

File: res/layout/custom_spinner_items.xml

<?xml version="1.0" encoding="utf-8"?> <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/imageView" android:layout_width="50dp" android:layout_height="50dp" android:padding="5dp" android:src="@mipmap/ic_launcher"/> <TextView android:id="@+id/textView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:padding="@dimen/activity_horizontal_margin" android:textColor="#000" android:textSize="16sp"/> </LinearLayout>

File: res/layout/content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/rl_main"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="android.google.com.uiexample.MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="5dp"
        android:text="Custom Spinner Example"
        android:textAlignment="center"
        android:textColor="?android:attr/editTextColor"
        android:textSize="24sp"
        android:textStyle="normal|bold"/>

    <Spinner
        android:id="@+id/simpleSpinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="60dp"
        android:backgroundTint="@android:color/holo_blue_bright"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/simpleSpinner"
        android:layout_marginTop="70dp"
        android:background="@android:color/holo_blue_bright"
        android:padding="10dp">

        <ImageView
            android:id="@+id/iv_flag"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_marginTop="10dp"
            app:srcCompat="@mipmap/ic_launcher"/>

        <TextView
            android:id="@+id/tv_country"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="11dp"
            android:textSize="24sp"
            android:textStyle="normal|bold"/>

        <TextView
            android:id="@+id/textViewCT"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_below="@+id/iv_flag"
            android:layout_marginTop="40dp"
            android:text="Current Time:"
            android:textStyle="normal|bold"/>

        <TextView
            android:id="@+id/tv_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/textViewCT"
            android:layout_marginStart="15dp"
            android:layout_toEndOf="@+id/textViewCT"
            android:textSize="30sp"/>
    </RelativeLayout>

</RelativeLayout>

2. CustomAdapter

File: CustomAdapter.java

import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.TextView; class CustomAdapter extends BaseAdapter { private int flags[]; private String[] countryNames; private LayoutInflater inflater; CustomAdapter(Context applicationContext, int[] flags, String[] countryNames) { this.flags = flags; this.countryNames = countryNames; inflater = (LayoutInflater.from(applicationContext)); } @Override public int getCount() { return flags.length; } @Override public Object getItem(int i) { return null; } @Override public long getItemId(int i) { return 0; } @Override public View getView(int i, View view, ViewGroup viewGroup) { view = inflater.inflate(R.layout.custom_spinner_items, viewGroup, false); ImageView flag_icon = (ImageView) view.findViewById(R.id.imageView); TextView country_name = (TextView) view.findViewById(R.id.textView); flag_icon.setImageResource(flags[i]); country_name.setText(countryNames[i]); return view; } }

3. Attach Adapter

File: MainActivity.java

import android.os.Bundle; import android.view.View; import android.widget.Spinner; import android.widget.TextView; import android.widget.ImageView; import android.widget.AdapterView; import android.support.v7.app.AppCompatActivity; import java.util.Date; import java.util.Calendar; import java.util.TimeZone; import java.text.SimpleDateFormat; public class MainActivity extends AppCompatActivity implements AdapterView.OnItemSelectedListener { private ImageView imgView; private TextView country_name; private TextView country_time; // Text shown in spinner private String[] countries = {"Ireland", "France", "Greece", "India", "Japan", "Australia", "America - LA", "America - NY"}; // Images from res/drawable folder private int flags[] = {R.drawable.ireland, R.drawable.france, R.drawable.greece, R.drawable.india, R.drawable.japan, R.drawable.australia, R.drawable.america, R.drawable.america}; // timezones for each country private String[] timezones = { "Europe/Dublin","Europe/Paris","Europe/Athens", "Asia/Calcutta", "Japan","Australia/Perth","US/Pacific", "US/Eastern" }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.content_main); this.imgView = (ImageView) findViewById(R.id.iv_flag); this.country_name = (TextView) findViewById(R.id.tv_country); this.country_time = (TextView) findViewById(R.id.tv_time); //Getting the instance of Spinner and applying OnItemSelectedListener on it Spinner spinner = (Spinner) findViewById(R.id.simpleSpinner); spinner.setOnItemSelectedListener(this); CustomAdapter customAdapter = new CustomAdapter(getApplicationContext(), flags, countries); spinner.setAdapter(customAdapter); } //Performing action onItemSelected @Override public void onItemSelected(AdapterView<?> arg0, View arg1, int position, long id) { Date date = Calendar.getInstance().getTime(); SimpleDateFormat sdf = new SimpleDateFormat("HH:mm"); sdf.setTimeZone(TimeZone.getTimeZone(timezones[position])); String today = sdf.format(date); imgView.setImageResource(flags[position]); country_name.setText(countries[position]); country_time.setText(today); } // not needed @Override public void onNothingSelected(AdapterView<?> adapterView) {} }

4. Result