Home > Software engineering >  How to make a button like this? [Kotlin]
How to make a button like this? [Kotlin]

Time:07-17

enter image description here

CodePudding user response:

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>
  • Related