Android Button Widget Tutorial With Example

In this post, we will learn about Android Button widget. We will also see different attributes that are used to customise this widget.

Output

Tutorialwing Android Button Tutorial Output

Android Button Tutorial Output

Video Output

Getting Started

Android Button can be defined as below –

Android Button is user interface that user can tap or click to perform some action.

Different Attributes Of Android Button Widget

Different attributes that are used in button are list below. However, if you want to see the complete list of attributes, you need to visit android official documentation on Button widget. Here, we are listing commonly used attributes.

Attributes in Button are inherited from TextView and View. Some of the popular attributes are –

Sr. XML Attributes Description
1 android:background Sets background to this View.
2 android:backgroundTint Sets tint to the background.
3 android:clickable Sets true when you want to make this View clickable. Otherwise, set false.
4 android:drawableBottom This is drawable to be drawn at bottom of the text.
5 android:drawableEnd This is drawable to be drawn to end of the text.
6 android:drawableLeft This is drawable to be drawn to left of the text.
7 android:drawablePadding This is padding of the drawable.
8 android:drawableRight This is drawable to be drawn to right of the text.
9 android:drawableStart This is drawable to be drawn to start of the text.
10 android:drawableTop This is drawable to be drawn at top of the text.
11 android:text Sets the text of the EditText.
12 android:textAllCaps Shows text in capital letters.
13 android:textColor Sets color of the text.
14 android:textSize Sets size of the text.
15 android:textStyle Sets style of the text. For example, bold, italic, bolditalic etc.
16 android:typeface Sets typeface of the text. For example, normal, sans, serif, monospace.



Example Of Android Button Widget

In this section, we will learn how to use android Button widget in any android application. At first, we will create android application. Then, we will use Button widget in the application.

Follow the steps below to create new android project. Please ignore the steps if you have already created the project.

1. Creating New Project

Step Description
1. Open Android Studio.
2. Go to File => New => New Project. Write application name as Button. Then, click next button.
3. Select minimum SDK you need. However, we have selected 17 as minimum SDK. Then, click next button
4. Then, select Empty Activity => click next => click finish.
5. If you have followed above process correctly, you will get a newly created project successfully. However, you can also visit post to create a new project to know steps in detail.

Since we have a project now. We will modify the xml and java file to use Button widget. Please follow the steps below.

2. Modify Values Folder

Open res/values/strings.xml file. Then, add below code into it.

<resources>
    <string name="app_name">Button</string>
    <string name="show_message">Show message</string>
    <string name="welcome_message">Welcome to Button Tutorial!</string>
</resources>

Other values folder have not been changed. So, we are not going to mention it here.

3. Use Button Widget in xml file

Open res/layout/activity_main.xml file. Add below code into it. You may also visit post to use Button widget programmatically in android

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:id="@+id/activity_main"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">
 
    <Button
        android:id="@+id/btnShow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/show_message">
    </Button>
 
</LinearLayout>

Here, we have defined android Button widget in xml file. Now, we will access this Button in java file. Then, we will show Toast message on button click.

4. Access Button in java file

Open src/main/java/com.tutorialwing.edittext/MainActivity.java file. Then, add below code into it.

package com.tutorialwing.button;
 
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        Button btnShow = findViewById(R.id.btnShow);
        if (btnShow != null) {
            btnShow.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(MainActivity.this, R.string.welcome_message, Toast.LENGTH_LONG).show();
                }
            });
        }
    }
}

Since AndroidManifest file is important part of any android application. we are also going to see the content inside this file.

AndroidManifest.xml file

Code inside main/AndroidManifest.xml file is as below.

<?xml version="1.0" encoding="utf-8"?>
<manifest package="com.tutorialwing.button"
          xmlns:android="http://schemas.android.com/apk/res/android">
 
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
 
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>
 
</manifest>

Now, when we run the application, we will get output as shown above.

That’s end of tutorial on Android Button tutorial and it’s example.

Recommended Posts

Leave a Reply