In this tutorial we are aiming to see a way to create Badge (Item Count) to a android Application. Badge is really used to show number of notification, message,product count .We can see many android app use Badge to their Application these days. there's no cutoff way to do it we'll do it by coding ourself. during this application we are aiming to see a way to create Badge in Image Button and button.

Requirement 


  1. JDK 7.0 or Above
  2. Android Studio 2.0

Steps to Follow:

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

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

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

MainActivity.java

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 :

Demo

Hope you enjoy and tutorial is helpful for your project.

0

Add a comment

Contributors
Contributors
Popular Posts
Popular Posts
Archive
Labels
Labels
Loading
Dynamic Views theme. Powered by Blogger. Report Abuse.