Adding Button to Android Application

Today let see , How to add a button to our android application. Button is a very essential control that will be used to trigger various events in android application based on user action. Now let see list of steps to add a simple button to our android application & associate an event.

If you wish to download sample source code click here.

Steps to follow to Add Button in Android Application :

Step 1 : 

       Create Hello World Android Project in eclipse, If you don't know how click here.

Step 2 :

       For this example, I have created project ButtonSampleApp inside my eclipse workspace.

Step 3 :

       Open the main activity xml(activity-mani.xml) file as shown below.

Step 4 :

       Now in this step I will explain how to add button to our application. We can add button to our application in two ways.

•  Drag and Drop button from the Graphical View.  (Explained in Steps 4a)
•  Directly add button control to Activity XML file. (Explained in Steps 4b)

Step 4a.1 : Drag and Drop from Graphical View

       Drag and drop a Button from palette as shown in below screen.

Step 4a.2 : 

        You can change the button property. Select the button and open the property perspective. Refer the below image to open property perspective.

Step 4a.3:

       In below image of button property, where the Android button properties can be modified as we wish (like Button Text, Style, Hint, Colour,  Content Description etc.).

     
Step 4b.1 : Add the button using  XML file:

       Add <Button /> control in the xml file.

Step 4b.2 :

       Add Unique id for this button as you wish, this ID is essential to relate to Android Layout.We also add layout_width, layout_height to button control.

       <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"/>

Step 4b.3 :

       Now we are going to add the label to the button using android:text. This Label will be seen in your device/emulator.

        <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Button" />

Step 4b.4 :

      In this example, I am adding button below to my textview and also centerHorizontal is true.

        <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/textView1"

        android:layout_centerHorizontal="true"        

        android:text="Button" />

Step 6 : 

       After adding the button in  any of the above methods , Final Updated Activity xml file will look as below.

<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:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity" >

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/hello_world" />

    <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/textView1"

        android:layout_centerHorizontal="true"

        android:text="Button" />

</RelativeLayout>

Step 7 :

       Until now, we have added the button to our application. But if you run on the application in the Emulator/Device, we can just see the button appearing on the screen. On click of the button , nothing will happen, Since there is no event associated to the Button.

      In Upcoming steps I will explain how to add event to the button we have added.

Step 8 :

      In this sample, I am going to add the onClick event to the button. On click of the button we will  display an welcome message using Toast Widget.

Step 9 :

      To change the text/label of the button from "Button" to "Welcome".

<Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/textView1"

        android:layout_centerHorizontal="true"

        android:text="Welcome" />

Step 10 :

      Adding the onClick event to the button. On click of the button I am calling the welcomeMsg method in the Mani Activity class.

<Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/textView1"

        android:layout_centerHorizontal="true"

        android:onClick="welcomeMsg"

        android:text="Welcome" />

Step 11 :

     Added a welcomeMsg method to the Main Activity class.

 public void welcomeMsg(View v){

           //Insert your code here

}

Step 12 :

       Now, Adding welcome message to the method.

public void welcomeMsg(View v){

       Toast.makeText(this.getApplicationContext(), "Welcome to android application development", Toast.LENGTH_LONG).show();

}

Step 13 :

       Now run the application in the Emulator/Device. On click of the button you will get welcome message. 

Step 14 :

       Now, You learned how to add a button to your android application and associate event to it.