Create An ImageButton In Android App Using Android Studio

Introduction

In this article you will learn how to create an image button in Android applications using Android studio.

Requirements

• Android Studio version 2.1.3

If you want to develop the image button, it should follow the below steps.

Step 1

Now, open Android Studio and you can choose the File and New and afterwards choose NewProject.



Step 2

Here, we can create your application name and choose where to store your project and click on the NEXT button.



Now, we can choose the version -- it is Target Android Devices.Then click the NEXT button.



Step 3

Here,we can add the activity and click the NEXT button.



Now, we can write the activity name and Click the FINISH button.



Step 4

Now, open your project and you will go to activity_main.xml and afterwards you build the design, it should be in toolbox, and if you want some options, (Image Button), and use the drag and drop method.



Step 5

Now, you will go to project Drawable and click the Show Explorer button, and go to the Drawable folder and copy and paste some images and generate the images in your project.



Now, you can go to Drawable folder. You can choose some images and you can  copy and paste them.



Now some images are added to your project.



Here, you can see the layout of your design.



Step 6

Here, your build on the design and write the .XML code .

activity_mai.xml code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="xyz.rvconstructions.www.imagebutton.MainActivity">
    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Image Button " android:id="@+id/textView" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" />
    <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/cshabutton" android:padding="20dp" android:src="@drawable/csharp" android:layout_alignTop="@+id/textView" android:layout_toRightOf="@+id/textView" android:layout_toEndOf="@+id/textView" />
    <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/googlbutton" android:padding="20dp" android:src="@drawable/google" android:layout_below="@+id/cshabutton" android:layout_centerHorizontal="true" />
</RelativeLayout>

Step 7

Now, you will go to MainActivity.java page and build the Java code. First, you declare the heaterfile is an  extention file.



Now, you will declare the full Java code in your project.

 

package xyz.rvconstructions.www.imagebutton;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.graphics.Color;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageButton;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            ImageButton simpleImageButtonCsharp = (ImageButton) findViewById(R.id.cshabutton);
            ImageButton simpleImageButtonGoogle = (ImageButton) findViewById(R.id.googlbutton);
            simpleImageButtonCsharp.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(getApplicationContext(), "your clicked c-Sharp", Toast.LENGTH_LONG).show();
                    }
                ); simpleImageButtonGoogle.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(getApplicationContext(), "your clicked Google", Toast.LENGTH_LONG).show();
                    }
                });
            }
        } // This is just a sample script. Paste your real code (javascript or HTML) here.

    if ('this_is' == /an_example/) {
        of_beautifier();
    } else {
        var a = b ? (c % d) : e[f];
    }

Step 8

Here, you will go to run it, and select the RUN App option.



Here, you will choose the emulator or device, it is Nokia Nokia _X.



Step 9

Here you can see the output.



Now, you will click the C-sharp button



Now, you will click the Google button .