CODEWITHSUNDEEP
androidandroid-drawable
User
User

Reputation: 1236

Show unread notification badge in Circle Android

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>

Upvotes: 1

Views: 3829

Answers (3)

Seetpal singh
Seetpal singh

Reputation: 3847

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

Upvotes: 0

Kapil Rajput
Kapil Rajput

Reputation: 11555

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>

Upvotes: 2

Ichigo Kurosaki
Ichigo Kurosaki

Reputation: 3843

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

Upvotes: 2

Related Questions