How to set union shape with dynamic size and spect ratio in android drawable

Issue

I want to make a shape like in the below image. Size in the graphic is as below

• The circle/Oval size is 30px
• The rounded rectangle height is 20px and width is 65px
• The rectangle start is set to the circle center so in total graphic size will be 80px.

However, for drawable I need responsive size so I can use it for any size of the view.

I am able to create a shape by overlapping that gives a similar illusion. I am not sure if types of boolean (graphics) is possible in android or not.

Drawable XML

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

    <item>
        <shape android:shape="rectangle">
            <size
                android:width="75dp"
                android:height="30dp" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>

    <item android:right="60dp">
        <shape android:shape="oval">
            <solid android:color="@color/colorPrimary" />
            <size
                android:width="30dp"
                android:height="30dp" />
        </shape>
    </item>

    <item android:left="15dp" android:top="10dp" android:bottom="10dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
            <size
                android:width="66dp"
                android:height="20dp" />
            <corners
                android:bottomRightRadius="20dp"
                android:topRightRadius="20dp" />
        </shape>
    </item>

</layer-list>

The above XML producing shape as in below screenshot

When I set the shape to View it output as in below screenshot

Layout XML

<View
    android:layout_width="80dp"
    android:layout_height="30dp"
    android:background="@drawable/shape_flask"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Output

As you can see, even defining size in drawable and view shape doesn't stick to the size aspect ration. I am sure it is me who is doing anything wrong.

Question: How can I make the drawable shape that works on any size of view keeping aspect ration the same as it is in the Graphic reference. And how to add Drop Shadow to it.

EDITED

I have fixed some size issue but the shape still has a problem. For better visualization, I set different colors for both shapes.

Drawable XML

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

    <item>
        <shape android:shape="rectangle">
            <size
                android:width="80dp"
                android:height="30dp" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>

    <item android:right="60dp">
        <shape android:shape="oval">
            <solid android:color="@color/colorPrimary" />
            <size
                android:width="30dp"
                android:height="30dp" />
        </shape>
    </item>

    <item android:left="15dp" android:top="5dp" android:bottom="5dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorAccent" />
            <size
                android:width="66dp"
                android:height="20dp" />
            <corners
                android:bottomRightRadius="20dp"
                android:topRightRadius="20dp" />
        </shape>
    </item>

</layer-list>

But as you can see in the below screenshot of the view it doesn't output the same size and position. However, the View code is the same.

Solution

How about splitting drawables like this?

layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <View
        android:id="@+id/oval"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_oval" />

    <TextView
        android:id="@+id/rec"
        android:layout_width="65dp"
        android:layout_height="20dp"
        android:layout_centerVertical="true"
        android:layout_toEndOf="@+id/oval"
        android:layout_toRightOf="@+id/oval"
        android:background="@drawable/shape_rec"
        android:layout_marginStart="-15dp"
        android:layout_marginLeft="-15dp" />
</RelativeLayout>

shape_oval

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

shape_rec

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorAccent" />
    <size
        android:width="66dp"
        android:height="20dp" />
    <corners
        android:bottomRightRadius="20dp"
        android:topRightRadius="20dp" />
</shape>

Preview

Answered By - Genesis