Android tutorials: Android Button Example

In this tutorial you will learn:

How to add a button element to your application layout
How to change button's color
How to react to user pressing a button.

1. Adding button element to your application layout

To do this you need to modify your xml layout file (which is located in the res/layout directory). In this tutorial I'll show you how to add four different size and color buttons, but if you only want to add one button feel free to leave all the other ones out:)

activity_main.xml file:

 <LinearLayout 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:paddingBottom="@dimen/activity_vertical_margin"  
   android:paddingLeft="@dimen/activity_horizontal_margin"  
   android:paddingRight="@dimen/activity_horizontal_margin"  
   android:paddingTop="@dimen/activity_vertical_margin"  
   android:background="#696969"  
   tools:context=".MainActivity" >  
   <Button   
     android:id="@+id/yellow_button"  
     android:layout_width="fill_parent"  
     android:layout_height="60dp"  
     android:background="#FFD700"  
     android:text="@string/yellowButton"/>  
   <TableRow  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content" >  
    <Button   
     android:id="@+id/Blue_button"  
     android:layout_width="fill_parent"  
     android:layout_height="80dp"  
     android:layout_marginRight="5dp"  
     android:layout_marginTop="10dp"  
     android:background="#B0C4DE"  
     android:layout_weight="1"  
     android:text="@string/blueButton"/>  
    <Button   
     android:id="@+id/Green_button"  
     android:layout_width="fill_parent"  
     android:layout_height="80dp"  
     android:layout_marginLeft="5dp"  
     android:layout_marginTop="10dp"  
     android:layout_weight="1"  
     android:background="#90EE90"  
     android:text="@string/greenButton"/>    
   </TableRow>  
     <Button   
     android:id="@+id/pink_button"  
     android:layout_width="fill_parent"  
     android:layout_height="60dp"  
     android:layout_marginTop="10dp"  
     android:background="#F08080"  
     android:text="@string/pinkButton"/>  
 </LinearLayout>

I am using TableRow element here so it would be easier to position two buttons in one row) Using android:layout_weight we make our buttons equally big, so they would occupy equal amount of space in this row.

2. Changing color

It is super easy to change button's color, you simply need to specify the value of android:background accessory. To do that you need to use HEX color codes. There are plenty of websites where you can find codes for all the colors out there, I personally use this table http://www.w3schools.com/tags/ref_color_tryit.asp?color=LightGrey. As you can see in the activity_main.xml I have added android:background accessory to each of our buttons:

Yellow - android:background="#FFD700"
Blue - android:background="#B0C4DE"
Green - android:background="#90EE90"
Pink - android:background="#F08080"

3. Handling user input

To handle user's input we need to go to MainActivity.java file and add some stuff to it:) First thing we need to do is to initialize all our buttons and then set onClickListener to all of them:

 package buttonexample.tut.com;  
 import android.os.Bundle;  
 import android.app.Activity;  
 import android.content.Context;  
 import android.view.View;  
 import android.view.View.OnClickListener;  
 import android.widget.Button;  
 import android.widget.Toast;  
 public class MainActivity extends Activity {  
      private Button yellowB;  
      private Button greenB;  
      private Button blueB;  
      private Button pinkB;  
      final Context context = this;  
      @Override  
      protected void onCreate(Bundle savedInstanceState) {  
           super.onCreate(savedInstanceState);  
           setContentView(R.layout.activity_main);  
           yellowB = (Button) findViewById(R.id.yellow_button);  
           greenB = (Button) findViewById(R.id.Green_button);  
           blueB = (Button) findViewById(R.id.Blue_button);  
           pinkB = (Button) findViewById(R.id.pink_button);  
           onClickReactor();  
      }  
      private void onClickReactor() {  
           // TODO Auto-generated method stub  
           yellowB.setOnClickListener(new OnClickListener() {  
                @Override  
                public void onClick(View v) {  
                     Toast.makeText(context, "You pressed a yellow button.", Toast.LENGTH_SHORT).show();                      
                }  
           });  
           greenB.setOnClickListener(new OnClickListener() {  
                @Override  
                public void onClick(View v) {  
                     Toast.makeText(context, "You pressed a green button.", Toast.LENGTH_SHORT).show();  
                }  
           });  
           blueB.setOnClickListener(new OnClickListener() {  
                @Override  
                public void onClick(View v) {  
                     Toast.makeText(context, "You pressed a blue button.", Toast.LENGTH_SHORT).show();  
                }  
           });  
           pinkB.setOnClickListener(new OnClickListener() {  
                @Override  
                public void onClick(View v) {  
                     Toast.makeText(context, "You pressed a pink button.", Toast.LENGTH_SHORT).show();  
                }  
           });  
      }  
 }

You can place any other code in the onClick method, that depends on your application needs:)

DEMO

Android Button Example

Source code

Pages

Android Button Example