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!
See also : Android Studio : Create custom icons for your application example
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
Tutorials
+46k Golang : Marshal and unmarshal json.RawMessage struct example
+6.7k Nginx : Password protect a directory/folder
+4.6k PHP : Extract part of a string starting from the middle
+15.4k Golang : Get digits from integer before and after given position example
+23.7k Golang : Call function from another package
+8.7k Golang : Sort lines of text example
+6k Golang : Calculate US Dollar Index (DXY)
+10.7k Golang : Natural string sorting example
+5.1k Responsive Google Adsense
+29.1k Golang : Record voice(audio) from microphone to .WAV file
+10.4k Golang : Interfacing with PayPal's IPN(Instant Payment Notification) example
+17.5k Golang : Iterate linked list example