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>

Wilberwilberforce

Please add comments for which one worked for you, or u have any issues...Also accept the right answer. – Novokuznetsk

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>

Novokuznetsk

Thanks..worked perfectly. I added a blank TextView in between to give some gap between those imagebutton. Thanks – Wilberwilberforce

if you want to add space, no need to add a textview for that...add margin attribute...that will be enough. For ur first button give something like android:layout_marginRight="30dp"...it will add margins and hence spacing will get increased... – Novokuznetsk

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!!

Whey

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?

Woolf