I'm trying to create this shape in xml, how to make it?

Question

I've linked the image how to create it in android xml

The rounded corners rectangle and circle
The code is written for Getting the circle in rectangle. I need to create the rectangle with a circle inside. as shown in the image below.

the code I tried

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Larger blue circle in back -->
    <item>
        <shape
            android:shape="rectangle"
            >
            <solid android:color="#FFFFFF"
                />
            <corners
                android:topLeftRadius="30dp"
                android:topRightRadius="30dp"
                android:bottomRightRadius="30dp"
                android:bottomLeftRadius="30dp"

                />

            <size
                android:width="89dp"
                android:height="22dp"/>

            <stroke android:width="1dp"
                android:color="#fff" />



        </shape>
    </item>
    <!-- Smaller red circle in front -->
    <item>
        <shape android:shape="oval">
            <!-- transparent stroke = larger_circle_size - smaller_circle_size -->
            <stroke android:color="@android:color/transparent"
                android:width="5dp"/>
            <solid android:color="#f00"/>
            <size
                android:width="5dp"
                android:height="5dp"/>
            <padding
                android:bottom="0dp"
                android:left="10dp"
                android:right="40dp"
                android:top="0dp"
                />
        </shape>
    </item>
</layer-list>

Answer 1

circle shape can be like this:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#B41D1D" />
    <size
        android:width="48dp"
        android:height="48dp" />
</shape>

The other shape like this:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FAFAFA" />
    <corners android:radius="12dp" />
    <size
        android:width="120dp"
        android:height="40dp" />
    </shape>

And then

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
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="wrap_content"
android:background="#E4E4E4"
android:padding="8dp">

<View
    android:id="@+id/view_rectangle"
    android:layout_width="200dp"
    android:layout_height="56dp"
    android:background="@drawable/rectangle"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<View
    android:id="@+id/view_circle"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:layout_marginStart="4dp"
    android:background="@drawable/circle"
    app:layout_constraintBottom_toBottomOf="@+id/view_rectangle"
    app:layout_constraintStart_toStartOf="@+id/view_rectangle"
    app:layout_constraintTop_toTopOf="@+id/view_rectangle" />

 </androidx.constraintlayout.widget.ConstraintLayout>

If you are using API 23 or higher can be like this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Larger blue circle in back -->
<item
    android:width="220dp"
    android:height="56dp">
    <shape android:shape="rectangle">
        <solid android:color="#FFFFFF" />
        <corners android:radius="36dp" />
    </shape>
</item>
<!-- Smaller red circle in front -->
<item
    android:width="48dp"
    android:height="48dp"
    android:gravity="center|start"
    android:start="4dp">
    <shape android:shape="oval">
        <solid android:color="#f00" />
    </shape>
</item>
</layer-list>