Custom drawable not showing properly when applied to a layout

Question

I designed a custom shape

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

    <item
        android:bottom="0dp"
        android:left="30dp"
        android:right="30dp"
        android:top="-30dp">
        <shape android:shape="rectangle">
            <size
                android:width="80dp"
                android:height="40dp" />
            <solid android:color="@color/colorPrimary" />
            <corners
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="0dp"
                android:topLeftRadius="10dp"
                android:topRightRadius="10dp" />
        </shape>

    </item>


    <item>
        <shape android:shape="rectangle">
            <size
                android:width="100dp"
                android:height="40dp" />
            <solid android:color="@color/colorPrimary" />
            <corners android:radius="0dp" />
        </shape>
    </item>


</layer-list>

Now when I try to apply this to a layout background Which is BottomSheet it doesn't have any effect and simply covers up the entire screen with blue background (It becomes a solid flat blue rectangle)

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/background_features"
android:padding="32dp"
app:behavior_hideable="false"
app:behavior_peekHeight="@dimen/partial_features_peek_height_50dp"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

How can I apply this custom background in its shape

Answer 1

You can try it

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

    <item
            android:bottom="0dp"
            android:left="30dp"
            android:right="30dp">
        <shape android:shape="rectangle">
            <size
                    android:width="80dp"
                    android:height="40dp"/>
            <solid android:color="@color/colorPrimary"/>
            <corners
                    android:bottomLeftRadius="0dp"
                    android:bottomRightRadius="0dp"
                    android:topLeftRadius="10dp"
                    android:topRightRadius="10dp"/>
        </shape>

    </item>

    <item
            android:top="30dp"
    >
        <shape android:shape="rectangle">
            <size
                    android:width="100dp"
                    android:height="40dp"/>
            <solid android:color="@color/colorPrimary"/>
            <corners android:radius="0dp"/>
        </shape>
    </item>

</layer-list>

Let me know the result if it is the layout which you want to achieve or not. Hope it help

Answer 2

use layer list

     <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Apply the margin value on the "item" element -->
    <!-- This example creates a 15dp visible margin around the dialog -->
    <item
        android:top="15dp"
        android:bottom="15dp"
        android:left="15dp"
        android:right="15dp">
        <shape
            android:shape="rectangle">

            <!-- Add attributes specific to your background (e.g. corner radius, colors, etc.) -->

            <!-- Set "padding" at minimum to match margin and add additional content padding as well, if desired -->
            <!-- This example creates 10dp of internal padding for content -->
            <padding
                android:top="25dp"
                android:bottom="25dp"
                android:left="25dp"
                android:right="25dp" />
        </shape>
    </item>
</layer-list>