Android Studio : Highlight ImageButton when pressed on example

There are times when we want to spice up our Android app with buttons that are aware of being pressed on. To make such button, Android has states such as state_pressed for developers to use to highlight a button. For this tutorial, we will learn how to use 2 images as a button to show different states.

First, let's prepare the 2 images. We will use these and put them into the res/drawable folder.

- the normal state (download image file)

- the pressed state (download image file)

Right-click on the folder in Android Studio and select "Reveal in Finder" such as shown below. Copy the image files into the folder.

Once done, create a new drawable resource XML file in the res/drawable folder. For this tutorial, we will just name statesbutton.xml. The XML file will help Android to find the appropriate button image to use for different states.

statesbutton.xml file:

 <?xml version="1.0" encoding="utf-8"?>

 <!--add config_mediumAnimTime to show the changing states in slow motion-->

 <selector xmlns:android="http://schemas.android.com/apk/res/android"
 android:exitFadeDuration="@android:integer/config_mediumAnimTime">

 <!--the order is important(the first matching states got rendered first)-->
 <item android:state_pressed="true" android:drawable="@drawable/pressed" />
 <item android:drawable="@drawable/normal" />
 </selector>

In the res/layout/activity_main.xml file. Fill up the file with:

 <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout 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="com.example.sweetlogic.highlightimagebutton.MainActivity"
 tools:layout_editor_absoluteX="0dp"
 tools:layout_editor_absoluteY="81dp">


 <Button
 android:id="@+id/buttonDifferentStates"
 android:layout_width="168dp"
 android:layout_height="39dp"
 android:background="@drawable/statesbutton"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintTop_toTopOf="parent"
 app:layout_constraintVertical_bias="0.235" />

 <ImageButton
 android:id="@+id/imageButtonDifferentStates"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:srcCompat="@drawable/statesbutton"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintTop_toTopOf="parent"
 app:layout_constraintVertical_bias="0.663" />


 </android.support.constraint.ConstraintLayout>

Now, why there are Button and ImageButton?

Well, I want to show you how to use Button and ImageButton to highlight these states.

The different is that when ImageButton widget is dropped into the app layout, Android Studio will ask which drawable to use.

Android Studio will not prompt for which drawable to use for Button, we will have to specify the drawable to use in the XML code with the android:background

android:background="@drawable/statesbutton"

---

Finally, fill up the MainActivity.java file with:

 package com.example.sweetlogic.highlightimagebutton;

 import android.support.v7.app.AppCompatActivity;
 import android.os.Bundle;
 import android.widget.Toast;
 import android.view.View;
 import android.widget.Button;
 import android.widget.ImageButton;

 public class MainActivity extends AppCompatActivity {

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

 addListenerOnButton();
 addListenerOnImageButton();
 }

 public void addListenerOnButton() {
 Button button = (Button) findViewById(R.id.buttonDifferentStates);

 button.setOnClickListener(new View.OnClickListener() {


 @Override
 public void onClick(View arg0) {

 Toast.makeText(MainActivity.this, "button pressed", Toast.LENGTH_SHORT).show();

 }

 });

 }

 public void addListenerOnImageButton() {
 ImageButton imageButton = (ImageButton) findViewById(R.id.imageButtonDifferentStates);


 imageButton.setOnClickListener(new View.OnClickListener() {


 @Override
 public void onClick(View arg0) {

 Toast.makeText(MainActivity.this, "Image button pressed", Toast.LENGTH_SHORT).show();

 }

 });

 }
 }

---

Save and run the code. If everything goes smoothly, the app that looks like this will run on your Android emulator or device:

Happy coding!