Adding Badge (Item Count) to Android Button

https://www.viralandroid.com/2016/01/adding-badge-item-count-to-android-button.html

Badge can be used to show number notification, item/product count, message etc. We can see many applications used badge, not only android app it can be used in ipad, iphone, window and even also in web app. Facebook used badge to count notification, friend request, message etc. and many ecommerce website also used to count number of order product, item added to bucket etc. In this tips, I am going to show how to add badge to android button, image button, imageview and like the same way you can use where you want in your application.

Adding badge in android application is little bit tricky part. There is no any shortcut ways of implementing badge in android application; we have to do our self. Here you will learn how to implement notification alert badge in an android application.

To implementing badge in android app here, I have used relative layouts, buttons and text views.

Related:
Android Toolbar Example: How to Use Toolbar as ActionBar
Android Material Design ActionBar/App Bar
Adding Badge (Notification Count) to Android ActionBar Icon

Android Example: How to Add Badge (Item Count) to Android Button

Following are the different XML file to add a notification alert badge in android button.

Create a new XML file in your app drawable directory and give the name badge_item_count. Following is the complete content of badge_item_count.xml file where I have creates a rectangle with 8dp corner radius.

res/drawable/ badge_item_count.xml

	<?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="6dp"
	android:left="6dp"
	android:right="6dp"
	android:top="6dp" />
	</shape>

view rawbadge_item_count.xml hosted with ❤ by GitHub

Then you have to modify your app XML layout file to implement badge in android button. Here I have added several RelativeLayout, Buttons and TextView. Following is the complete content of android XML layout file.

res/layout/badge_item_notification_count_layout.xml

	<?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/notification_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/badge_item_count"
	android:text="27"
	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/badge_item_count"
	android:text="11"
	android:textColor="#FFF"
	android:textSize="16sp"
	android:textStyle="bold" />
	</RelativeLayout>
	<RelativeLayout
	android:id="@+id/badge3"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginLeft="50dp"
	android:layout_toRightOf="@+id/badge2">
	<RelativeLayout
	android:id="@+id/relative_layout2"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content">
	<Button
	android:id="@+id/myButton3"
	android:layout_width="65dip"
	android:layout_height="65dip"
	android:background="@drawable/promotion_ic" />
	</RelativeLayout>
	<TextView
	android:id="@+id/badge_notification_3"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignRight="@id/relative_layout2"
	android:background="@drawable/badge_item_count"
	android:text="55"
	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="#72b332"
	android:elevation="4dp"
	android:paddingLeft="50dp"
	android:paddingRight="50dp"
	android:text="Notification Badge Android"
	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/badge_item_count"
	android:text="1030"
	android:textColor="#FFF"
	android:textSize="16sp"
	android:textStyle="bold" />
	</RelativeLayout>
	</RelativeLayout>

view rawbadge_item_notification_count_layout.xml hosted with ❤ by GitHub

Following is the default content of java activity file.

src/ AndroidNotificationCountBadge.java

	//Adding a notification badge to a buttons
	package viralandroid.com.androidxmluserinterfacetutorial;
	import android.os.Bundle;
	import android.support.v7.app.AppCompatActivity;
	public class AndroidNotificationCountBadge extends AppCompatActivity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.badge_item_notification_count_layout);
	}
	}

view rawAndroidNotificationCountBadge.java hosted with ❤ by GitHub

Now, run your Adding Badge (Item Count) to Android Button application, you will see like the screenshot above. Make sure you have added icons in drawable folder with appropriate name which is used in XML layout