Gmail and Whatsapp Like ListView in android

Hi Friend here i am going to tell you how can we implement our listview just like gmail , whatsapp with step by steps in a very simle way.

Gmail Like ListView using amulyakhare. textdrawable external library in very simple steps

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

Step 2: <?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    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"

    app:layout_behavior="@string/appbar_scrolling_view_behavior"

    tools:context=".MainActivity"

    tools:showIn="@layout/activity_main">

    <ListView

        android:id="@+id/list_item"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:scrollbars="none"/>

</RelativeLayout>

Step 3: List view adapter row design :

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

    android:padding="10dp">

    <ImageView

        android:id="@+id/image_view"

        android:layout_width="0dp"

        android:layout_height="75dp"

        android:layout_weight="30"

        android:contentDescription="@string/app_name" />

    <TextView

        android:id="@+id/text"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:layout_weight="70"

        android:gravity="center"

        android:text=""

        android:textStyle="bold" />

</LinearLayout>







Step 4:

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: 

?

1 2 3 4 5 6 7

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:

Step 5: Adapter Code

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

        }

    }

}




Step 6: MainActivity

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à");

    }

}

Output will be as below: