Android - Custom ListView Example - ANDROID - Helper

Tuesday, July 12, 2011

Android - Custom ListView Example

CUSTOM LISTVIEW

SOURCE CODE [main.xml] is

<?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:layout_height="fill_parent">

                <ListView android:id="@+id/ListView01"
android:layout_height="wrap_content"
                                android:layout_width="fill_parent">
</ListView>

</LinearLayout>

SOURCE CODE [listview.xml] is

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_height="wrap_content"
android:gravity="left|center"
                android:layout_width="fill_parent"
android:paddingBottom="5px"
                android:background="#fff200"
                android:paddingTop="5px"
android:paddingLeft="5px">

                <ImageView android:id="@+id/ImageView01"
                                android:layout_width="wrap_content"
android:layout_height="wrap_content">
                </ImageView>

                <TextView android:id="@+id/TextView01"
                                android:layout_width="wrap_content"
android:layout_height="wrap_content"
                                android:textSize="20px"
                                android:textStyle="bold"
                                android:layout_marginLeft="10px"
android:textColor="#0099CC">
                </TextView>

</LinearLayout>


SOURCE CODE [CustomListViewExample.java] is

package com.CustomListViewExample;

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

public class CustomListViewExample extends Activity
{

                String[] text = { "One", "Two", "Three", "Four", "Five", "Six", "Seven",
                                                "Eight", "Nine", "Ten" };

                int[] image = { R.drawable.one, R.drawable.two, R.drawable.three,
                                                R.drawable.four, R.drawable.five, R.drawable.six, R.drawable.seven,
                                                R.drawable.eight, R.drawable.nine, R.drawable.ten };

                public void onCreate(Bundle savedInstanceState)
{

                                super.onCreate(savedInstanceState);
                                setContentView(R.layout.main);

                                ListView l1 = (ListView) findViewById(R.id.ListView01);
                                l1.setAdapter(new MyCustomAdapter(text, image));

                }

                class MyCustomAdapter extends BaseAdapter
{

                                String[] data_text;
                                int[] data_image;

                                MyCustomAdapter()
{
                                                data_text = null;
data_image = null;
                                }

                                MyCustomAdapter(String[] text, int[] image)
{
                                                data_text = text;
                                                data_image = image;
                                }

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

                                public String getItem(int position)
{
                                                return null;
                                }

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

                                public View getView(int position, View convertView, ViewGroup parent)
{

                                                LayoutInflater inflater = getLayoutInflater();
                                                View row;

                                                row = inflater.inflate(R.layout.listview, parent, false);

                                                TextView textview = (TextView) row.findViewById(R.id.TextView01);
                                                ImageView imageview = (ImageView) row
                                                                                .findViewById(R.id.ImageView01);

                                                textview.setText(data_text[position]);
                                                imageview.setImageResource(data_image[position]);

                                                return (row);

                                }
                }

}

The OUTPUT will be


 https://lh6.googleusercontent.com/-qVHB8h-BXss/Th0vuXmPnVI/AAAAAAAAALI/aHl0b1wGwPM/custom_listview1.png

https://lh3.googleusercontent.com/-lvfM2GYOp3M/Th0vvpBvlFI/AAAAAAAAALM/dakOhXH9QPY/custom_listview2.png

7 comments:

  1. i can not find getLayoutInflater() method . :(

    ReplyDelete
  2. ah ,to call getLayoutInflater() , we have to use Oject Activity :D

    ReplyDelete
  3. Can you send me source code...

    ReplyDelete
  4. this cade is work for me thank u so much

    ReplyDelete
  5. Dudue thats a great work, keep it Up, many of begginers were like this
    (Pir Fahim)

    ReplyDelete
  6. Thanks for the simplest tutorial on how to do this on the web. I spend hours going through two other tutorials which led me nowhere. This one was simple to understand, straight forward and VERY helpful. Everything works as it should.

    ReplyDelete
  7. package in.wptrafficanalyzer.listviewwithimagesandtext;

    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;

    import android.app.Activity;
    import android.os.Bundle;
    import android.widget.ListView;
    import android.widget.SimpleAdapter;

    public class MainActivity extends Activity {

    // Array of strings storing country names
    String[] countries = new String[] {
    "India",
    "Pakistan",
    "Sri Lanka",
    "China",
    "Bangladesh",
    "Nepal",
    "Afghanistan",
    "North Korea",
    "South Korea",
    "Japan"
    };

    // Array of integers points to images stored in /res/drawable-ldpi/
    int[] flags = new int[]{
    R.drawable.india,
    R.drawable.pakistan,
    R.drawable.srilanka,
    R.drawable.china,
    R.drawable.bangladesh,
    R.drawable.nepal,
    R.drawable.afghanistan,
    R.drawable.nkorea,
    R.drawable.skorea,
    R.drawable.japan
    };

    // Array of strings to store currencies
    String[] currency = new String[]{
    "Indian Rupee",
    "Pakistani Rupee",
    "Sri Lankan Rupee",
    "Renminbi",
    "Bangladeshi Taka",
    "Nepalese Rupee",
    "Afghani",
    "North Korean Won",
    "South Korean Won",
    "Japanese Yen"
    };


    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    // Each row in the list stores country name, currency and flag
    List> aList = new ArrayList>();

    for(int i=0;i<10;i++){
    HashMap hm = new HashMap();
    hm.put("txt", "Country : " + countries[i]);
    hm.put("cur","Currency : " + currency[i]);
    hm.put("flag", Integer.toString(flags[i]) );
    aList.add(hm);
    }

    // Keys used in Hashmap
    String[] from = { "flag","txt","cur" };

    // Ids of views in listview_layout
    int[] to = { R.id.flag,R.id.txt,R.id.cur};

    // Instantiating an adapter to store each items
    // R.layout.listview_layout defines the layout of each item
    SimpleAdapter adapter = new SimpleAdapter(getBaseContext(), aList, R.layout.listview_layout, from, to);

    // Getting a reference to listview of main.xml layout file
    ListView listView = ( ListView ) findViewById(R.id.listview);

    // Setting the adapter to the listView
    listView.setAdapter(adapter);



    }


    }
    How to add hyperlink in this code please reply me
    on my id amit.bhaliya@yahoo.co.in

    ReplyDelete