Android Button Example

This tutorial explains Android Button Example like Normal Button, Image Button, Button with Image and text and different button layouts. In the sample below we are also handling the button click event by adding a click listener on the button.

P.S This project is developed in Eclipse 3.7, and tested with Android 4.0.4.

1. Adding Different  Button to Layout
Open “res/layout/main.xml” file, and paste the below code


android:id="@+id/root"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="@+id/belowButtons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >

<Button
android:id="@+id/buttonbefore"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="back" />

<Button
android:id="@+id/buttonnext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="Next" />

<LinearLayout
android:id="@+id/topButtons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:orientation="horizontal" >

<Button
android:id="@+id/buttonTopLeft"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="Top Left" />

<Button
android:id="@+id/buttonTopRight"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="Top Right" />

<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/topButtons"
android:fillViewport="true" >

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="3px"
android:orientation="vertical" >

<Button
android:id="@+id/fullWidthButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="6.43"
android:text="Full Width Btn" />

<Button
android:id="@+id/buttonbefore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="6.43"
android:text="Left Small Btn" />

<Button
android:id="@+id/buttonbefore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="6.43"
android:text="Center Small Btn" />

<Button
android:id="@+id/buttonbefore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="6.43"
android:text="Right Small Btn" />

<Button
android:id="@+id/imageButtonSelector"
android:layout_width="270dp"
android:layout_height="49dp"
android:layout_gravity="center"
android:background="@drawable/passed_normal_btn" />

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/download_btn"
android:text="Drawable left" />

 

2. Loading the Layout from Code

The main.xml file contains different layout buttons. We can load the layout using setContentView(R.layout.main).

To Attach a click listener to the button, we need to get the button object reference from the layout. We can get the button object associated with the xml from the unique id privided in the main.xml.

File : MyAndroidAppActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;
public class ButtonSampleActivity extends Activity {
/**
* @see android.app.Activity#onCreate(Bundle)
*/
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.main;

Button fullWidthButton = (Button) findViewById(R.id.fullWidthButton);
fullWidthButton.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "Full Width Button Clicked! ", Toast.LENGTH_LONG).show();
}
});

}
}


3. Demo

Run the application. and it results different buttons with layouts

 

A blogger, bit of a tech freak and a software developer. Around 7+ years of experience in design, development and maintenance of Mobile applications. Follow him on Twitter, Google Plus or like our official Facebook page

  • http://www.androidinterview.com/ nilesh kumar

    very good article, I was looking just that Thanks.

  • Pankaj Kapoor

    Pretty! This was a really wonderful post. Thank you for providing this information.

  • Mahendra

    Nice example with different layouts.