Android Button Control

Introduction

This article demonstrates how to create and use a button control in Android. This article will also describe how to add the different styles to a button using XML style. This article starts with an introduction of the button tag in XML. In Android, all the UI controls need two required attributes, and they are the width and the height. We need to specify the width and the height for each and every control in Android. Afterwards, it demonstrates how to add the listeners for a button, using a click.

Creating a Button

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

The width and the height attributes of the button element represents the width and the height of a button. The text attribute is used to show the contents of the button. Please see XML code, given below, to see the button with the text hello.

<Button
android:layout_width="wrap_content"
android:text="Hello"
android:layout_height="wrap_content" />

The width and the height will accept two different values, that are as follows.

wrap_content

This means the width/height of the button will depend on the content of the button. Please see the output, below, to understand, how this will work.



The second value that can be accepted by a button for the width/height is: 



match_parent

This will occupy all the space that its parent has as the width/ height, depending upon what you have provided. Please see the output in which I have given the width as match_parent.

If I had given height as match_parent, the height will be the same as its parents height.

Adding Style to a Button

Now, we can add some styles to the button, using style.xml file. Thus, we can reuse the same style for the different buttons in the same application. For this, declare a style that has the parent android.widget.button, as shown below:

<style name="myButtonStyle" parent="android:Widget.Button">
</style>

Here, myButtonStyle is the name of this particular style and with this name, we can reuse the style in the different places of the Application. All the properties can be defined in the style but add only the things to reuse them properly. Here, I am going to add the textcolor, textsize, textstyle, padding, margin etc. Thus, I can use the same style for all the buttons in the same Application. Please see the style, given below:

<style name="myButtonStyle" parent="android:Widget.Button">
<item name="android:textColor">#ffffff</item>
<item name="android:textSize">15sp</item>
<item name="android:background">#1C4DB1</item>
<item name="android:textStyle">bold</item>
<item name="android:gravity">center_vertical|center_horizontal</item>
<item name="android:padding">10dp</item>
<item name="android:layout_margin">20dp</item>
</style>

Now, we need to set this style to our button and for it, we are using the style attribute and the usage is shown below: 

<Button
android:layout_width="match_parent"
android:text="Hello"
style="@style/myButtonStyle"
android:layout_height="wrap_content" />

Now, the output will be:



Adding a Button Click Event

By using onClick attribute, we can declare the button click event using XML and we need to define this method in a Java file, which needs to be done on the click event of the button.

android:onClick="myButtonClick"

Now, I need to define the method in Java file. To do some task on the button click, refer to the code given below:

public void myButtonClick(View view) {
    Log.e("Button ", "clicked");
}

The same thing can be achieved, using Java code only. For it, we need to bind our button in Java class. For it, we need to set the Id attribute for the button in the XML file. The Id attribute is used to identify each control in the XML file and with this Id attribute, we can bind the controls easily to Java class file. See how the XML will look  after we have added an Id attribute.

<Button
android:layout_width="match_parent"
android:id="@+id/button"
android:text="Hello"
style="@style/myButtonStyle"
android:layout_height="wrap_content" />

Now, the Id is the button. With this Id, we need to bind this control on to Java class file. See the code, given below:

Button button = (Button) findViewById(R.id.button);

Now, we can set all the properties and attributes to this button by using this Java object. Now, we can add the click event for the button by setting setOnClickListner for this Java object. Please see the code, given below: 

button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Log.e("Button", "Clicked");
    }
});

Summary

In this article, I discussed how we can create a button in Android. We also saw how we can add the different styles to a button. In the end of this article, we saw how to set the click events for a button from XML and Java.