Like Us on Facebook

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
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 .

Badge-count-screenshot-uandblog

Posted By UandBlog

UandBlog is a Global Leading source of Finance, Health, Lifestyle, Technology, Gaming and Programing and other information, it is a fastest growing blog for all , for latest post or information like us on facebook , follow on Twitter, Google+ and Pinterest.

Comments ( 1 )

Roger Belk:
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

    Leave a comment..

    Click to login.

    Subscribe Latest Information

    Most Popular Posts