Multiple ListView and custom listview example with click listener functions

Multiple listview can be placed inside a Activity. Here i am having two listviews



As shown in the above image, the left side displaying list view is customized listview, it that listview we will be showing a imageview and a textview, On clicking the item of that listview, the second listview will be generated.

The xml layout for that page will be like this

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical" android:layout_width="fill_parent" android:gravity="center"
 android:layout_height="fill_parent" android:background="#cccccc">
 <TextView android:layout_width="fill_parent" android:textColor="#000"
  android:layout_height="wrap_content" android:text="Multiple ListView Example" />
 <LinearLayout android:orientation="horizontal" android:layout_marginTop="10dp" android:gravity="center_horizontal"
  android:layout_width="fill_parent" android:layout_height="wrap_content">
  <ListView android:id="@+id/ListView1" android:layout_width="130dp"
   android:background="#fff" android:cacheColorHint="#fff"
   android:layout_height="wrap_content" />
  <TextView android:text="==>" android:layout_height="wrap_content" android:textColor="#000"
   android:layout_width="wrap_content"></TextView>
  <ListView android:id="@+id/ListView2" android:layout_width="130dp"
   android:background="#4c6f7e" android:cacheColorHint="#4c6f7e"
   android:layout_height="wrap_content" />
 </LinearLayout>

</LinearLayout>

For the customized listview the coding will be like this, it will show the customized listview with a imageview and textview for each item

Java

private String[] list1 = {"Icon", "Icon Creator", "Image", "Image Creator"}; 
private ListView lister1; 
lister1=(ListView)findViewById(R.id.ListView1);
ItemsAdapter itemsAdapter = new ItemsAdapter(
    ListViewExample.this, R.layout.list,
    list1);
lister1.setAdapter(itemsAdapter);

In the above example we need to explicitly use a layout, the layout will be

list.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="100dp"
    android:layout_height="fill_parent"
    >
<ImageView
 android:layout_width="wrap_content" android:layout_height="wrap_content"
 android:src="@drawable/icon" android:id="@+id/image"/>
<TextView android:textColor="#000"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="" android:id="@+id/desc"
    />
</LinearLayout>

For the second listview, is normal listview, which is used with the pre defined layout android.R.layout.simple_list_item_1

The full ListViewExample.java file will be like this

ListViewExample.java

package com.list.viewer;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.AdapterView.OnItemClickListener;

/** http://www.android-codes-examples.blogspot.com/ */
public class ListViewExample extends Activity {

 private String[] list1 = { "Icon", "Icon Creator", "Image", "Image Creator" };
 private String[] list21 = { "Design", "Creation", "Selection", "Caller" };
 private String[] list22 = { "Investor", "Producer", "Controller",
   "Publisher" };
 private String[] list23 = { "Designer", "Maker", "Creator", "Asignment" };
 private String[] list24 = { "Arranger", "Caller", "Solution", "Result" };

 private ListView lister1;
 private ListView lister2;

 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  lister1 = (ListView) findViewById(R.id.ListView1);
  lister2 = (ListView) findViewById(R.id.ListView2);
  ItemsAdapter itemsAdapter = new ItemsAdapter(ListViewExample.this,
    R.layout.list, list1);
  lister1.setAdapter(itemsAdapter);
  lister2.setAdapter(new ArrayAdapter(ListViewExample.this,
    android.R.layout.simple_list_item_1, list21));
  lister1.setOnItemClickListener(new OnItemClickListener() {

   @Override
   public void onItemClick(AdapterView arg0, View arg1,
     int positon, long arg3) {
    String[] lister = null;
    switch (positon) {
    case 0:
     lister = list21;
     break;
    case 1:
     lister = list22;
     break;
    case 2:
     lister = list23;
     break;
    case 3:
     lister = list24;
     break;
    default:
     lister = list21;
    }
    lister2.setAdapter(new ArrayAdapter(
      ListViewExample.this,
      android.R.layout.simple_list_item_1, lister));
   }
  });
 }

 private class ItemsAdapter extends BaseAdapter {
  String[] items;

  public ItemsAdapter(Context context, int textViewResourceId,
    String[] items) {
   this.items = items;
  }

  @Override
  public View getView(final int position, View convertView,
    ViewGroup parent) {
   TextView mDescription;
   View view = convertView;
   ImageView image;
   if (view == null) {
    LayoutInflater vi = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    view = vi.inflate(R.layout.list, null);
   }
   image = (ImageView) view.findViewById(R.id.image);
   mDescription = (TextView) view.findViewById(R.id.desc);
   mDescription.setText(items[position]);
   image.setBackgroundResource(R.id.image);
   return view;
  }

  public int getCount() {
   return items.length;
  }

  public Object getItem(int position) {
   return position;
  }

  public long getItemId(int position) {
   return position;
  }
 }
}

The full source code

Download source

Have a good day.