Create Custom Count badge in Android Kotlin-CodePudding

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

CodePudding user response：

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>