Android: Center align ImageButtons

Question

I have 2 ImageButons like this

I have tried everything to make it align properly in center of screen. As being new to android i don't have any other clues of what to do. How can i achieve my goal of aligning these 2 Imagebuttons in center of screen

This is my layout xml

<TableLayout android:id="@+id/TableLayout01"
        android:layout_width="fill_parent" android:layout_height="wrap_content"
        android:stretchColumns="1">
        <TableRow android:id="@+id/TableRow01" android:layout_width="fill_parent"
            android:layout_height="wrap_content">

            <ImageButton android:id="@+id/btn_Show"
                android:layout_width="wrap_content" android:layout_height="wrap_content"
                android:text="Show" android:src="@drawable/cmd_result_show"
                android:layout_gravity="right" android:background="@android:color/transparent" />

            <ImageButton android:id="@+id/btn_showAll"
                android:layout_width="wrap_content" android:layout_height="wrap_content"
                android:text="Detailed Show" android:layout_gravity="center"
                android:src="@drawable/cmd_result_details" android:background="@android:color/transparent" />
        </TableRow>
    </TableLayout>

Answer 1

I hope you have images for these buttons directly. So this setting text attribute is of no use. Use RelativeLayout for easy development of these kind of screens.

Below I have attached the code. Please have a look and add comment if there is any issues.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:gravity="center_horizontal">

    <ImageButton android:id="@+id/btn_Show"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:background="@drawable/cmd_result_show" />

    <ImageButton android:id="@+id/btn_showAll"
        android:layout_toRightOf="@id/btn_Show" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:background="@drawable/cmd_result_details" />
</RelativeLayout>

Answer 2

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:gravity="center">
  <TableLayout android:id="@+id/TableLayout01"
    android:stretchColumns="1" android:layout_height="wrap_content"
    android:layout_width="wrap_content" >
    <TableRow android:id="@+id/TableRow01" android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
        <ImageButton android:id="@+id/btn_Show"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:text="Show" android:src="@drawable/cmd_result_show"
            android:layout_gravity="right" android:background="@android:color/transparent" />
        <ImageButton android:id="@+id/btn_showAll"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:text="Detailed Show" android:layout_gravity="center"
            android:src="@drawable/cmd_result_details" android:background="@android:color/transparent" />
    </TableRow>
</TableLayout>

Enjoy!!

Answer 3

You have put the ImageButtons inside the tablerow. The tablerow will always occupy the first layer of the screen. Do you want the buttons to be centre aligned but at the top position?