Create buttons in android with Gradient effect

Create Multiple all types of Gradient buttons in android app.

There are four types of gradient effect at the present time of animation stage. By changing the color combination and increase the color amount you can create certain multiple types of gradient effects on android buttons. So here is the complete step by step tutorial for Creating gradient effect on button in android.

android-project-download-code-button

How to set same gradient shade like Photoshop in android app.

All effects can be add by simply adding external xml file in layout folder and set them as background in button using android:background=”@layout/xml file name” attribute. So below multiple examples of gradient shades.

Linear Gradient light to dark effect screenshot:

Linear_Gradient_light_to_dark_effectLinear Gradient dark to light effect screenshot:

Linear_Gradient_dark_to_light_effect

Reflected Gradient effect screenshot:

Reflected_Gradient_effect

Radial Gradient effect screenshot:

Radial_Gradient_effect

How to Create buttons in android with Gradient effect shade.

Code for MainActivity.java file.

package com.android_examples.com.gradientbutton;
import android.app.Activity;
import android.os.Bundle;
public class MainActivity extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 }
}

Code for activity_main.xml layout file.

<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"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context="com.android_examples.com.gradientbutton.MainActivity" >

 // Linear Gradient light to dark effect Applied on This button.
 <Button
 android:id="@+id/button2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_above="@+id/button1"
 android:layout_alignLeft="@+id/button1"
 android:layout_marginBottom="16dp"
 android:background="@layout/linear_gradient_light_to_dark_effect"
 android:text="Gradient Effect Button 1"
 android:textColor="#f9fcfa" />

 //Reflected Gradient applied on this button
 <Button
 android:id="@+id/button3"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignLeft="@+id/button1"
 android:layout_alignTop="@+id/button1"
 android:layout_marginTop="58dp"
 android:background="@layout/reflected_gradient_effect"
 android:text="Gradient Effect Button 3"
 android:textColor="#f9fcfa" />

 // Linear Gradient dark to light effect Applied on This button.
 <Button
 android:id="@+id/button1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerHorizontal="true"
 android:layout_centerVertical="true"
 android:background="@layout/linear_gradient_dark_to_light_effect"
 android:text="Gradient Effect Button 2"
 android:textColor="#f9fcfa" />

 //Radial Gradient effect applied on this button.
 <Button
 android:id="@+id/button4"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignLeft="@+id/button3"
 android:layout_below="@+id/button3"
 android:layout_marginTop="15dp"
 android:background="@layout/radial_gradient_effect"
 android:text="Gradient Effect Button 4"
 android:textColor="#f9fcfa" />

</RelativeLayout>

Code for linear_gradient_light_to_dark_effect.xml file.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item>
 <shape android:shape="rectangle">
 <corners android:radius="10dp" />
 <gradient
 android:angle="270" 
 android:startColor="#a6d6fc"
 android:endColor="#0e6cb6"
 />
 </shape>
 
 </item>
</selector>

Code for linear_gradient_dark_to_light_effect.xml file.

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item>
 <shape android:shape="rectangle">
 <corners android:radius="10dp" />
 <gradient
 android:angle="270" 
 android:startColor="#0e6cb6"
 android:endColor="#a6d6fc"
 />
 </shape>
 
 </item>
</selector>

 

Code for reflected_gradient_effect.xml file.

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item>
 <shape>
 <corners android:radius="10dp" />
 <gradient
 android:startColor="#a6d6fc"
 android:centerColor="#0e6cb6"
 android:endColor="#a6d6fc"
 android:angle="270" />
 </shape>
 </item>
</selector>

Code for radial_gradient_effect.xml file.

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item>
 <shape>
 <corners android:radius="10dp" />
 <gradient
 
 android:type="radial"
 android:startColor="#a6d6fc"
 android:centerColor="#0e6cb6"
 android:endColor="#a6d6fc"
 android:angle="270"
 android:gradientRadius="180" />
 </shape>
 </item>
</selector>

Screenshot:

Create buttons in android with Gradient effect

Click Here To Download Create buttons in android with Gradient effect project.

Leave a Reply

Your email address will not be published. Required fields are marked *