Sponser

create your own banner at mybannermaker.com!

Monday, March 21, 2011

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.

26 comments:

  1. can you help me in creating list view with images using Sqlite3 database..

    ReplyDelete
  2. Sure, do you need to store the image in sqlite database itself

    ReplyDelete
  3. I want to store it into the DB and retrive it from the DB onto the emulator....

    ReplyDelete
  4. I am still waiting for your reply 'Keerthy' madam...I want the database to work like this..http://coenraets.org/froyo/obama.jpg
    the details of employee and photo should be fetched from DataBase...

    ReplyDelete
  5. Hi sarfaraz, here is the sample code for sqlite database http://android-codes-examples.blogspot.com/2011/09/using-sqlite-to-populate-listview-in.html

    ReplyDelete
  6. Hi madam I post two questions but its not showing on your blog y????

    ReplyDelete
  7. Hi ali, sorry something had went wrong, i couldn't see ur posts in the admin side too

    ReplyDelete
  8. Hi sarfaraz, i had uploaded the image in the table and i retrieved the image from the table to show in listview, the link is here http://android-codes-examples.blogspot.com/2011/09/image-and-content-is-populated-from.html

    ReplyDelete
  9. Thank you Madam,its working fine..thanks again for helping me..Will you allow me to ask more questions in future????

    ReplyDelete
  10. To retrieve the image from the Server Database is by using URL, and to retrieve from our own HardDisk, what we should do..??

    ReplyDelete
  11. And one more question,
    First time when I run that application with internet connection I was able to retrieve images on to emulator,second time I just disconnected the Internet and run the application from emulator ... its not displaying images why????

    ReplyDelete
  12. Keerthy I am still waiting for your reply...was my question wrong...

    ReplyDelete
  13. Hi sarfaraz,
    Are you using the example given on this blog - http://android-codes-examples.blogspot.com/2011/09/image-and-content-is-populated-from.html

    In this example only i did with sqlite for images too.

    On the first time while we are clicking the populate button we should need the internet, after that disconnect the internet and go to that page, it will be displaying properly.

    If the doubt is not this means inform

    ReplyDelete
  14. I have done some coding on being able to click on what i have on my viewlist. But it seemed that, i have code it wrongly in a way that, if you click on Item1, it will go to Page1, Item2 will go to Page2, but if I search for Item2, and Item2 is at the top of the list, then when I click it, it will go to Page1 instead of Page2, any solutions for this?

    http://pastebin.com/W2yRcBk0

    ReplyDelete
  15. Hi Keerthy..Yes now its working,But earlier when I tried It was not working....Right now I am working on a project that fetches detail of employee from database and images also,I have to combine your application with employee detail application...
    Here is the link...just try if you can....there are 6 application in that zip file you can try for 4th and 5th one...
    http://code.google.com/p/androidtutorial/downloads/detail?name=androidtutorial-1.0.zip&can=2&q=

    ReplyDelete
  16. This is the first time in my life that I was waiting for a reply from a girl....

    ReplyDelete
  17. Its a nice example. Can you help me how do i track event of second listview i.e. design, creation, selection, caller, etc list box.

    I want to track when someone clicks on Design. Appreciating your help.

    ReplyDelete
  18. Use this code for tracking the second list


    lister1.setAdapter(itemsAdapter);
    lister2.setAdapter(new ArrayAdapter(ListViewExample.this,
    android.R.layout.simple_list_item_1, list21));

    lister2.setOnItemClickListener(new OnItemClickListener() {

    @Override
    public void onItemClick(AdapterView arg0,
    View arg1, int position, long arg3) {
    Toast.makeText(ListViewExample.this, position + " - Click position - "+list21[position], Toast.LENGTH_SHORT).show();
    }

    });

    lister1.setOnItemClickListener(new OnItemClickListener() {

    @Override
    public void onItemClick(AdapterView arg0, View arg1,
    int positon, long arg3) {
    final String[] lister;
    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));

    lister2.setOnItemClickListener(new OnItemClickListener() {

    @Override
    public void onItemClick(AdapterView arg0,
    View arg1, int position, long arg3) {
    Toast.makeText(ListViewExample.this, position + " Click position "+lister[position], Toast.LENGTH_SHORT).show();
    }

    });
    }
    });
    }

    ReplyDelete
  19. Android is an operating system such as mobile devices like smart phones and tablet computers.Android is a Linux base mobile application which is providing very fastest services .This Android Incredible features get good popularity In market.Android has a large community of developers writing applications that extend the functionality of the devices.We are also providing good logic to develop more In this field.
    Android app developers

    ReplyDelete
  20. Hi Keerthy.. i have created dialogbox, inside that dialogbox i have listview. i have created context menu for that listView.. it showing context menu but when i m clicking on that contextmenu item it is not working.. could you please help me about this... Thanks

    ReplyDelete
  21. I am glad to apprehend the accomplished agreeable of this blog and am actual aflame and blessed to say that the webmaster has done a actual acceptable job actuality to put all the advice agreeable and advice at one place.

    Android developers

    ReplyDelete
  22. Hey, the link to the entire source code is infected with malware crap.
    Did you look into that yet?

    ReplyDelete
  23. I will shortly change the source code location, thanks for you intimation

    ReplyDelete
  24. Hello Keerthy,
    I am not able to download the source code.After completing the survey also it does not generate the download link.Please look into this problem.Or please mail me to raamkumar20@gmail.com.

    Thanks in advance :)

    ReplyDelete
  25. HI Madam can please explain me with the help of the code how to display the dynamic data in the list view ..that is when i try to display more data in the particular list it is not able adjust the data based on size of data ..and it is just displaying some part of data ...please help me regarding this

    ReplyDelete

Sponser