How to add badge to list

Question

I want to add badge notification to my arraylist.But I couldn't find a tutorial for this.This is my list code:

public void chatList() {
    conversationsAdapter=new ArrayAdapter<JsonObject>(this,0) {
        @Override
        public View getView(int c_position,View c_convertView,ViewGroup c_parent) {
            if (c_convertView == null) {
                c_convertView=getLayoutInflater().inflate(R.layout.random_bars,null);
            }
            JsonObject user=getItem(c_position);
            String name=user.get("name").getAsString();
            String image_url="http://domain.com/profile/thumb/"+user.get("photo").getAsString();
            TextView nameView=(TextView)c_convertView.findViewById(R.id.tweet);
            nameView.setText(name);
            ImageView imageView=(ImageView)c_convertView.findViewById(R.id.image);
            Ion.with(imageView)
            .placeholder(R.drawable.twitter)
            .load(image_url);
            return c_convertView;
        }
    };
    ListView conversationsListView = (ListView)findViewById(R.id.conversationList);
    conversationsListView.setAdapter(conversationsAdapter);
    conversationsListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view,
                int position, long id) {
            startChat(conversationsAdapter.getItem(position));

        }
    });
}

My list:

I want to add badge to this list.How can I do this ?

Ps:I found a library https://github.com/jgilfelt/android-viewbadger but I don't want to use it.

Answer 1

Inflate the layout in custom listview which extends base adapter instead of array adapter. Add following layout into the custom list item layout.

drawer_list_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:background="@drawable/list_selector">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="25dp"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="12dp"
        android:layout_marginRight="12dp"
        android:contentDescription="@string/desc_list_item_icon"
        android:src="@drawable/ic_home"
        android:layout_centerVertical="true" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_toRightOf="@id/icon"
        android:minHeight="?android:attr/listPreferredItemHeightSmall"
        android:textAppearance="?android:attr/textAppearanceListItemSmall"
        android:textColor="@color/list_item_title"
        android:gravity="center_vertical"
        android:paddingRight="40dp"/>

    <TextView android:id="@+id/counter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/counter_bg"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="8dp"
        android:textColor="@color/counter_text_color"/>

</RelativeLayout>

Use below drawable for background textview counter and set notification count value in textview

counter_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <!-- view background color -->
    <solid android:color="@color/counter_text_bg" >
    </solid>

    <!-- If you want to add some padding -->
    <padding
        android:right="3dp"
        android:left="3dp" >
    </padding>

    <!-- Here is the corner radius -->
    <corners android:radius="2dp" >
    </corners>

</shape>