Create Custom Count badge in Android Kotlin

Question

Hey I am new in custom thing and I want to create custom badge. It looks like circle in single digit and if more than two digit I need to curve little bit like rectangle till three digit. I am adding image for example. How it will look like.

Single Digit Image

Two Digit Image

Three Digit Image

Does any one know how to make like this?

Added Some Code

<RelativeLayout
        android:id="@+id/badgeView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="@drawable/count_badge_circle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/time"
        tools:ignore="ContentDescription">

        <TextView
            android:id="@+id/count"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true" />

    </RelativeLayout>

badge_rectangle

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="30dp" />
    <solid android:color="@color/aqua" />
    <padding
        android:bottom="3dp"
        android:left="7dp"
        android:right="7dp"
        android:top="3dp" />
</shape>

badge_circle

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="2"
    android:useLevel="false">

    <size
        android:width="20dp"
        android:height="20dp" />

    <solid android:color="@color/aqua" />

    <padding
        android:bottom="5dp"
        android:left="7dp"
        android:right="7dp"
        android:top="5dp" />
</shape>

code from activity

if (count >= 10) {
    binding.badgeView.background =
        ContextCompat.getDrawable(binding.root.context, R.drawable.count_badge_rectangle)
} else {
    binding.badgeView.background =
        ContextCompat.getDrawable(binding.root.context, R.drawable.count_badge_circle)
}
binding.count.text = count.toString()

After changing code to @Zain recommendation code and changed text to 14sp it doesn't look good

count_badge_circle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/aqua" />
    <stroke
        android:width="2dp"
        android:color="@color/white" />
    <corners
        android:bottomLeftRadius="120dp"
        android:bottomRightRadius="120dp"
        android:topLeftRadius="120dp"
        android:topRightRadius="120dp" />
</shape>

xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#EAFCF7"
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/count_badge_circle"
        android:gravity="center"
        android:minWidth="40dp"
        android:padding="8dp"
        android:textColor="#fff"
        android:textSize="14sp"
        tools:text="2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:background="@drawable/count_badge_circle"
        android:gravity="center"
        android:minWidth="40dp"
        android:padding="8dp"
        android:textColor="#fff"
        android:textSize="14sp"
        tools:text="22" />
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:background="@drawable/count_badge_circle"
        android:gravity="center"
        android:minWidth="40dp"
        android:padding="8dp"
        android:textColor="#fff"
        android:textSize="18sp"
        tools:text="223" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:background="@drawable/count_badge_circle"
        android:gravity="center"
        android:minWidth="40dp"
        android:padding="8dp"
        android:textColor="#fff"
        android:textSize="18sp"
        tools:text="2238" />

</LinearLayout>

output

I want this size your size is too big

What have you tried so far? – DevWithZachary Oct 04 '21 at 14:56 — DevWithZachary, Oct 04 '21 at 14:56
@DevWithZachary i added some tried code – Kotlin Learner Oct 04 '21 at 15:05 — Kotlin Learner, Oct 04 '21 at 15:05

Zain · Accepted Answer · 2021-10-05T15:05:55.077

Changes you need to make in your drawable:

Add a strike for the outer white circle
Use corners to make the rectangle as a circle when the sides are equal

Applying this:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#27D1C9" />
    <stroke
        android:width="2dp"
        android:color="#fff" />
    <corners
        android:bottomLeftRadius="120dp"
        android:bottomRightRadius="120dp"
        android:topLeftRadius="120dp"
        android:topRightRadius="120dp" />

</shape>

Demo:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent" 
    android:layout_height="match_parent"
    android:background="#EAFCF7"
    android:gravity="center">

  
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:background="@drawable/rounded_rect2"
        android:gravity="center"
        android:minWidth="24dp"
        android:padding="2dp"
        android:text="2"
        android:textColor="#fff"
        android:textSize="14sp" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:background="@drawable/rounded_rect2"
        android:gravity="center"
        android:minWidth="24dp"
        android:padding="2dp"
        android:text="22"
        android:textColor="#fff"
        android:textSize="14sp" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:background="@drawable/rounded_rect2"
        android:gravity="center"
        android:minWidth="24dp"
        android:padding="3dp"
        android:text="223"
        android:textColor="#fff"
        android:textSize="14sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:background="@drawable/rounded_rect2"
        android:gravity="center"
        android:minWidth="24dp"
        android:padding="4dp"
        android:text="2238"
        android:textColor="#fff"
        android:textSize="14sp" />

</LinearLayout>

thanks for your answer. You used textsize as 18sp. If i used 14sp it's not look good. So what do i need to change according to that. — Kotlin Learner, Oct 04 '21 at 16:18
@vivekmodi This requires to manipulate the `android:minWidth`, because the shape is already a rectangle, we need to adjust it to a circle with the minimum amount of text entered (which is a single letter); when you decrease the text size, you also to decrease the minWidth... for 14sp textSize, you can use `android:minWidth="35dp"` — Zain, Oct 04 '21 at 16:43
also i need to reduce the size of circle it looks too big. How can i achieve that also — Kotlin Learner, Oct 04 '21 at 16:47
Not the circle is the big, because it surrounds the text; what makes it big is the contents of the text that includes padding.. I set the padding to 8dp.. You can manipulate that as well — Zain, Oct 04 '21 at 16:50
@vivekmodi I have updated the answer for your desired sizing .. Hopefully it's working now — Zain, Oct 05 '21 at 15:06

Create Custom Count badge in Android Kotlin

1 Answers1