How to make a button like this? [Kotlin]

Question

Click here to see the image

I want to make a button like this how can I do it? I want to change the color of shadow of the button.

Answer 1

need layer-list and AppcompatButton -> like this

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

and for drawable background make xml drawable layer-list

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

final shape

Answer 2

Try this 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>

in your xml layout set background for button/textview

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