Show unread notification badge in Circle Android

Question

I am trying to show unread notification in tab. Below is my custom tab layout.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TextView
        android:id="@+id/tabTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="sample"
        android:alpha="0.5"
        android:textStyle="bold"
        android:layout_marginRight="4dp"
        android:textColor="@android:color/white"
        />
    <TextView
        android:id="@+id/tabBadge"
        android:layout_width="28dp"
        android:layout_height="28dp"
        android:layout_toRightOf="@id/tabTitle"
        android:layout_centerVertical="true"
        android:textColor="#FFF"
        android:gravity="center"
        android:text="10"
        android:visibility="visible"
        android:textStyle="bold"
        android:background="@drawable/badge_circle"/>
</RelativeLayout>

I tried below for badge_circle.xml one by one. But all of them gives me only oval shape. I am literally confused now on how to make the circle shape.

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="ring" >         <gradient             android:startColor="#FFFF0000"             android:endColor="#FFFF0000"             android:angle="270"/>     </shape>


<?xml version="1.0" encoding="utf-8"?> 
<shape         
       xmlns:android="http://schemas.android.com/apk/res/android"               android:shape="oval">          
  <gradient             
            android:type="radial"             
            android:gradientRadius="5"             
            android:centerX=".2"             
            android:centerY=".1"             
            android:startColor="#FFFF00"             
            android:endColor="#FFFF99" />          
  <size             android:width="20dp"             
        android:height="20dp"/> 
</shape>
<shape         
       xmlns:android="http://schemas.android.com/apk/res/android"           android:shape="oval">         
  <solid             
         android:color="#d3d3d3"/>         
  <size             android:width="8dp"             android:height="8dp"/> 
</shape>

<shape         
       xmlns:android="http://schemas.android.com/apk/res/android"         android:shape="oval">        
  <gradient             
            android:angle="0"             
            android:startColor="#FF000000"             
            android:endColor="#FFFFFFFF" /> 
</shape>

Possible duplicate of [How to draw a circle inside a circle using Android xml shapes?](http://stackoverflow.com/questions/21613308/how-to-draw-a-circle-inside-a-circle-using-android-xml-shapes) — Hussein El Feky, Jan 18 '16 at 12:01

score 2 · Answer 1 · answered Jan 18 '16 at 12:04

I have tried following and it is working for me

<TextView
        android:id="@+id/textviewUnreadCount"
        android:layout_width="26dp"
        android:layout_height="26dp"
        android:layout_centerVertical="true"
        android:background="@drawable/rounded_textview"
        android:gravity="center_vertical|center_horizontal"
        android:padding="1dp"
        android:singleLine="true"
        android:text="1"
        android:textColor="#FFF"
        android:textSize="11sp" />

rounded_textview.xml

<solid android:color="#5477b1" />

<corners android:radius="13dp" />

score 1 · Answer 2 · answered Jan 18 '16 at 12:09

1

Try to create circular badge like this :

badge_circular.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="oval">
<solid android:color="#00000000"
    /> 
<padding android:left="10dp" android:top="5dp"
         android:right="10dp" android:bottom="5dp" />
<stroke android:color="@color/dark_gray" android:width="2dp" />

</shape>

answered Jan 18 '16 at 12:09

Kapil Rajput

10,723
7
40
59

This also gives me oval – User Jan 18 '16 at 12:21

score 0 · Answer 3 · answered May 15 '17 at 13:29

Ichigo I tried your code but didn't worked for me and I came up with this code:

put this below code in activity.xml

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

and create a new file named "item_count.xml" with below code:

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

This is easy and perfect code to try and play with

Show unread notification badge in Circle Android

3 Answers3