How to make Badge(Item count) to any Android Application
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
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>
<!--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);
}
}
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 .


Comments ( 1 )

Roger Belk:
Am I wrong or is there gaps in the code. Do we need to finish it on our own?
Am I wrong or is there gaps in the code. Do we need to finish it on our own?

Admin:
there is no gap in the code , you just need to Add your images to Drawable foldar
there is no gap in the code , you just need to Add your images to Drawable foldar
Subscribe Latest Information
Categories
Most Popular Posts
How to Withdraw Money from ATM Machine 7steps 1180773 Views
How to Create Chat Application in Android Studio 152367 Views
How to Create a Shopping Cart Application in Android 115444 Views