How to make Badge(Item count) to any Android Application

In Android  |  Last Updated on Tue, 02 Aug 2016

Hi, welcome to Another tutorial.In this tutorial we are going to see how to make Badge (Item Count) to a Android Application. Badge is actually used to show number of notification, message,product count .We can see lots of Android app use Badge to their Application  today. There is no shortcut way to do it We will do it by coding ourself. In this application we are going to see how to make Badge in Image Button and button.

Prerequisites:

• JDK 7.0 or Above
• Android Studio 2.0

Steps to Follow:

Inside Drawable  folder  create an xml file item_count  and  create a rectangle with 8dp  corner radius.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#f20000" />
<stroke
android:width="2dip"
android:color="#FFF" />
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
</shape>

To modify   activity_main.xml  add  Relativelayout , Buttons and text . your activity_main.xml  will be like below. And  add the required images in the Drawable folder for this layout .
 

<?xml version="1.0" encoding="utf-8"?>
<!--Adding Badge (Item Count)/Notification Count to Android Button-->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="match_parent"
 android:gravity="center_horizontal"
 android:orientation="vertical"
 android:padding="16dp">

 <RelativeLayout
 android:id="@+id/badge_layout1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content">
 
<RelativeLayout
android:id="@+id/relative_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<Button
 android:id="@+id/button1"
 android:layout_width="65dip"
 android:layout_height="65dip"
 android:background="@drawable/chat_icon" />
</RelativeLayout>

<TextView
 android:id="@+id/badge_notification_1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignRight="@id/relative_layout"
 android:background="@drawable/item_count"
 android:text="16"
 android:textColor="#FFF"
 android:textSize="16sp"
 android:textStyle="bold" />
</RelativeLayout>

<RelativeLayout
 android:id="@+id/badge2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginLeft="50dp"
 android:layout_toRightOf="@+id/badge_layout1">

 <RelativeLayout
 android:id="@+id/relative_layout1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content">

 <Button
 android:id="@+id/myButton1"
 android:layout_width="65dip"
 android:layout_height="65dip"
 android:background="@drawable/email_icon" />
</RelativeLayout>

<TextView
 android:id="@+id/badge_notification_2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignRight="@id/relative_layout1"
 android:background="@drawable/item_count"
 android:text="21"
 android:textColor="#FFF"
 android:textSize="16sp"
 android:textStyle="bold" />
</RelativeLayout>
 
<RelativeLayout
  android:id="@+id/badge4"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_below="@+id/badge_layout1"
  android:layout_marginTop="50dp">
 
<RelativeLayout
  android:id="@+id/relative_layout3"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
 
 <Button
  android:id="@+id/myButton4"
  android:layout_width="wrap_content"
  android:layout_height="65dip"
  android:background="#4169E1"
  android:elevation="4dp"
  android:paddingLeft="50dp"
  android:paddingRight="50dp"
  android:text="Notification"
  android:textColor="#fff" />
</RelativeLayout>
 
<TextView
  android:id="@+id/badge_notification_4"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_alignLeft="@id/relative_layout3"
  android:background="@drawable/item_count"
  android:text="427"
  android:textColor="#FFF"
  android:textSize="16sp"
  android:textStyle="bold" />
 </RelativeLayout>
</RelativeLayout>

 
And your MainActivity.java  is default content as  below
 

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

 
Now run your application  , you will see the screensot like  below .