ListView with a Letter in Icon like Gmail Android

This tutorial will teach you that how  can you generate Imageview according to the initial alphabet of your listview item.

Step 1 : Download and Copy all rounded image and nodata.png  into drawable folder

Link to download images : Download images

Step 2 : Create custom_list.xml in drawable folder

<?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="60dp"
            android:layout_height="60dp"
            android:layout_marginBottom="7dp"
            android:layout_marginLeft="10dp"
            android:layout_marginStart="10dp"
            android:layout_marginTop="7dp" />


        <TextView
            android:id="@+id/txt"
            android:layout_width="wrap_content"
            android:layout_height="60dp"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="5dp"
            android:gravity="center_vertical"
            android:textSize="20dp" />
    </TableRow>
</TableLayout>

STEP 3 : Create CustomList.java

package com.example.admin.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.custom_list, 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.custom_list, 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;
    }
}

Step 4 : Create activity_home.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:id="@+id/activity_home"
    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"
    android:background="@android:color/white"
    tools:context="com.example.admin.dynamiclistviewwithinitialalphabetimage.Home">

    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        android:id="@+id/im1"
        android:src="@drawable/nodata"
        android:gravity="center_horizontal|center_vertical|center"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

Step 4 : Create Home.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.ListView;

public class Home extends AppCompatActivity {

    ListView list;
    String[] mydata = {};
    CustomList adapter;

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

        list = (ListView) findViewById(R.id.list);
        int size = mydata.length;
        Integer[] imgname = new Integer[size];
        int c = 0;
        for (String i : mydata) {
            String temp = String.valueOf(i.charAt(0)).toLowerCase();
            imgname[c] = mapping(temp);
            c++;
        }
        // Code to display nodata image if there is no data
        ImageView im1 = (ImageView) findViewById(R.id.im1);
        if (mydata.length < 1) {
            im1.setVisibility(View.VISIBLE);
        } else {
            im1.setVisibility(View.INVISIBLE);
        }
        // ends
        adapter = new CustomList(Home.this, mydata, imgname);
        list = (ListView) findViewById(R.id.list);
        list.setAdapter(adapter);
    }

    private int mapping(String mychar) {
        Integer[] imgname = {R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e, R.drawable.f, R.drawable.g
                , R.drawable.h, R.drawable.i, R.drawable.j, R.drawable.k, R.drawable.l, R.drawable.m, R.drawable.n, R.drawable.o
                , R.drawable.p, R.drawable.q, R.drawable.r, R.drawable.s, R.drawable.t, R.drawable.u, R.drawable.v, R.drawable.w
                , R.drawable.x, R.drawable.y, R.drawable.z};

        String myabc = "abcdefghijklmnopqrstuvwxyz";
        int pos = myabc.indexOf(mychar);
        return imgname[pos];
    }
}

Step 5 : Run the application