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>

Please show us what you've tried, and explain which part is troubling you. Don't say "all of it", because a simple red circle should be doable for you, assuming you did at least *some* research. — Andreas, Feb 05 '20 at 02:41
Does this answer your question? [How to define a circle shape in an Android xml drawable file?](https://stackoverflow.com/questions/3185103/how-to-define-a-circle-shape-in-an-android-xml-drawable-file) — Andreas, Feb 05 '20 at 02:45

Azhagthott · Accepted Answer · 2020-02-20T02:39:22.460

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>

I would like to have this code in XML drawable resource file — Anukul Narkhede, Feb 05 '20 at 04:21
I like more the last option but is for API23 or higher, check this https://developer.android.com/guide/topics/resources/drawable-resource#LayerList — Azhagthott, Feb 05 '20 at 04:29
If you want to create something more complex you should try with the first option, or maybe with a Custom View, this is a very interesting topic — Azhagthott, Feb 11 '20 at 02:29

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

1 Answers1