ImageButtons tutorial in Android

Continued from part - 1

In the last post we learn to design simple buttons with text on them . Now we will learn to design Image Buttons .
The functionality of Image buttons are same as simple buttons but they have an image to display on the upfront instead of text .

Before learning ImageButton you have to know where to store images in your project and also to access them .

Images are stored in The Project Folder in res -> drawable-hdpi

Now Refresh the project by pressing right click and selecting Refresh on the Project name in the Project Explorerto see your image inside drawable-hdpi folder .

Select ImageButton from the Images & Media in the Palette and drag it to the layout .
 
As soon as you drag the ImageButton on the layout, you will get a prompt to choose your image for the button .The prompt appears like the below screenshot .

Select the image (logo) from the list below and click OK . You will see the image appears on the layout  as below.

Check your xml file (activity_main.xml) for the code or double-click on the ImageButton .

<ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/logo" />

You will see the attributes like width ,height of the layout and the source of the image.
Since we had stored the image in the drawable (drawable-hdpi) folder the src is @drawable/logo .
You can try other attributes of ImageButton by just typing android: in the ImageButton tags like below.

Next Post we will see how to connect to other pages and performing tasks using buttons .

Stay Tuned with Made In Android