Sunday, June 16, 2013

Custom ArrayAdapter for Spinner, with custom icons

It repost my old exercise "Custom ArrayAdapter for Spinner, with different icons". Somebody report that the icon in the Spinner button doesn't change accordingly. I have re-check on HTC One X (running Android 4.1.1), HTC Flyer (Android 3.2.1) and Nexus One (Android 2.3.6), all work as expected. Would you help to check in your device and let me know if any problem?

APK available here: http://goo.gl/8VmK3

run on HTC One X (running Android 4.1.1)

Run on Nexus One (Android 2.3.6)



Before implement custom Spinner with icons, we have to prepare our custom icons. Download the sample icons to /drawable folder, named icon.png and icongray.png.



Create /res/layout/row.xml to define the custom row layout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:orientation="horizontal">
<ImageView
 android:id="@+id/icon"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:src="@drawable/ic_launcher"/>
<TextView
 android:id="@+id/weekofday"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"/>
</LinearLayout>


Modify the layout, /res/layout/activity_main.xml, to add 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold"
        android:layout_gravity="center_horizontal"
        android:autoLink="web" />
    <Spinner
        android:id="@+id/spinner"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" />

</LinearLayout>


Main code, MainActivity.java.
package com.example.androidcustomspinner;

import android.os.Bundle;
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.Spinner;
import android.widget.TextView;

public class MainActivity extends Activity {
 
 String[] DayOfWeek = {"Sunday", "Monday", "Tuesday", 
   "Wednesday", "Thursday", "Friday", "Saturday"};

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  Spinner mySpinner = (Spinner)findViewById(R.id.spinner);
        mySpinner.setAdapter(new MyCustomAdapter(MainActivity.this, R.layout.row, DayOfWeek));
 }

 public class MyCustomAdapter extends ArrayAdapter<String>{

  public MyCustomAdapter(Context context, int textViewResourceId,
    String[] objects) {
   super(context, textViewResourceId, objects);
   // TODO Auto-generated constructor stub
  }

  @Override
  public View getDropDownView(int position, View convertView,
    ViewGroup parent) {
   // TODO Auto-generated method stub
   return getCustomView(position, convertView, parent);
  }

  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
   // TODO Auto-generated method stub
   return getCustomView(position, convertView, parent);
  }

  public View getCustomView(int position, View convertView, ViewGroup parent) {
   // TODO Auto-generated method stub
   //return super.getView(position, convertView, parent);

   LayoutInflater inflater=getLayoutInflater();
   View row=inflater.inflate(R.layout.row, parent, false);
   TextView label=(TextView)row.findViewById(R.id.weekofday);
   label.setText(DayOfWeek[position]);
   
   ImageView icon=(ImageView)row.findViewById(R.id.icon);
   
   if (DayOfWeek[position]=="Sunday"){
    icon.setImageResource(R.drawable.icon);
   }
   else{
    icon.setImageResource(R.drawable.icongray);
   }
   
   return row;
  } 
    }
}

download filesDownload the files.

Next:
Custom Spinner with text color

5 comments:

Anonymous said...

I have been trying to find a way to do this for 2 days.. You sir, are my hero.

QED Technologies said...

I get :

The method getLayoutInflater(Bundle) in the type Fragment is not applicable for the arguments ()

on the line LayoutInflater inflater=getLayoutInflater();

annie chan said...

Is there any method to display my selected data at another activity and save it inside sqlite?

kashish gupta said...

Sir how can i change the text colour of customised spinner???

Andr.oid Eric said...

hello kashish gupta,

please check Custom Spinner with text color.