如何制作这样的按钮？ [科特林]

Question

点击这里查看图片

我想做一个这样的按钮，我该怎么做？ 我想改变按钮阴影的颜色。

Answer 1

需要 layer-list 和 AppcompatButton -> 像这样

  <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btn"
        android:layout_width="293dp"
        android:layout_height="68dp"
        android:background="@drawable/yellow_btn"
        android:fontFamily="sans-serif-medium"
        android:gravity="center"
        android:text="Get Started"
        android:textColor="#353935"
      />

并为可绘制背景制作 xml 可绘制图层列表

        <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#DFCD03"/>
            <corners android:radius="60dp"/>
        </shape>
    </item>
    <item android:bottom="8dp">
        <shape>
            <solid android:color="#FFF273"/>
            <corners android:radius="60dp"/>
        </shape>
    </item>
</layer-list>

最终形状

Answer 2

试试这个 Create drawable name as button_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <layer-list>
            <item>
                <shape>
                    <solid android:color="#FFC107"/>
                    <corners android:radius="20dp"/>
                </shape>
            </item>

            <item
                android:bottom="10px"
                >
                <shape>
                    <padding android:bottom="5dp"/>
                    <gradient
                        android:startColor="#FFEB3B"
                        android:endColor="#FFEB3B"
                        />
                    <corners
                        android:radius="20dp"/>
                    <padding
                        android:left="10dp"
                        android:top="10dp"
                        android:right="5dp"
                        android:bottom="10dp"/>
                </shape>
            </item>
        </layer-list>
    </item>

    <item android:state_pressed="true">
        <layer-list>
            <item>
                <shape>
                    <solid android:color="#FFEB3B"/>
                    <corners android:radius="20dp"/>

                </shape>
            </item>

            <item android:bottom="5px">
                <shape>
                    <padding android:bottom="5dp"/>
                    <gradient
                        android:startColor="#FFC107"
                        android:endColor="#FFC107"
                       />
                    <corners
                        android:radius="20dp"/>
                    <padding
                        android:left="10dp"
                        android:top="10dp"
                        android:right="5dp"
                        android:bottom="10dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

在您的 xml 布局中为按钮/文本视图设置背景

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

    <Button
        android:layout_width="180dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/button_bg" // custom design 
        android:textAlignment="center"
        android:textStyle="bold"
        android:text="Get Started" />

</RelativeLayout>