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.
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 .
Requirement
- JDK 7.0 or Above
- Android Studio 2.0
You can also check this library : ShortcutBadger Library : Counter on Android app like Facebook
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.
Add a comment