How to add a gradient to buttons in android through xml? How to add a gradient to buttons in android through xml? xml xml

How to add a gradient to buttons in android through xml?


Create a new xml file and put it in drawable and then add it to button as background

gradient.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle">    <!--  Gradient Bg for listrow -->   <gradient      android:startColor="#f1f1f2"      android:centerColor="#e7e7e8"      android:endColor="#cfcfcf"      android:angle="270" /></shape>

layout.xml

 <Button    android:id="@+id/Button01"    android:layout_width="wrap_content"    android:layout_height="fill_parent"    android:layout_weight="1"    android:background="@drawable/gradient"    android:text="Übernehmen" >


Try this :

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true" >        <shape>            <solid                android:color="#70c656" />            <stroke                android:width="1dp"                android:color="#53933f" />            <corners                android:radius="3dp" />            <padding                android:left="10dp"                android:top="10dp"                android:right="10dp"                android:bottom="10dp" />        </shape>    </item>    <item>        <shape>            <gradient                android:startColor="#70c656"                android:endColor="#53933f"                android:angle="270" />            <stroke                android:width="1dp"                android:color="#53933f" />            <corners                android:radius="4dp" />            <padding                android:left="10dp"                android:top="10dp"                android:right="10dp"                android:bottom="10dp" />        </shape>    </item></selector>


So here we go with the gradient. As above @Dusean Singh said. If you will use an angle 270 then your gradient will start from top to down : TOP -> Center -> bottom

<shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <gradient        android:startColor="#FF0000"        android:centerColor="#00FF00"        android:endColor="#0000FF"        android:angle="270" /></shape>

enter image description here

If you will use an angle 360 then your gradient will start from left to right : Left -> Center -> Right

<shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <!--  Gradient Bg for listrow -->    <gradient        android:startColor="#FF0000"        android:centerColor="#00FF00"        android:endColor="#0000FF"        android:angle="360" /></shape>

enter image description here

Here we go with the effect. and how to apply the same on button

<LinearLayout    android:id="@+id/design_bottom_sheet"    android:layout_alignParentBottom="true"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="horizontal"    android:weightSum="2">    <Button        android:drawableLeft="@drawable/ic_grid"        android:layout_width="match_parent"        android:text="Find"        android:background="@drawable/gradient_button"        android:textColor="@color/white"        android:textAllCaps="false"        android:layout_height="wrap_content"        android:layout_weight="1" />    <Button        android:drawableLeft="@drawable/ic_card"        android:layout_width="match_parent"        android:textColor="@color/white"        android:text="Match"        android:background="@drawable/gradient_button"        android:textAllCaps="false"        android:layout_height="wrap_content"        android:layout_weight="1" /></LinearLayout>

enter image description here