Recipe Using Image Buttons in a Table Layout

Buttons were introduced in Chapter 2. Like any view, a background image can be added to a button using the android:background attribute. However, using the special ImageButton widget provides some additional layout flexibility. It specifies an image using the android:src attribute as follows:

<ImageButton android:id="@+id/imagebutton0"

android:src="@drawable/android_cupcake" android:layout_width="wrap_content" android:layout_height="wrap_content" />

When used in this way, the image shows on top of a button widget.The ImageButton inherits image placement from the ImageView widget using android:scaleType. Possible values and how they modify a given image are illustrated in Figure 4.10.

Android Scaletype
Figure 4.10 Example results of android:scaleType for image views.

In addition, some other possible manipulations used with image buttons are

■ Using android:padding to keep buttons from overlapping or to add space between them

■ Setting android:background to null (which is @null in the XML layout file) to hide the button and show only the image

When the button is hidden, by default, there is no visual feedback that an image button was pressed.This can be rectified by creating a drawable XML file that contains just a selector element:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/myImage_pressed"

android:state_pressed="true" /> <item android:drawable="@drawable/myImage_focused"

android:state_focused="true" /> <item android:drawable="@drawable/myImage_normal" /> </selector>

This specifies three different images depending on whether the button is pressed, in focus, or just a normal state.The three different images for these cases should also reside in the drawable resource directory (such as res/drawable-mdpi/).Then, the selector file can be specified as the android:src of an ImageButton.

When multiple image buttons are placed together in a layout, it is often useful to utilize the table layout, which is also shown in this recipe. The TableLayout view group is similar to a LinearLayout with vertical orientation.Then, multiple rows can be specified using the TableRow view group for each row. The example layout shown in Listing 4.15 specifies an ImageButton and TextView view in each row, producing the screen layout shown in Figure 4.11.

Listing 4.15 res/layout/ibutton.xml

<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TableRow>

<ImageButton android:id="@+id/imagebutton0" android:src="@drawable/android_cupcake" android:scaleType="fitXY" android:background="@null" android:padding="5dip" android:layout_width="wrap_content" android:layout_height="90dip" /> <TextView android:text="Cupcake"

android:layout_width="wrap_content" android:layout_height="wrap_content" /> </TableRow> <TableRow>

<ImageButton android:id="@+id/imagebutton1" android:src="@drawable/android_donut" android:scaleType="fitXY" android:background="@null" android:padding="5dip" android:layout_width="wrap_content" android:layout_height="90dip" /> <TextView android:text="Donut"

android:layout_width="wrap_content" android:layout_height="wrap_content" /> </TableRow> <TableRow>

<ImageButton android:id="@+id/imagebutton2" android:src="@drawable/android_eclair" android:scaleType="fitXY" android:background="@null" android:padding="5dip" android:layout_width="wrap_content" android:layout_height="90dip" /> <TextView android:text="Eclair"

android:layout_width="wrap_content" android:layout_height="wrap_content" /> </TableRow> <TableRow>

<ImageButton android:id="@+id/imagebutton3" android:src="@drawable/android_froyo" android:scaleType="fitXY" android:background="@null" android:padding="5dip" android:layout_width="wrap_content" android:layout_height="90dip" /> <TextView android:text="FroYo"

android:layout_width="wrap_content" android:layout_height="wrap_content" /> </TableRow> <TableRow>

<ImageButton android:id="@+id/imagebutton4"

android:src="@drawable/android_gingerbread" android:scaleType="fitXY" android:background="@null" android:padding="5dip" android:layout_width="wrap_content" android:layout_height="90dip" /> <TextView android:text="Gingerbread"

android:layout_width="wrap_content" android:layout_height="wrap_content" /> </TableRow> </TableLayout>

Cupcake

Donut

Eclair

FroYo

Gingerbread

Figure 4.11 TableLayout of ImageButtons and TextViews.

Character Building Thought Power

Character Building Thought Power

Character-Building Thought Power by Ralph Waldo Trine. Ralph draws a distinct line between bad and good habits. In this book, every effort is made by the writer to explain what comprises good habits and why every one needs it early in life. It draws the conclusion that habits nurtured in early life concretize into impulses in future for the good or bad of the subject.

Get My Free Ebook


Responses

  • weronika
    How to maintain position of imagebutton android?
    6 years ago
  • kiran
    How to get table in android xml with img button?
    1 year ago
  • edward
    How to insert image in table layout in android?
    4 months ago
  • emanuele
    How to use images button in table form in android?
    4 months ago

Post a comment