自定义绘图在应用于布局时无法正确显示

Question

我设计了一个自定义形状

<?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>

现在，当我尝试将其应用于BottomSheet版面背景时，它没有任何效果，只是用蓝色背景覆盖了整个屏幕（它变成了一个实心的扁平蓝色矩形）

<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">

如何在形状中应用此自定义背景

Answer 1

您可以尝试

<?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>

让我知道结果是否是您想要实现的布局。希望对您有帮助

Answer 2

使用图层列表

     <?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>