Android Studio : Highlight ImageButton when pressed on example



Tags : android-studio image-button focused pressedstates java

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.

default state - the normal state (download image file)

pressed state - 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.

reveal resource drawable 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.

imagebutton drawable

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:

Android app show buttons with different states

Happy coding!

  See also : Android Studio : Create custom icons for your application example



Tags : android-studio image-button focused pressedstates java

By Adam Ng

IF you gain some knowledge or the information here solved your programming problem. Please consider donating to the less fortunate or some charities that you like. Apart from donation, planting trees, volunteering or reducing your carbon footprint will be great too.


Advertisement