How to create round corner buttons with gradient background?

Issue

How to create buttons like this:

Creating round corner buttons or having a gradient background buttons is one things but having both of them together is another thing! I know its possible as I have seen these kind of buttons in few apps but could not able to create it.

Any help ? !!!

code for button_round_radius_test:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">



    <corners
        android:radius="20dp" />

    <solid
        android:color="@android:color/transparent" />

    <stroke
        android:color="#FFFFFF"
        android:width="2dp" />


    <size
        android:width="165dp"
        android:height="40dp" />

</shape>

code for gradient_bg:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:angle="90"
        android:endColor="#ff009f"
        android:startColor="#1a2b5d"
        android:type="linear" />

</shape>

Usage:

<ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="#TestText"
                    android:padding="8dp"
                    android:layout_marginTop="5dp"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="5dp"
                    android:layout_marginBottom="5dp"
                    android:textColor="@color/font_black"
                    android:src="@drawable/gradient_bg"
                    android:background="@drawable/button_round_radius_test"
                    />

Solution

Try this

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="#ff009f"
                android:startColor="#1a2b5d"
                android:type="linear" />
            <stroke android:color="@android:color/transparent" android:width="2dp" />
            <corners android:radius="25dp"/>
        </shape>
    </item>
</selector>

Use like this

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">


    <Button
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="#TestText"
        android:padding="8dp"
        android:gravity="center"
        android:textColor="#FFFFFF"
        android:textStyle="bold"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginBottom="5dp"
        android:background="@drawable/test"
        />

</LinearLayout>

OUTPUT

Answered By - AskNilesh