Monday, August 26, 2013

Custom ListView Example

This is a tutorial about customizing listview with and image and text.

Download Source Code for FREE:Here


Creating New Project

  • Create New Project in Eclipse. File => New Project.
  • Create New folder in res named drawable.
  • Create New gradient_bg.xml file in drawable directory and fill with following code. It is used to set gradient background in listView.

gradient_bg.xml


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <gradient
      android:startColor="#424242"
      android:centerColor="#585858"
      android:endColor="#6E6E6E"
      android:angle="270" />
</shape>


  • Create New gradient_bg_hover.xml file in drawable directory and fill with following code. It is used to set gradient background when listView item is pressed.

 gradient_bg_hover.xml


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <gradient
      android:startColor="#8A0808"
      android:centerColor="#610B0B"
      android:endColor="#B40404"
      android:angle="270" />
</shape>

  • Create New list_main.xml file in drawable directory and fill with following code. It is used to integrate above files into listView..

list_main.xml


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
     android:state_selected="false"
        android:state_pressed="false"
        android:drawable="@drawable/gradient_bg" />
    <item android:state_pressed="true"
        android:drawable="@drawable/gradient_bg_hover" />
    <item android:state_selected="true"
     android:state_pressed="false"
        android:drawable="@drawable/gradient_bg_hover" />
</selector>

  • Now add following code into activity_main.xml file.

activity_main.xml


<?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="fill_parent"
    android:orientation="vertical">
    <ListView
        android:id="@+id/listView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:divider="#2A0A12"
        android:dividerHeight="2dp"
        android:listSelector="@drawable/list_main" />
</LinearLayout>

  • Next step is to design single row of listView. Create New xml file in layout directory and name it as row_layout.xml.

row_layout.xml


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/list_main"
    android:orientation="horizontal"
    android:padding="5dip" >


    <LinearLayout
        android:id="@+id/thumbnail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginRight="5dip"
        android:padding="3dip" >

        <ImageView
            android:id="@+id/list_image"
            android:layout_width="50dip"
            android:layout_height="50dip"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

   

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/thumbnail"
        android:text="Country name"
        android:textColor="#FFFFFF"
        android:textSize="15dip"
        android:textStyle="bold"
        android:typeface="sans" />

</RelativeLayout>

  • Until now we completed designing part of the listView. Next step is to add content in listview with different images. Add following code in MainActivity.java file. 

MainActivity.java



public class MainActivity extends Activity {


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

String listArray[] = new String[] { "India", "England", "Canada",
"New zealand", "South Africa", "Pakistan", "West indies" };
int icon[] = new int[] { R.drawable.india, R.drawable.england,
R.drawable.canada, R.drawable.new_zealand,
R.drawable.south_africa, R.drawable.pakistan,
R.drawable.west_indies };

ListView listView = (ListView) findViewById(R.id.listView);
List<HashMap<String, String>> aList = new ArrayList<HashMap<String, String>>();

for (int i = 0; i <= listArray.length - 1; i++) {

HashMap<String, String> hm = new HashMap<String, String>();
hm.put("title", listArray[i]);
hm.put("icon", Integer.toString(icon[i]));
aList.add(hm);
}

String[] sfrm = { "title", "icon" };
int[] sto = { R.id.title, R.id.list_image };

SimpleAdapter adapter = new SimpleAdapter(getBaseContext(), aList,
R.layout.row_layout, sfrm, sto);

listView.setAdapter(adapter);

listView.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> arg0, View view,
int position, long id) {

switch (position) {

case 0:
Toast.makeText(getApplicationContext(), "India",
Toast.LENGTH_SHORT).show();
break;
case 1:
Toast.makeText(getApplicationContext(), "England",
Toast.LENGTH_SHORT).show();
break;
case 2:
Toast.makeText(getApplicationContext(), "Canada",
Toast.LENGTH_SHORT).show();
break;
case 3:
Toast.makeText(getApplicationContext(), "New zealand",
Toast.LENGTH_SHORT).show();
break;
case 4:
Toast.makeText(getApplicationContext(), "South Africa",
Toast.LENGTH_SHORT).show();
break;
case 5:
Toast.makeText(getApplicationContext(), "Pakistan",
Toast.LENGTH_SHORT).show();
break;
case 6:
Toast.makeText(getApplicationContext(), "West Indies",
Toast.LENGTH_SHORT).show();
break;

}

}
});
}
}

  • Done !

Download Source Code for FREE:Here



1 comment: