×
×

Spread the love

In this android Button example tutorial you will learn what is a Button, how to create it and different types of attributes for Button with examples in android studio.

Android Button

In android a Button is a user interface control which can be clicked or tapped to perform some action.There are different types of buttons available in android based on user requirement.They are

  • RadioButton
  • ToggleButton
  • ImageButton
  • FloatingActionButton

Button can have text or image/icon or both on them and we can use them according to the context where we are using the button.

Check this android UI controls tutorial to know more about UI controls.

Creating a Button in Android

Creating a Button in android can be done in two ways. One is by declaring it inside a layout(XML) file and the second one is by creating an object of it in JAVA.

Creating Button in XML(layout)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/white"
    android:id="@+id/textlaout"
    android:padding="20dp">
   <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        />

</LinearLayout>

Creating Button in JAVA(programatically)

package com.codesinsider.androidui;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.LinearLayout;
import android.widget.TextView;

public class LayoutExample extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.linear_laout);

        Button login = new Button(this);
        //setting width and height of textview
        login.setLayoutParams(new LinearLayout.LayoutParams(200, 50));
        LinearLayout layout = new LinearLayout(this);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams
                (LinearLayout.LayoutParams.MATCH_PARENT,  LinearLayout.LayoutParams.MATCH_PARENT);
        layout.setLayoutParams(params);
        layout.addView(login);
    }
}

Basic Android Button

android button

Android Button Attributes

id : The id is the most common attribute used to identify the View or ViewGroup created in xml file in java.

Example code snippet for setting an id to a Button in XML.

<Button
        android:id="@+id/login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        />

gravity : gravity attribute is used to position the text of the Button to right, left, top, bottom, center_vertical, center_horizontal etc.By default the gravity for a button is Center.

Example code snippet for setting gravity of the Button to start(left) in XML.

<Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:gravity="start"
        />

Example code snippet for setting gravity of the Button in JAVA.

Button login = findViewById(R.id.login);
login.setGravity(Gravity.START);

Output of the above code snippets.

android button gravity

layout_gravity : layout gravity is similar to gravity but positions the entire Button instead of text.

Example code snippet for Button with layout_gravity as center_horizontal in XML.

<Button
        android:id="@+id/button"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="Button"
        android:gravity="start"
        android:layout_gravity="center_horizontal"
        />

Output of the above code snippets.

android button layout gravity

text : Text attribute is used to set the text of a Button.
Example code snippet for setting text of a Button in XML.

<Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:gravity="center"
        android:layout_gravity="center_horizontal"
        />

Example code snippet for setting text of a Button in JAVA.

Button login = findViewById(R.id.login);
login.setText("Login");

Output of the above code snippets.

android button text

textColor : textColor attribute is used to set the text color of the button.The value for textColor can be “#argb”, “#rgb”, “#rrggbb”, or “#aarrggbb”.

Example code snippet for setting text color of a Button in XML.

<Button
        android:id="@+id/login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:gravity="center"
        android:textColor="@color/white"
        />

Example code snippet for setting text color of Button in JAVA.

Button login = findViewById(R.id.login);
login.setText("Login");
login.setTextColor(Color.WHITE);
login.setTextColor(getResources().getColor(R.color.white));

Output of the above code snippets.

android button text color

Note: The standard way of using strings, colors and dimentions in android was explained clearly in using strings, colors, dimens in UI controls section of this Android UI Controls tutorial.

textSize : textSize attribute is used to set the text size of a Button whose value can be either in sp(scale-independent pixels) or dp(density independent pixels) like for example 20sp or 20dp

Example code snippet for setting textSize of a Button in XML.

<Button
        android:id="@+id/login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:gravity="center"
        android:textColor="@color/white"
        android:textSize="20dp"
        />

Example code snippet for setting textSize of Button in JAVA.

Button login = findViewById(R.id.login);
login.setText("Login");
login.setTextSize(20);

Output of the above code snippets.

android button textsize

textStyle : textStyle attribute is used to style the text of the Button.There are three values for a textStyle attribute like normal, bold, italic.By default it is normal.If we want to use more than one value at a time we can use “|” operator. like bold|italic.

Example code snippet for setting text style of a Button in XML.

<Button
        android:id="@+id/login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:gravity="center"
        android:textColor="@color/white"
        android:textStyle="bold|italic"
        android:textSize="20dp"
        />

Output of the above code snippets.

android button textstyle

fontFamily : fontFamily attribute is used to set the font family like roboto, open sans etc to the button.

Example code snippet for setting fontFamily of a Button text in XML.

<Button
        android:id="@+id/login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:gravity="center"
        android:textColor="@color/white"
        android:textStyle="bold|italic"
        android:textSize="20dp"
        android:fontFamily="monospace"
        />

Output of the above code snippets.

android button font family

background : background attribute is common for all the layouts and UI controls which is used to set background.Background can either be a color image or a drawable resource file.

Example code snippet for setting background to button in XML.

<Button
        android:id="@+id/login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:gravity="center"
        android:textColor="@color/white"
        android:textSize="20dp"
        android:fontFamily="monospace"
        android:background="@color/green"
        />

Example code snippet for setting background to Button in JAVA.

Button login = findViewById(R.id.login);
        login.setText("Login");
        login.setTextSize(20);
        login.setBackgroundColor(Color.GREEN);
        login.setBackgroundResource(R.color.green);//setting background color from colors.xml

Output of the above code snippets.

android button background color

We can also use a drawable resource for Button as background.A drawable resource is nothing but an image or a drawable resource file(drawable type xml file).All the images that we use locally in android app should be saved at app>res>drawable, and to access the files in drawable directory we need to define like android:background=”@drawable/filename“.Lets see the example code snippets below.

Example code snippet for setting background resource for Button in XML.

<Button
        android:id="@+id/login"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:text="Button"
        android:gravity="center"
        android:textColor="@color/white"
        android:textSize="20dp"
        android:fontFamily="monospace"
        android:background="@drawable/back"
        />

Example code snippet for setting background resource for a Button in JAVA.

Button login = findViewById(R.id.login);
login.setText("Login");
login.setTextSize(20);
login.setBackgroundResource(R.drawable.back);//back is file name of image present in drawable folder.

Output of the above code snippets.

android button background resource

typeface :typeface attribute is used to set the typeface of the Button text among the four built in typefaces monospace, serif, sans, normal.
.To use custom font as typeface create a folder named assets in src>main and download .ttf file of your desired font like for example roboto.ttf and save it in the assets folder we created above.Your project will look like below

You can find .ttf files at Fontsquerrel, Google Fonts etc.

custom font project structure

Example code snippet for setting typeface for Button in XML.

<Button
        android:id="@+id/login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:gravity="center"
        android:textColor="@color/white"
        android:textSize="20dp"
        android:background="@color/green"
        android:typeface="monospace"/>

Example code snippet for setting custom font as typeface for Button text in JAVA

Button login = findViewById(R.id.login);
login.setText("Login");
login.setTypeface(Typeface.createFromAsset(getAssets(),"Calibri Bold.TTF"));
login.setTextSize(20);

Output of the above code snippets.

android button typeface

drawable : drawable attribute is used to set icons/images to any of the four sides of the text like left, right, top, bottom.It has four types like
drawable_Start : sets the icon/image to left of the text.
drawable_End : sets the icon/image to right of the text.
drawable_Top : sets the icon/image to the top of the text.
drawable_Bottom : sets the icon/image to bottom of the text.

There is also another attribute called drawable_padding which is used to set padding for the drawable icon/image.Eg drawable_padding=”10dp”.This is used to give space between the drawable icon and button text.

Example code snippet for setting drawable to Button in XML.

<Button
        android:id="@+id/login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:gravity="start|center_vertical"
        android:textColor="@color/white"
        android:textSize="20dp"
        android:background="@color/green"
        android:drawableStart="@drawable/user"
        android:drawablePadding="20dp"/>

Output of the above code snippets.

android button drawable

That’s all about the most commonly used attributes of a Button.To know the attributes that are common for all the elements refer the layout attributes section of this post about android layouts.

Click Listener for Button

We can perform some action when the Button is clicked by the user.This can be done in two ways.
One way is setting a method to onClick attribute in XML and the other is to invoke the onClickListener method on Button object.

Click Listener for Button in XML

Example code snippet for setting click listener for Button in XML.

<Button
        android:id="@+id/login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:gravity="center"
        android:textColor="@color/white"
        android:textSize="20dp"
        android:fontFamily="monospace"
        android:background="@color/green"
        android:onClick="testMethod"
        />

JAVA Code snippet to be included in Activity.java to trigger click listener using the above XML code.

public void testMethod()
{
    //Do what ever ou want when the button is clicked.
}

Click Listener for Button in JAVA

Example code snippet for triggering click event on Button only in JAVA without using XML.

Button login = findViewById(R.id.login);
login.setText("Login");
login.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        //do whatever you want to do when the button is clicked here
    }
});

Example for Click Listener of Android Button

Lets see an example for click listener where we display a toast message when we click on the button.

Code to be included in XML.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/white"
    android:gravity="center"
    android:id="@+id/textlaout"
    android:padding="20dp">


    <Button
        android:id="@+id/login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:textColor="@color/white"
        android:textSize="20dp"
        android:background="@color/green"
        />

</LinearLayout>

Code to be included in JAVA.

package androidlaouts.codesinsider.com.androidlayouts;

import android.graphics.Color;
import android.graphics.Typeface;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Html;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

public class LayoutExample extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.android_ui);

        Button login = findViewById(R.id.login);
        login.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(LayoutExample.this, "You clicked the button", Toast.LENGTH_LONG).show();
            }
        });

    }
}

From the above code snippet we can observe that when the user clicks the button, the OnClickListener() listens the click on the button object and the onClick(View v) inside the OnClickListener() method is executed and performs the operations defined inside it.We defined to display a toast message inside the onClick() method so it displays a message like below.

Output of the above code snippets.

android button click listener example

This comes to an end of android Button example tutorial with all the attributes explained in detail with examples.We will discuss about other UI controls in next posts.

Do like and share if you find this post helpful.Thank you!!


Spread the love

AUTHOR

Naresh Pradeep

Hey there! I am the founder of CodesInsider and android developer.I love to code and build apps.


Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *