ListView with a Letter in Icon like Gmail Android

    Maybe none of Android developers are unfamiliar with GMAIL app. Apart from swipeable feature which I mentioned in previous post, it also has a exciting interface. We notice that it's ListView has a first letter icon on the left side with colorful background.
    Of course, in this post, I will present a solution to make this design by using an external library. Please see this DEMO VIDEO first:

Import libary to Project

    TextDrawable library will help us to make this effect. In order to use it, we must add dependency to the local build.gradle file (often locate in app module) after creating a new project:

compile 'com.amulyakhare:com.amulyakhare.textdrawable:1.0.1'

    Sync gradle and now start coding!

Declaring project layout

    First, make a simple layout for main activity, only include a ListView, use Toolbar instead of ActionBar, app will have Material Design style:
    With each ListView row, providing an ImageView in the left side. On it, we will make a letter icon:

Programmatically coding

    Customizing a ListView adapter base on ArrayAdapter or BaseAdapter is first necessary job now. In getView() method, to make letter background color, provide a ColorGenerator object and generate color by this code:

        ColorGenerator generator = ColorGenerator.MATERIAL; // or use DEFAULT
        // generate random color
        int color = generator.getColor(getItem(position));
        //int color = generator.getRandomColor();

        TextDrawable drawable = TextDrawable.builder()
                .buildRound(firstLetter, color); // radius in px

    By getColor() method, each row color is not changed when we scroll ListView:

    If you change to getRandomColor(), each letter background color will be changed when ListView scrolled:

   By reading libray doc, we can make more effects/animations, for example, change buildRound() in above code to buildRoundRect(), the left icon will have a rectangle background:

   This is full code for our ListView adapter, based on ArrayAdapter, I use a ViewHolder class to help ListView scroll smoother:

package devexchanges.info.letterlistview;

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;

import com.amulyakhare.textdrawable.TextDrawable;
import com.amulyakhare.textdrawable.util.ColorGenerator;

import java.util.List;

public class ListViewAdapter extends ArrayAdapter<String> {

    private MainActivity activity;
    private List<String> friendList;

    public ListViewAdapter(MainActivity context, int resource, List<String> objects) {
        super(context, resource, objects);
        this.activity = context;
        this.friendList = objects;
    }

    @Override
    public int getCount() {
        return friendList.size();
    }

    @Override
    public String getItem(int position) {
        return friendList.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        LayoutInflater inflater = (LayoutInflater) activity.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        // If holder not exist then locate all view from UI file.
        if (convertView == null) {
            // inflate UI from XML file
            convertView = inflater.inflate(R.layout.item_listview, parent, false);
            // get all UI view
            holder = new ViewHolder(convertView);
            // set tag for holder
            convertView.setTag(holder);
        } else {
            // if holder created, get tag from view
            holder = (ViewHolder) convertView.getTag();
        }

        holder.friendName.setText(getItem(position));

        //get first letter of each String item
        String firstLetter = String.valueOf(getItem(position).charAt(0));

        ColorGenerator generator = ColorGenerator.MATERIAL; // or use DEFAULT
        // generate random color
        int color = generator.getColor(getItem(position));
        //int color = generator.getRandomColor();

        TextDrawable drawable = TextDrawable.builder()
                .buildRound(firstLetter, color); // radius in px

        holder.imageView.setImageDrawable(drawable);

        return convertView;
    }

    private class ViewHolder {
        private ImageView imageView;
        private TextView friendName;

        public ViewHolder(View v) {
            imageView = (ImageView) v.findViewById(R.id.image_view);
            friendName = (TextView) v.findViewById(R.id.text);
        }
    }
}

    In main activity, set adapter for ListView with dummy data, nothing special in it:

package devexchanges.info.letterlistview;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private ListView listView;
    private ArrayList<String> stringArrayList;
    private ArrayAdapter<String> adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listView = (ListView) findViewById(R.id.list_item);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        setData();
        adapter = new ListViewAdapter(this, R.layout.item_listview, stringArrayList);
        listView.setAdapter(adapter);
    }

    private void setData() {
        stringArrayList = new ArrayList<>();
        stringArrayList.add("Quỳnh Trang");
        stringArrayList.add("Hoàng Biên");
        stringArrayList.add("Đức Tuấn");
        stringArrayList.add("Đặng Thành");
        stringArrayList.add("Xuân Lưu");
        stringArrayList.add("Phạm Thanh");
        stringArrayList.add("Kim Kiên");
        stringArrayList.add("Ngô Trang");
        stringArrayList.add("Thanh Ngân");
        stringArrayList.add("Nguyễn Dương");
        stringArrayList.add("Quốc Cường");
        stringArrayList.add("Trần Hà");
    }
}

Conclusions

    Through this post, I present an external library to make a ListView like Gmail style. For futher details, please see this libary page on @Github. Moreover, you can see my previous post to learn how to make a swipeable ListView. Hope this helpful for your code!

Author : Hong Thai

Share