Custom ListView Android

Android supports the feature of customizing a ListView. To add the content from a data source, the Adapter classes are used by the custom ListView, just like a simple ListView. The data source can be a string array, array, database, etc. The data between an AdapterViews and other Views is 4bridged by the Adapter./

Example of Custom ListView:

Here, we are demonstrating an example to add an image, text with a title, and its sub-title to an application.

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<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"
   tools:context="MainActivity">
 
   <ListView
       android:id="@+id/list"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_marginBottom="50dp">
   </ListView>
</RelativeLayout>

mylist.xml:

The view components displayed in the ListView are added in the mylist.xml file which is an additional file created in the layout folder.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="horizontal" >
 
  <!-- <ImageView
       android:id="@+id/icon"
       android:layout_width="60dp"
       android:layout_height="60dp"
       android:padding="5dp" />-->
 
   <LinearLayout android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:orientation="vertical">
 
       <TextView
           android:id="@+id/title"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Medium Text"
           android:textStyle="bold"
           android:textAppearance="?android:attr/textAppearanceMedium"
           android:layout_marginLeft="10dp"
           android:layout_marginTop="5dp"
           android:padding="2dp"
           android:textColor="#4d4d4d" />
       <TextView
           android:id="@+id/subtitle"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="TextView"
           android:layout_marginLeft="10dp"/>
   </LinearLayout>
</LinearLayout>

All the required images are placed in the drawable folder.

Activity class:(File: MainActivity.java)

package com.example.radioapp;
 
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;
 
public class MainActivity extends AppCompatActivity {
   ListView list;
 
   String[] maintitle ={
           "A","B",
           "C","D",
           "E",
   };
 
   String[] subtitle ={
           "a","b",
           "c","d",
           "e",
   };
 
 
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
 
       MyListAdapter adapter=new MyListAdapter(this, maintitle, subtitle);
       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) {
               // TODO Auto-generated method stub
               if(position == 0) {
                   //code specific to first list item
                   Toast.makeText(getApplicationContext(),"You selected A",Toast.LENGTH_SHORT).show();
               }
 
               else if(position == 1) {
                   //code specific to 2nd list item
                   Toast.makeText(getApplicationContext(),"You selected B",Toast.LENGTH_SHORT).show();
               }
 
               else if(position == 2) {
 
                   Toast.makeText(getApplicationContext(),"You selected C",Toast.LENGTH_SHORT).show();
               }
               else if(position == 3) {
 
                   Toast.makeText(getApplicationContext(),"You selected D",Toast.LENGTH_SHORT).show();
               }
               else if(position == 4) {
 
                   Toast.makeText(getApplicationContext(),"You selected E",Toast.LENGTH_SHORT).show();
               }
 
           }
       });
   }
}

Customize the ListView:

To extend the ArrayAdapter class that customizes a listview, another java class file named MyListView.java is created.

MyListView.java:

package com.example.test.listviewwithimage;  
 
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 MyListAdapter extends ArrayAdapter<String> {  
 
    private final Activity context;  
    private final String[] maintitle;  
    private final String[] subtitle;  
    private final Integer[] imgid;  
 
    public MyListAdapter(Activity context, String[] maintitle,String[] subtitle, Integer[] imgid) {  
        super(context, R.layout.mylist, maintitle);  
        // TODO Auto-generated constructor stub  
 
        this.context=context;  
        this.maintitle=maintitle;  
        this.subtitle=subtitle;  
        this.imgid=imgid;  
 
    }  
 
    public View getView(int position,View view,ViewGroup parent) {  
        LayoutInflater inflater=context.getLayoutInflater();  
        View rowView=inflater.inflate(R.layout.mylist, null,true);  
 
        TextView titleText = (TextView) rowView.findViewById(R.id.title);  
        ImageView imageView = (ImageView) rowView.findViewById(R.id.icon);  
        TextView subtitleText = (TextView) rowView.findViewById(R.id.subtitle);  
 
        titleText.setText(maintitle[position]);  
        imageView.setImageResource(imgid[position]);  
        subtitleText.setText(subtitle[position]);  
 
        return rowView;  
 
    };  
}

Please follow and like us: