Tuesday, 2 July 2013

Android ListView example

// siddhu vydyabhushana // 5 comments
In Android, ListView let you arranges components in a vertical scrollable list.
In this tutorial, we will show you 2 ListView examples :
  1. Normal way to display components in ListView.
  2. Custom array adapter to customize the item display in ListView.
P.S This project is developed in Eclipse 3.7, and tested with Android 2.3.3.

1. Normal ListView example

In this example, we show you how to display a list of fruit name via ListView, it should be easy and self-explanatory.
1.1 Android Layout file
File : res/layout/list_fruit.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="10dp"
    android:textSize="20sp" >
</TextView>
1.2 ListView
package com.mkyong.android;
 
import android.app.ListActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;
 
public class ListFruitActivity extends ListActivity {
 
	static final String[] FRUITS = new String[] { "Apple", "Avocado", "Banana",
			"Blueberry", "Coconut", "Durian", "Guava", "Kiwifruit",
			"Jackfruit", "Mango", "Olive", "Pear", "Sugar-apple" };
 
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
 
		// no more this
		// setContentView(R.layout.list_fruit);
 
		setListAdapter(new ArrayAdapter<String>(this, R.layout.list_fruit,FRUITS));
 
		ListView listView = getListView();
		listView.setTextFilterEnabled(true);
 
		listView.setOnItemClickListener(new OnItemClickListener() {
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {
			    // When clicked, show a toast with the TextView text
			    Toast.makeText(getApplicationContext(),
				((TextView) view).getText(), Toast.LENGTH_SHORT).show();
			}
		});
 
	}
 
}
1.3 Demo
android listview example

2. Custom ArrayAdapter example

In this example, we show you how to create 4 items in the ListView, and use a custom “ArrayAdapter” to display different images base on the “item name” in the list.
2.1 Images
Get 4 images for demonstration.
images in android project
2.2 Android Layout file
File : res/layout/list_mobile.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp" >
 
    <ImageView
        android:id="@+id/logo"
        android:layout_width="50px"
        android:layout_height="50px"
        android:layout_marginLeft="5px"
        android:layout_marginRight="20px"
        android:layout_marginTop="5px"
        android:src="@drawable/windowsmobile_logo" >
    </ImageView>
 
    <TextView
        android:id="@+id/label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@+id/label"
        android:textSize="30px" >
    </TextView>
 
</LinearLayout>
2.3 Custom ArrayAdapter
Create a class extends ArrayAdapter and customize the item display in the getView() method.
package com.mkyong.android.adaptor;
 
import com.mkyong.android.R;
 
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 MobileArrayAdapter extends ArrayAdapter<String> {
	private final Context context;
	private final String[] values;
 
	public MobileArrayAdapter(Context context, String[] values) {
		super(context, R.layout.list_mobile, values);
		this.context = context;
		this.values = values;
	}
 
	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		LayoutInflater inflater = (LayoutInflater) context
			.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
 
		View rowView = inflater.inflate(R.layout.list_mobile, parent, false);
		TextView textView = (TextView) rowView.findViewById(R.id.label);
		ImageView imageView = (ImageView) rowView.findViewById(R.id.logo);
		textView.setText(values[position]);
 
		// Change icon based on name
		String s = values[position];
 
		System.out.println(s);
 
		if (s.equals("WindowsMobile")) {
			imageView.setImageResource(R.drawable.windowsmobile_logo);
		} else if (s.equals("iOS")) {
			imageView.setImageResource(R.drawable.ios_logo);
		} else if (s.equals("Blackberry")) {
			imageView.setImageResource(R.drawable.blackberry_logo);
		} else {
			imageView.setImageResource(R.drawable.android_logo);
		}
 
		return rowView;
	}
}
2.4 ListView
ListView, but use above custom adapter to display the list.
package com.mkyong.android;
 
import com.mkyong.android.adaptor.MobileArrayAdapter;
import android.app.ListActivity;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.Toast;
import android.view.View;
 
public class ListMobileActivity extends ListActivity {
 
	static final String[] MOBILE_OS = 
               new String[] { "Android", "iOS", "WindowsMobile", "Blackberry"};
 
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
 
		setListAdapter(new MobileArrayAdapter(this, MOBILE_OS));
 
	}
 
	@Override
	protected void onListItemClick(ListView l, View v, int position, long id) {
 
		//get selected items
		String selectedValue = (String) getListAdapter().getItem(position);
		Toast.makeText(this, selectedValue, Toast.LENGTH_SHORT).show();
 
	}
 
}
2.5 Demo
android custom array adapter example

Download Source Code

Download both examples – Android-ListView-Example.zip (21 KB)

5 comments:

  1. thank you very much for the list view example!

    ReplyDelete
  2. packers and movers noida sector 12 @ http://www.noidapackers.co.in/
    packers and movers noida sector 53 @ http://www.noidapackers.co.in/
    packers and movers noida sector 51 @ http://www.noidapackers.co.in/
    packers and movers noida sector 50 @ http://www.noidapackers.co.in/
    packers and movers noida sector 49 @ http://www.noidapackers.co.in/
    packers and movers noida sector 41 @ http://www.noidapackers.co.in/
    packers and movers noida sector 39 @ http://www.noidapackers.co.in/
    packers and movers noida sector 62 @ http://www.noidapackers.co.in/
    packers and movers noida sector 61 @ http://www.noidapackers.co.in/

    ReplyDelete
  3. Android Tutorial Basic to Advance: Click Here
    Android User Interface Tutorial: Click Here

    ReplyDelete

  4. http://getpackers.com/packers-and-movers-bangalore/
    http://getpackers.com/packers-and-movers-bangalore-to-hyderabad/
    http://getpackers.com/packers-and-movers-bangalore-to-kerala/
    http://getpackers.com/packers-and-movers-bangalore-to-gurgaon/






    ReplyDelete
  5. Nice looking sites and great work. Pretty nice information. it has a better understanding. thanks for spending time on it.

    Best Industrial Training in Noida
    Best Industrial Training in Noida

    ReplyDelete