Android: Gradient Button

In this tutorial we explain how to realize a custom gradient button

The main files are:

- MainActivity.java

public class MainActivity extends ActionBarActivity {
 @Override
 protected void onCreate(Bundle savedInstanceState) { 
  super.onCreate(savedInstanceState); 
  setContentView(R.layout.activity_main);
  Button button = (Button) findViewById(R.id.button1); 
  button.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    // TODO Auto-generated method stub
    Intent intent = new Intent(MainActivity.this,SecondActivity.class); 
    startActivity(intent);
    finish();
   } 
  });
 }
 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.main, menu);
  return true; 
 }
 @Override
 public boolean onOptionsItemSelected(MenuItem item) {

  int id = item.getItemId();
  if (id == R.id.action_settings) {
   return true; 
  }
 return super.onOptionsItemSelected(item); 
 }
} 

The style of the button is defined in  styles.xml and it is linked to:
- selector_rect.xml for the customization of the background:

<?xml version="1.0" encoding="utf-8"?> 
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@drawable/rect_button" />
<item android:state_focused="false" android:state_enabled="true" android:drawable="@drawable/rect_button"/>
<item android:state_focused="true" android:state_enabled="true" android:drawable="@drawable/rect_button"/>
<item android:state_focused="false" android:state_enabled="false" android:drawable="@drawable/rect_button"/>
<item android:state_focused="true" android:state_enabled="false" android:drawable="@drawable/rect_button" />
</selector> 

- button_text_colors.xml, for the color change of the button depending on the action:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="@color/ pressed_text" />
<item android:state_focused="false" android:state_enabled="true" android:color="@color/normal_text" />
<item android:state_focused="true" android:state_enabled="true" android:color="@color/focused_text" />
<item android:state_focused="false" android:state_enabled="false" android:color="@color/disabled_text" />
<item android:state_focused="true" android:state_enabled="false" 
android:color="@color/disabled_and_focused_text" />
</selector> 

In rect_button.xml, is defined the behavior of the button:

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

      android:shape="rectangle" >
      <gradient 
        android:angle="270"
        android:endColor="@color/pressed_end" 
        android:startColor="@color/pressed_start" />
      <corners android:radius="@dimen/corner_radius" /> 
      <stroke android:width="@dimen/stroke_width" android:color="@color/pressed_border" />
    </shape> 
  </item>

  <item android:state_focused="false" android:state_enabled="true"> 
    <shape android:shape="rectangle" >
      <gradient 
         android:angle="270"
         android:endColor="@color/normal_end" 
         android:startColor="@color/normal_start" />
      <corners android:radius="@dimen/corner_radius" /> 
      <stroke android:width="@dimen/stroke_width" android:color="@color/normal_border" />
     </shape> 
  </item>
  <item android:state_focused="true" android:state_enabled="true"> 
    <shape android:shape="rectangle" >
      <gradient 
         android:angle="270"
         android:endColor="@color/focused_end"  
         android:startColor="@color/focused_start" />

      <corners android:radius="@dimen/corner_radius" /> 
      <stroke android:width="@dimen/stroke_width" android:color="@color/focused_border" />
    </shape> 
  </item>
  <item android:state_focused="false" android:state_enabled="false"> 
    <shape android:shape="rectangle" >
      <gradient 
         android:angle="270"
         android:endColor="@color/disabled_end" 
         android:startColor="@color/disabled_start" />
      <corners android:radius="@dimen/corner_radius" /> 
      <stroke android:width="@dimen/stroke_width" android:color="@color/disabled_border" />
    </shape> 
  </item>
  <item android:state_focused="true" android:state_enabled="false"> 
    <shape android:shape="rectangle" >
      <gradient 
         android:angle="270"
         android:endColor="@color/disabled_and_focused_end"
         android:startColor="@color/ disabled_and_focused_start" />

      <corners android:radius="@dimen/corner_radius" />

      <stroke android:width="@dimen/stroke_width" android:color="@color/disabled_and_focused_border" />         </shape>
  </item> 
</selector> 

The layout of the activity that contains the button is defined in activity_main.xml:

<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:orientation="vertical" 
   android:background="@color/normal_end" 
   tools:context="com.example.buttons.MainActivity" >

   <Button
      android:id="@+id/button1" 
      style="@style/GradientRect" 
      android:layout_width="250dp" 
      android:layout_height="250dp" 
      android:layout_centerHorizontal="true" 
      android:layout_centerVertical="true" 
      android:ellipsize="none" 
      android:paddingTop="80dp" 
      android:text="Click on!" 
      android:textAppearance="?android:attr/textAppearanceLarge" 
      android:textColor="@color/normal_border"
      android:textSize="50sp" 
      android:textStyle="bold|italic" />
</RelativeLayout> 

To change the shape of the button, and make it for example rectangular, you can modify the value of corner_radius in dimens.xml (in this file is also possible to change the dimension of borders).

You can download the complete example from our repository: Download GradientButton.zip


The final result is the following: Before click - Clicked Button - Second Activity