Pagine

Thursday, 25 September 2014

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






No comments:

Post a Comment