In android, Button is a user interface control that is used to perform an action whenever the user clicks or tap on it.
Generally, Buttons in android will contain a text or an icon or both and perform an action when the user touches it.
Following is the pictorial representation of using Buttons in android applications.
In android, we have a different type of buttons available to use based on our requirements, those are ImageButton, ToggleButton, RadioButton.
In android, we can create a Button control in two ways either in the XML layout file or create it in the Activity file programmatically.
Following is the sample way to define Button control in the XML layout file in the android application.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/addBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add" />
</LinearLayout>
If you observe above code snippet, here we defined Button control in xml layout file.
In android, we can create Button control programmatically in an activity file based on our requirements.
Following is the example of creating Button control dynamically in the activity file.
LinearLayout layout = (LinearLayout)findViewById(R.id.l_layout);
Button btn = new Button(this);
btn.setText("Test");
layout.addView(btn);
Generally, whenever the user clicks on a Button, the Button object will receives an on-click event.
In android, we can define a button click event in two ways either in the XML layout file or create it in the Activity file programmatically.
We can define click event handler for button by adding android:onClick attribute to the <Button> element in our XML layout file.
The value of android:onClick attribute must be the name of the method which we need to call in response to a click event and the Activity file which hosting XML layout must implement the corresponding method.
Following is the example of defining a button click event using android:onClick attribute in an XML layout file.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/addBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add"
android:onClick="addOperation"/>
</LinearLayout>
In Activity that hosts our XML layout file, we need to implement click event method like as shown below
/** Called when the user touches the button */
public void addOperation(View view) {
// Do something in response to the button click
}
In android, we can define the button click event programmatically in the Activity file rather than XML layout file.
To define button click programmatically, create View.OnClickListener object and assign it to the button by calling setOnClickListener(View.OnClickListener) like as shown below.
Button btnAdd = (Button)findViewById(R.id.addBtn);
btnAdd.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
This is how we can handle button click events in android applications based on our requirements.
Following are the some of commonly used attributes related to Button control in android applications.
Attribute | Description |
---|---|
android:id | It is used to uniquely identify the control |
android:gravity | It is used to specify how to align the text like left, right, center, top, etc. |
android:text | It is used to set the text. |
android:textColor | It is used to change the color of text. |
android:textSize | It is used to specify the size of the text. |
android:textStyle | It is used to change the style (bold, italic, bolditalic) of text. |
android:background | It is used to set the background color for button control. |
android:padding | It is used to set the padding from left, right, top and bottom. |
android:drawableBottom | It’s drawable to be drawn to the below of text. |
android:drawableRight | It’s drawable to be drawn to the right of text. |
android:drawableLeft | It’s drawable to be drawn to the left of the text. |
Following is the example of defining a one Button and two EditText controls in LinearLayout to get the data of EditText controls when click on Button in android application.
Create a new android application using android studio and give names as ButtonExample. In case if you are not aware of creating an app in android studio check this article Android Hello World App.
Now open an activity_main.xml file from \res\layout path and write the code like as shown below
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/fstTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="100dp"
android:layout_marginTop="150dp"
android:text="First Number" />
<EditText
android:id="@+id/firstNum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="100dp"
android:ems="10" />
<TextView
android:id="@+id/secTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Second Number"
android:layout_marginLeft="100dp" />
<EditText
android:id="@+id/secondNum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="100dp"
android:ems="10" />
<Button
android:id="@+id/addBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="100dp"
android:text="Add" />
</LinearLayout>
If you observe above code we created one Button, two TextView controls and two EditText controls in XML Layout file.
Once we are done with the creation of layout with required control, we need to load the XML layout resource from our activity onCreate() callback method, for that open main activity file MainActivity.java from \java\com.tutlane.buttonexample path and write the code like as shown below.
package com.tutlane.buttonexample;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final EditText firstNum = (EditText)findViewById(R.id.firstNum);
final EditText secNum = (EditText)findViewById(R.id.secondNum);
Button btnAdd = (Button)findViewById(R.id.addBtn);
btnAdd.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(firstNum.getText().toString().isEmpty() || secNum.getText().toString().isEmpty())
{
Toast.makeText(getApplicationContext(), "Please fill all the fields", Toast.LENGTH_SHORT).show();
}
else {
int num1 = Integer.parseInt(firstNum.getText().toString());
int num2 = Integer.parseInt(secNum.getText().toString());
Toast.makeText(getApplicationContext(), "SUM = " + (num1 + num2), Toast.LENGTH_SHORT).show();
}
}
});
}
}
If you observe above code we are calling our layout using setContentView method in the form of R.layout.layout_file_name in our activity file. Here our xml file name is activity_main.xml so we used file name activity_main and we are getting the values from two EditText controls on Button click and performing an addition operation.
Generally, during the launch of our activity, onCreate() callback method will be called by the android framework to get the required layout for an activity.
When we run above example using android virtual device (AVD) we will get a result like as shown below.
This is how we can use Button control in android applications to perform required operations on button tap or click based on our requirements.