Android Custom ListView

 

Android Custom ListView (Adding Images, sub-title)

After creating simple ListView, android also provides facilities to customize our ListView.

As the simple ListView, custom ListView also uses Adapter classes which added the content from data source (such as string array, array, database etc). Adapter bridges data between an AdapterViews and other Views

Example of Custom ListView

In this custom listview example, we are adding image, text with title and its sub-title.

Structure of custom listview project

activity_main.xml

Create an activity_main.xml file in layout folder.

File: activity_main.xml

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:tools="http://schemas.android.com/tools"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     android:paddingBottom="@dimen/activity_vertical_margin"  
7.     android:paddingLeft="@dimen/activity_horizontal_margin"  
8.     android:paddingRight="@dimen/activity_horizontal_margin"  
9.     android:paddingTop="@dimen/activity_vertical_margin"  
10.     tools:context="com.example.test.listviewwithimage.MainActivity">  
11.   
12.     <ListView  
13.         android:id="@+id/list"  
14.         android:layout_width="match_parent"  
15.         android:layout_height="wrap_content"  
16.         android:layout_marginBottom="50dp">  
17.     </ListView>  
18. </RelativeLayout>  

Create an additional mylist.xml file in layout folder which contains view components displayed in listview.

mylist.xml

File: mylist.xml

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="horizontal" >  
6.   
7.     <ImageView  
8.         android:id="@+id/icon"  
9.         android:layout_width="60dp"  
10.         android:layout_height="60dp"  
11.         android:padding="5dp" />  
12.   
13.     <LinearLayout android:layout_width="wrap_content"  
14.         android:layout_height="wrap_content"  
15.         android:orientation="vertical">  
16.       
17.     <TextView  
18.         android:id="@+id/title"  
19.         android:layout_width="wrap_content"  
20.         android:layout_height="wrap_content"  
21.         android:text="Medium Text"  
22.         android:textStyle="bold"  
23.         android:textAppearance="?android:attr/textAppearanceMedium"  
24.         android:layout_marginLeft="10dp"  
25.         android:layout_marginTop="5dp"  
26.         android:padding="2dp"  
27.         android:textColor="#4d4d4d" />  
28.     <TextView  
29.         android:id="@+id/subtitle"  
30.         android:layout_width="wrap_content"  
31.         android:layout_height="wrap_content"  
32.         android:text="TextView"   
33.         android:layout_marginLeft="10dp"/>  
34.     </LinearLayout>  
35. </LinearLayout>  

Place the all required images in drawable folder.

Activity class

File: MainActivity.java

1. package com.example.test.listviewwithimage;  
2.   
3. import android.support.v7.app.AppCompatActivity;  
4. import android.os.Bundle;  
5. import android.view.View;  
6. import android.widget.AdapterView;  
7. import android.widget.ListView;  
8. import android.widget.Toast;  
9.   
10. public class MainActivity extends AppCompatActivity {  
11.     ListView list;  
12.   
13.     String[] maintitle ={  
14.             "Title 1","Title 2",  
15.             "Title 3","Title 4",  
16.             "Title 5",  
17.     };  
18.   
19.     String[] subtitle ={  
20.             "Sub Title 1","Sub Title 2",  
21.             "Sub Title 3","Sub Title 4",  
22.             "Sub Title 5",  
23.     };  
24.   
25.     Integer[] imgid={  
26.             R.drawable.download_1,R.drawable.download_2,  
27.             R.drawable.download_3,R.drawable.download_4,  
28.             R.drawable.download_5,  
29.     };  
30.     @Override  
31.     protected void onCreate(Bundle savedInstanceState) {  
32.         super.onCreate(savedInstanceState);  
33.         setContentView(R.layout.activity_main);  
34.   
35.         MyListAdapter adapter=new MyListAdapter(this, maintitle, subtitle,imgid);  
36.         list=(ListView)findViewById(R.id.list);  
37.         list.setAdapter(adapter);  
38.   
39.   
40.         list.setOnItemClickListener(new AdapterView.OnItemClickListener() {  
41.   
42.             @Override  
43.             public void onItemClick(AdapterView<?> parent, View view,int position, long id) {  
44.                 // TODO Auto-generated method stub  
45.                 if(position == 0) {  
46.                     //code specific to first list item  
47.                     Toast.makeText(getApplicationContext(),"Place Your First Option Code",Toast.LENGTH_SHORT).show();  
48.                 }  
49.   
50.                 else if(position == 1) {  
51.                     //code specific to 2nd list item  
52.                     Toast.makeText(getApplicationContext(),"Place Your Second Option Code",Toast.LENGTH_SHORT).show();  
53.                 }  
54.   
55.                 else if(position == 2) {  
56.   
57.                     Toast.makeText(getApplicationContext(),"Place Your Third Option Code",Toast.LENGTH_SHORT).show();  
58.                 }  
59.                 else if(position == 3) {  
60.   
61.                     Toast.makeText(getApplicationContext(),"Place Your Forth Option Code",Toast.LENGTH_SHORT).show();  
62.                 }  
63.                 else if(position == 4) {  
64.   
65.                     Toast.makeText(getApplicationContext(),"Place Your Fifth Option Code",Toast.LENGTH_SHORT).show();  
66.                 }  
67.   
68.             }  
69.         });  
70.     }  
71. }  

---

Customize Our ListView

Create another java class MyListView.java which extends ArrayAdapter class. This class customizes our listview.

MyListView.java

1. package com.example.test.listviewwithimage;  
2.   
3. import android.app.Activity;  
4.   
5. import android.view.LayoutInflater;  
6. import android.view.View;  
7. import android.view.ViewGroup;  
8. import android.widget.ArrayAdapter;  
9. import android.widget.ImageView;  
10. import android.widget.TextView;  
11.   
12. public class MyListAdapter extends ArrayAdapter<String> {  
13.   
14.     private final Activity context;  
15.     private final String[] maintitle;  
16.     private final String[] subtitle;  
17.     private final Integer[] imgid;  
18.   
19.     public MyListAdapter(Activity context, String[] maintitle,String[] subtitle, Integer[] imgid) {  
20.         super(context, R.layout.mylist, maintitle);  
21.         // TODO Auto-generated constructor stub  
22.   
23.         this.context=context;  
24.         this.maintitle=maintitle;  
25.         this.subtitle=subtitle;  
26.         this.imgid=imgid;  
27.   
28.     }  
29.   
30.     public View getView(int position,View view,ViewGroup parent) {  
31.         LayoutInflater inflater=context.getLayoutInflater();  
32.         View rowView=inflater.inflate(R.layout.mylist, null,true);  
33.   
34.         TextView titleText = (TextView) rowView.findViewById(R.id.title);  
35.         ImageView imageView = (ImageView) rowView.findViewById(R.id.icon);  
36.         TextView subtitleText = (TextView) rowView.findViewById(R.id.subtitle);  
37.   
38.         titleText.setText(maintitle[position]);  
39.         imageView.setImageResource(imgid[position]);  
40.         subtitleText.setText(subtitle[position]);  
41.   
42.         return rowView;  
43.   
44.     };  
45. }  

Output