使用图层列表的圆角自定义按钮设计

问题描述

我只是想创建一个按钮，如图所示。但我无法在顶角制作圆边。我们如何做到这一点..请帮忙。

<item>
    <shape android:shape="rectangle">
        <solid android:color="#A32CB386" />
        <corners android:radius="5dp"/>
    </shape>
</item>

<item android:bottom="5px">
    <shape android:shape="rectangle">

        <solid android:color="#36885B" />
    </shape>
</item>

解决方法

您的可绘制文件。假设bg_sign_in.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <layer-list>
        <item android:left="5dp" android:right="5dp" android:top="5dp">
            <shape>
                <corners android:radius="5dp" />
                <solid android:color="#0F4858" />
            </shape>
        </item>
        <item android:bottom="2dp" android:left="0dp" android:right="0dp">
            <shape>
                <gradient android:angle="270" android:endColor="#0F9D58" android:startColor="#0F9D58" />
                <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
                <corners android:radius="5dp" />
            </shape>
        </item>
    </layer-list>
</item>

在您的 xml 中应用以下内容

android:background="@drawable/bg_sign_in"

输出：

,

您可以使用以下内容：

  <com.google.android.material.button.MaterialButton
      android:background="@drawable/test"
      app:backgroundTint="@null"
      />

与：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <layer-list>
            <item>
                <!-- bottom shadow -->
                <shape>
                    <solid android:color="#2CB386"/>
                    <corners android:radius="5dp"/>
                </shape>
            </item>
            <item
                android:bottom="10px"
                >
                <shape>
                    <solid android:color="#36885B"/>
                    <corners
                        android:radius="5dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
    <item android:state_pressed="true">
        <layer-list>
            <!-- ....  -->
        </layer-list>
    </item>
</selector>