Android Custom Buttons with onClick listener.

Android Custom Buttons

Android Custom Buttons with onClick listener. we are going to implement an Onclick listener for multiple custom buttons.

We are going to create an XML layout that having multiple buttons. Not just Multiple buttons but custom buttons and also implementing the onClick listener so we can track button click and add action on click.

This is a very simple method but lots of beginners stuck on it, so here we try to make it as simple as we can.

Creating New Project

  •  Create a new project in Android Studio from File ⇒ New Project. Select the Empty Activity and proceed. Continue to click on next button until Finish button is active, then click on Finish Button.

Getting Started with Project:-

      1. Edit your strings.xml file as below

XML file saved at res/values/strings.xml

In this file, all strings are being saved locally, The <string> element’s name is used as the resource ID. This Is the reference in java using R.string.name and in XML using @string/name. we can use multiple strings with values so incase of future modification/customization we can easily change them as per requirements.

strings.xml

<resources>
<string name="app_name">My Application</string>

<string name="tv1">Buttons Example</string>
<string name="btn_default">Default Button</string>
<string name="btn2">Button 2</string>
<string name="btn3">Button 3</string>
<string name="btn4">Button 4</string>
<string name="btn_pls">+</string>

</resources>

    2.Edit your Colors.xml

Just like strings.xml in colors we can save locally multiple colors as per required.

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#6200EE</color>
<color name="colorPrimaryDark">#3700B3</color>
<color name="colorAccent">#03DAC5</color>

<color name="colorButton5">#BA09F9</color>
<color name="colorButton4">#F49717</color>
<color name="colorButton3_2">#00FC7E</color>
<color name="colorButton3">#01F9E9</color>
<color name="colorButton2">#FF0000</color>
<color name="colorButton1">#50FF07</color>
</resources>

    3. Edit your styles.xml

In Styles.xml we can easily customize our theme settings of application.

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>

</resources>

    4. Add Buttons in activity_main.xml

Basic button layout like below and don’t forget to add onClick attribute so we can create on click event using it.

<Button
android:id="@+id/button"
android:textAllCaps="false"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="10dp"
android:text="@string/btn_default"
android:onClick="onClick"/>

add more buttons and create your own layout of multiple buttons.

5.Create a custom button XML file in Drawable folder

we created it and named it as custom_button, which will be the layout of our button.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

<solid android:color="@color/colorButton1"></solid>

</shape>

we created multiple custom_button xml files for each button with different names, in this example.

6.Add that custom button drawable to Button

we have custom_button.xml file now add it to our button.using following attribute.

android:background="@drawable/custom_button"

This is it for the front end of our application, now let’s handle its clicks using java

7.Impliment View.OnClickListener in MainActivity.

public class MainActivity extends AppCompatActivity implements View.OnClickListener

8. Assign an ID to Buttons.

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

9. Use switch case for button clicks.

After implementation on view.OnClickListener on click function was auto-implemented inside the main activity.

public void onClick(View v) {
}

By using v.getid() we can get reference of clicked button.

In switch case we are going to use it to compare that clicked button reference with our button reference using R.id.button.

so after clicking on any button we have it will compare its reference with our provided reference of buttons in cases one by one and we can do what we want to do . In this example, we are just toasting the message.

That’s all. You may see the results screen shots of this Example Below,

Complete Source Code:-

  •  custom_button.xml.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

<solid android:color="@color/colorButton1"></solid>

</shape>
  •  custom_button2.xml.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

<stroke android:color="@color/colorButton2" android:width="1dp"></stroke>

<corners android:radius="20dp"></corners>

</shape>
  •  custom_button3.xml.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

<gradient android:startColor="@color/colorButton3" android:endColor="@color/colorButton3_2" android:type="linear"></gradient>

<corners android:topLeftRadius="20dp" android:topRightRadius="20dp"></corners>

</shape>
  •  custom_button4.xml.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

<gradient android:centerColor="@color/colorButton4" ></gradient>

<stroke android:color="@color/colorButton4" android:width="2dp"></stroke>

<corners android:topLeftRadius="40dp" android:bottomRightRadius="40dp"></corners>

</shape>
  •  custom_button5.xml.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

<solid android:color="@color/colorButton5"></solid>

<corners android:radius="999dp"></corners>

</shape>
  •  activity_main.xml.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/tv1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:textSize="30dp"
android:gravity="center"
android:id="@+id/tv1"/>

<Button
android:id="@+id/button"
android:textAllCaps="false"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="10dp"
android:background="@drawable/custom_button"
android:text="@string/btn_default"
android:layout_below="@+id/tv1"
android:onClick="onClick"/>
<Button
android:id="@+id/button2"
android:textAllCaps="false"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/custom_button2"
android:text="@string/btn2"
android:textColor="#FF0000"
android:layout_marginTop="10dp"
android:layout_below="@+id/button"
android:onClick="onClick"/>

<Button
android:id="@+id/button3"
android:textAllCaps="false"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/custom_button3"
android:text="@string/btn3"
android:layout_marginTop="10dp"
android:layout_below="@+id/button2"
android:onClick="onClick"/>

<Button
android:id="@+id/button4"
android:textAllCaps="false"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/custom_button4"
android:text="@string/btn4"
android:layout_marginTop="10dp"
android:layout_below="@+id/button3"
android:onClick="onClick"/>

<Button
android:id="@+id/button5"
android:layout_centerHorizontal="true"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_below="@+id/button4"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:background="@drawable/custom_button5"
android:text="@string/btn_pls"
android:textSize="50dp"
android:textColor="#FFFFFF"
android:textAllCaps="false"
android:onClick="onClick"/>


</RelativeLayout>
  •  MainActivity.java.
package com.example.swifterblog;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
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 button1 = findViewById(R.id.button);
Button button2 = findViewById(R.id.button2);
Button button3 = findViewById(R.id.button3);
Button button4 = findViewById(R.id.button4);
Button button5 = findViewById(R.id.button5);

button1.setOnClickListener(this);
button2.setOnClickListener(this);
button3.setOnClickListener(this);
button4.setOnClickListener(this);
button5.setOnClickListener(this);



}



@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.button:
Toast.makeText(this, "Button 1 clicked", Toast.LENGTH_SHORT).show();
break;
case R.id.button2:
Toast.makeText(this, "Button 2 clicked", Toast.LENGTH_SHORT).show();
break;
case R.id.button3:
Toast.makeText(this, "Button 3 clicked", Toast.LENGTH_SHORT).show();
break;
case R.id.button4:
Toast.makeText(this, "Button 4 clicked", Toast.LENGTH_SHORT).show();
break;
case R.id.button5:
Toast.makeText(this, "Button 5 clicked", Toast.LENGTH_SHORT).show();
break;


}
}
}

That’s It.

Founder and Owner of Swifterblog. I am a Mechanical Engineer and Tech enthusiast, Android hobbyist, and many more. I love to share my knowledge through blogs & Apps.

Leave a Reply

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

Back To Top