Custom ListView with Image and Text

Custom ListView with Android

Custom Listview is diffrent from SImple Listview in terms of complexity.
Like  simple Listview, custom ListView also uses Adapter to insert data from data source like as string array, array, database etc.   

Now in this tutorail you will learn  about how to customize list view with an image and text with title and its subtitle. 

So lets start from creating a project first,Open Android Studio, 
select File > New > New Project. Put name your project CustomListView.

Application Name : CustomListView
Project Name : CustomListView
Package Name : com.stacklearning.Customlistview

Open layout file :

<?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:id="@+id/activity_main"    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="com.stacklearning.customlistview.MainActivity">

    <ListView        android:id="@+id/list"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginBottom="50dp">
    </ListView>
</RelativeLayout>

Open your MainActivity.java and paste the following code.

package com.stacklearning.customlistview;

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 ={
            "JellyBean","KitKat",
            "Lollipop","Marshmallow",
            "Nougat",
    };

    String[] subtitle ={
            "Sub Title 1","Sub Title 2",
            "Sub Title 3","Sub Title 4",
            "Sub Title 5",
    };

    Integer[] imgid={
            R.drawable.jellybean,R.drawable.kitkat,
            R.drawable.lollipop,R.drawable.marshmallow,
            R.drawable.nougat,
    };
    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        MyListAdapter adapter=new MyListAdapter(this, maintitle, subtitle,imgid);
        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(),"JellyBean",Toast.LENGTH_SHORT).show();
                }

                else if(position == 1) {
                    //code specific to 2nd list item                    Toast.makeText(getApplicationContext(),"KitKat",Toast.LENGTH_SHORT).show();
                }

                else if(position == 2) {

                    Toast.makeText(getApplicationContext(),"Lollipop",Toast.LENGTH_SHORT).show();
                }
                else if(position == 3) {

                    Toast.makeText(getApplicationContext(),"Marshmallow",Toast.LENGTH_SHORT).show();
                }
                else if(position == 4) {

                    Toast.makeText(getApplicationContext(),"Nougat",Toast.LENGTH_SHORT).show();
                }

            }
        });
    }
}

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

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="horizontal"    android:layout_width="match_parent"    android:layout_height="match_parent">

    <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> 

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

package com.stacklearning.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;

/** * Created by vspl on 6/3/18. */
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;

    };
}

OutPut:

                            DOWNLOAD CODE