Overview
In this tutorial, we show you how to create a simple ImageButton and Android Button Selector using Android studio.
Follow the steps mentioned below to develop this application.
Watch Tutorials
Download button images
 |
| normal.jpg |
 |
| focused.jpg |
 |
| pressed.jpg |
Creating the project
Open the Android Studio, then click “Start a new Android Studio project”.
Enter the info below:
Application Name: ImageButtonExample
Company domain: jackrutorial.com
Project location: C:/android
then click "Next".
Select the form factors and minimum SDK. In this tutorial, We selected the minimum SDK "API 15: Android 4.0.3(IceCreamSandwich)", click "Next".
Select the Empty activity and click "Next".
Leave the activity name “MainActivity”, Click Finish.
Adding photos in the project folder
- Go to your image (focused.jpg,normal.jpg,pressed.jpg) in windows, then press Ctrl + C or right click and copy
- Go to res/drawable folder and press Ctrl + V or right click it and paste.
Add button.xml resource file
Click the target app module in the Project window and then select File > New > Android resource file.
Fill in the details in the dialog
File name: button.xml
Resource type: Drawable
Click Ok
Change button.xml code to the following.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/pressed" android:state_pressed="true" />
<item android:drawable="@drawable/focused" android:state_focused="true" />
<item android:drawable="@drawable/normal" />
</selector>
Change the activity_main.xml layout to the following.
<?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.jackrutorial.imagebuttonexample.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ImageButton Selected"
/>
<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ImageButton"
/>
<ImageButton
android:id="@+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/focused"
/>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Change MainActivity activity code to the following.package com.jackrutorial.imagebuttonexample;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
ImageButton imageButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageButton = (ImageButton) findViewById(R.id.imageButton);
imageButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "ImageButton is clicked", Toast.LENGTH_SHORT).show();
}
});
}
}
Run this app in the Android Emulator
You can run this app from an Android Studio project. Or you can run this app that's been installed on the emulator as you would run any app on a device.
To start the emulator and run this app in your project
- Open Android Studio project and click Run.
- In the Select Deployment Target dialog, select an existing emulator definition, and then click OK.
- If you don’t see a definition you want to use, click Create New Virtual Device to launch the AVD Manager. After you define a new AVD, in the Select Deployment Target dialog, click OK.
- If you want to use this emulator definition as the default for your project, select Use same selection for future launches.
