In this tutorial, we will look into Android Button. We will create android studio application and look into various things about button designing, styling, click events etc.
Android Buttons are GUI components that the users can click upon to either goto the next screen, confirm an option/trigger any event created by you, the Android Developer.
The android.widget.Button is a subclass of Android TextView.
Buttons in Android can be of the following forms:
In the following sections, we’ll be discussing the default button class, creating it programmatically, styling it.
We can define the Button widget in our layout file in Android Studio in the following way.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android" xmlns:tools="https://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center" tools:context="com.journaldev.androidbutton.MainActivity"> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="DEFAULT BUTTON" android:onClick="clickMe"/> </LinearLayout> |
In the above code, we’ve wrapped our Button widget inside a LinearLayout
The id represents the unique identifier.
The onClick attribute requires the method name as the value. This method name should be defined in the corresponding activity of the layout.
It’ll get triggered when the button is clicked.
Setting android:background as a color would remove the selection animation from the button.
We can set an image inside the button alongise the text by using the attribute android:drawableLeft to set the image to the left of the text.
Our MainActivity.java class looks like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
package com.journaldev.androidbutton; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Toast; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } public void clickMe(View view) { Toast.makeText(getApplicationContext(),"Button is clicked",Toast.LENGTH_LONG).show(); } } |
On clicking the button a Toast notification would be displayed onto the screen.
Let’s set the attributes on the button programmatically and create one button programmatically.
|
1 2 3 4 5 6 7 8 9 10 |
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button button = findViewById(R.id.button); button.setTextColor(Color.RED); button.setClickable(false); } |
We hook the xml button id to the corresponding instance in the class using the findViewById method.
setTextColor() is used to set the text color,
setClickable accepts a boolean value. Setting it to false would make the button not clickable and the clickMe method won’t be triggered.
The following code creates a button programmatically and adds it to the root hierarchy.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Button programmaticButton = new Button(this); programmaticButton.setId(R.id.button2); programmaticButton.setText("CREATED PROGRAMMATICALLY"); programmaticButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(getApplicationContext(),"Programmatic Button is clicked",Toast.LENGTH_LONG).show(); } }); LinearLayout linearLayout = findViewById(R.id.linearLayout); linearLayout.addView(programmaticButton); |
We can set an ID programmatically using setId. We can create ids in the folder res | values | ids.xml as shown below:
setOnClickListener has an interface callback that listens for the click and triggers the onClick method whenever the button is clicked.
Now let’s add another buttons in our layout programmatically in our MainActivity.java class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button button = findViewById(R.id.button); button.setTextColor(Color.RED); button.setClickable(false); //Creating a Button programmatically Button programmaticButton = new Button(this); programmaticButton.setId(R.id.button2); programmaticButton.setText("CREATED PROGRAMMATICALLY"); programmaticButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(getApplicationContext(), "Programmatic Button is clicked", Toast.LENGTH_LONG).show(); } }); LinearLayout linearLayout = findViewById(R.id.linearLayout); linearLayout.addView(programmaticButton); programmaticButton = new Button(this); programmaticButton.setId(R.id.button3); programmaticButton.setText(getResources().getString(R.string.another_button)); programmaticButton.setBackgroundColor(ContextCompat.getColor(this, R.color.colorAccent)); programmaticButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(getApplicationContext(), "Another Programmatic Button is clicked", Toast.LENGTH_LONG).show(); } }); } |
setBackgroundColor() method is to set a color on the button programmatically.
Ideally, we should use string resources to set text on the button instead of hardcoding them in the java class itself.
In the above code, we’ve created two buttons and each of them has a separate interface callback for the listener. This means we’ll have a different object created in the memory for each of the buttons. This would add up in the heap memory and eventually the application would use more memory than required from the device. We can fix this performance issue by making the class implement the View.OnClickListener itself.
Instead of using separate setOnClickListener callbacks for every Button, implement the interface on the class itself.
So with the View.OnClickListener implemented in the class itself, our MainActivity.java class would look like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
package com.journaldev.androidbutton; import android.graphics.Color; import android.support.v4.content.ContextCompat; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.LinearLayout; import android.widget.Toast; public class MainActivity extends AppCompatActivity implements View.OnClickListener { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button button = findViewById(R.id.button); button.setTextColor(Color.RED); button.setClickable(false); //Creating a Button programmatically Button programmaticButton = new Button(this); programmaticButton.setId(R.id.button2); programmaticButton.setText("CREATED PROGRAMMATICALLY"); programmaticButton.setOnClickListener(this); LinearLayout linearLayout = findViewById(R.id.linearLayout); linearLayout.addView(programmaticButton); programmaticButton = new Button(this); programmaticButton.setId(R.id.button3); programmaticButton.setText(getResources().getString(R.string.another_button)); programmaticButton.setBackgroundColor(ContextCompat.getColor(this, R.color.colorAccent)); programmaticButton.setOnClickListener(this); linearLayout.addView(programmaticButton); } public void clickMe(View view) { Toast.makeText(getApplicationContext(), "Button is clicked", Toast.LENGTH_LONG).show(); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.button2: Toast.makeText(getApplicationContext(), "Programmatic Button is clicked", Toast.LENGTH_LONG).show(); break; case R.id.button3: Toast.makeText(getApplicationContext(), "Another Programmatic Button is clicked", Toast.LENGTH_LONG).show(); break; } } } |
We’ve set each of the setOnClickListener to the common View.OnClickListener interface using this. In the switch block we detect the Button view that was clicked using their id.
This saves a lot of memory!
Setting Text Size
Text size of a button is typically set in sp units.
|
1 2 3 4 5 6 7 8 9 10 |
<Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="DEFAULT BUTTON" android:textSize="20sp" android:background="#147D03" android:onClick="clickMe"/> |
OR do the following in your activity.
|
1 2 3 4 5 6 |
Button button = findViewById(R.id.button); button.setTextColor(Color.RED); button.setClickable(false); button.setTextSize(22); //size in float |
We’ve added a few more buttons to the layout and attached their listeners in the Activity.
Following is the output of the application in action.
This brings an end to this tutorial. You can find the source code for the Android Button Project below.
In the next tutorial, we’ll be discussing the Button states and selectors.