How To CREATE Android Custom ListView with Example

Android Custom ListView with Images and Text  Example

Creating Project:

Make sure you have properly setup the Android SDK, AVD for Testing the Application. Create a New project in Eclipse IDE with the package as “hirparagroup.customlistview”. Create the Main Activity as “MainActivity” and the main Layout as “activity_main”.

Creating Layout:

The Main layout for our project is “activity_main” which has a ListView to display the array with images.

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:paddingBottom="@dimen/activity_vertical_margin"     android:paddingLeft="@dimen/activity_horizontal_margin"     android:paddingRight="@dimen/activity_horizontal_margin"     android:paddingTop="@dimen/activity_vertical_margin"     tools:context=".MainActivity" >     <ListView        android:id="@+id/list"         android:layout_width="wrap_content"         android:layout_height="wrap_content" >     </ListView> </RelativeLayout>

Next step is to create a layout for the list item that is to be displayed in ListView. Create the layout as list_single.xml which has a TextView to display to the Array and a ImageView to display set of images in each list item. Here I have created the layout as TableLayout with ImageView and TextView in a Row.

list_single.xml

<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="match_parent" >     <TableRow>         <ImageView             android:id="@+id/img"             android:layout_width="50dp"             android:layout_height="50dp"/>         <TextView             android:id="@+id/txt"             android:layout_width="wrap_content"             android:layout_height="50dp" /> </TableRow> </TableLayout>

Creating Activity:

Before Creating the MainActivity we must create a CustomList class for our custom ListView.

CustomList.java

package learn2crack.customlistview; import android.app.Activity; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ArrayAdapter; import android.widget.ImageView; import android.widget.TextView; public class CustomList extends ArrayAdapter<String>{ private final Activity context; private final String[] web; private final Integer[] imageId; public CustomList(Activity context, String[] web, Integer[] imageId) { super(context, R.layout.list_single, web); this.context = context; this.web = web; this.imageId = imageId; } @Override public View getView(int position, View view, ViewGroup parent) { LayoutInflater inflater = context.getLayoutInflater(); View rowView= inflater.inflate(R.layout.list_single, null, true); TextView txtTitle = (TextView) rowView.findViewById(R.id.txt); ImageView imageView = (ImageView) rowView.findViewById(R.id.img); txtTitle.setText(web[position]); imageView.setImageResource(imageId[position]); return rowView; } }

Next step is to create MainActivity. Here we are defining the array “web” which is displayed as text in ListView. Next we define a array imageId to store the Image Id. The images should be placed in the location /res/drawable/. Next custom list adapter is displayed. When a list item is clicked it shows a Toast that it is clicked.

MainActivity.java

package learn2crack.customlistview; import android.os.Bundle; import android.view.View; import android.widget.AdapterView; import android.widget.ListView; import android.widget.Toast; import android.app.Activity; public class MainActivity extends Activity {   ListView list;   String[] web = {     "Google Plus",       "Twitter",       "Windows",       "Bing",       "Itunes",       "Wordpress",       "Drupal"   } ;   Integer[] imageId = {       R.drawable.image1,       R.drawable.image2,       R.drawable.image3,       R.drawable.image4,       R.drawable.image5,       R.drawable.image6,       R.drawable.image7   };   @Override   protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentView(R.layout.activity_main);     CustomList adapter = new         CustomList(MainActivity.this, web, imageId);     list=(ListView)findViewById(R.id.list);         list.setAdapter(adapter);         list.setOnItemClickListener(new AdapterView.OnItemClickListener() {                 @Override                 public void onItemClick(AdapterView<?> parent, View view,                                         int position, long id) {                     Toast.makeText(MainActivity.this, "You Clicked at " +web[+ position], Toast.LENGTH_SHORT).show();                 }             });   } }

Creating Manifest:

No other special Permissions are required for our project.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android"     package="learn2crack.customlistview"     android:versionCode="1"     android:versionName="1.0" >     <uses-sdk         android:targetSdkVersion="17" />     <application         android:allowBackup="true"         android:icon="@drawable/ic_launcher"         android:label="@string/app_name"         android:theme="@style/AppTheme" >         <activity             android:name="learn2crack.customlistview.MainActivity"             android:label="@string/app_name" >             <intent-filter>                 <action android:name="android.intent.action.MAIN" />                 <category android:name="android.intent.category.LAUNCHER" />             </intent-filter>         </activity>     </application> </manifest>