如何用计数制作可绘制的圆形

Question

I really appreciate if someone can help me with using how to drawable circle view with count as like my below image.

I wrote some code for my requirement but it's showing rectangular shape but i want circular shape..

linear_layout_border(drawable file)

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="1dp"
        android:color="@color/colorPrimary" />
    <solid android:color="@color/colorLightSky" />

    <padding
        android:bottom="2dp"
        android:left="10dp"
        android:right="10dp"
        android:top="2dp" />

</shape>

xml:

       <FrameLayout
            android:id="@+id/group_attachment_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true">

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_margin="3dp"
                android:background="@drawable/linear_layout_border">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingLeft="5dp"
                    android:paddingRight="5dp"
                    android:src="@drawable/ic_group"
                    android:tint="@color/rosecolor" />

            </RelativeLayout>

            <TextView
                android:id="@+id/members_count_textview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="top|right"
                android:layout_marginBottom="3dp"
                android:background="@drawable/test_circle"
                android:gravity="center"
                android:minWidth="15dp"
                android:paddingLeft="2dp"
                android:paddingRight="2dp"
                android:text="0"
                android:textColor="#fff"
                android:textStyle="bold"
                android:visibility="visible" />

        </FrameLayout>

image:-

Answer 1

Try this it looks as you want

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <corners
        android:radius="10dip"/>
    <solid
        android:color="#2196F3" />
    <stroke
        android:width="2dip"
        android:color="#FFF" />
    <padding
        android:left="2dip"
        android:right="2dip"
        android:top="2dip"
        android:bottom="2dip" />
</shape>

Answer 2

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

   <solid 
       android:color="#666666"/>

   <size 
       android:width="120dp"
        android:height="120dp"/>
</shape>

Use this code to draw a circle and put it as background of your TextView and make its android:gravity="center"

Change height and width according to your need.

Answer 3

Try following drawable

<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item xmlns:android="http://schemas.android.com/apk/res/android">
            <shape>
                <solid android:color="#58050505" />
                <corners
                    android:topLeftRadius="3dp"
                    android:topRightRadius="3dp"
                    android:bottomLeftRadius="3dp"
                    android:bottomRightRadius="3dp"
                    />
            </shape>
        </item>
    </selector>

Answer 4

Use this for the TextView background

inside drawable folder

badge_background.xml

   <?xml version="1.0" encoding="utf-8"?>
   <shape xmlns:android="http://schemas.android.com/apk/res/android">
   <gradient
    android:endColor="@color/purple"
    android:startColor="@color/purple"></gradient>
   <corners android:radius="100dp"></corners>
   <stroke
    android:width="0.5dp"
    android:color="@color/white" />
   </shape>

The TextView

<TextView
                android:id="@+id/serial_no"
                android:layout_width="22dp"
                android:layout_height="22dp"
                android:layout_gravity="top|start"
                android:layout_marginTop="5dp"
                android:background="@drawable/badge_background"
                android:gravity="center|center_vertical"
                android:maxLines="1"
                android:text="1"
                android:textColor="@android:color/white"
                android:textSize="13sp"
                android:textStyle="bold" />