How can I align an imagebutton under anothe one?

Question

I have three imageButtons inside an horizontal linearlayout and I want to add one more imageButton right under the up left imageButton(when the up left imageButton starts and finishes, I want the same thing for the imageButton under that). Everything is in a vertital linearlayout. I cannot align the down imageButton vertically with the up one. How can I do that? Any ideas?

My code is this:

android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="20dp"
    android:gravity="center">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton11"
        android:background="@drawable/image"
        android:layout_gravity="center"
        android:layout_marginRight="30dp"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton12"
        android:background="@drawable/image"
        android:layout_gravity="center"
        android:layout_marginRight="30dp"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton13"
        android:background="@drawable/image"
        android:layout_gravity="center"
        android:layout_marginRight="30dp"/>
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="20dp"
    android:gravity="left">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton14"
        android:background="@drawable/image"
        android:layout_marginRight="30dp"/>

</LinearLayout>

Answer 1

You can do this more easily with a RelativeLayout than via a TableLayout or a LinearLayout. If you are willing to use fixed widths for your imageButtons (Which should not be a problem for imageButtons), here is one layout which will solve your problem.
(I have used Buttons in the layout below for the sake of simplicity, but it will work the same for imageButtons as well.)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal">
    <Button
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:id="@+id/btn1"
        android:text="Button1" />
    <Button
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:id="@+id/btn2"
        android:layout_toRightOf="@id/btn1"
        android:text="Button2" />
    <Button
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:id="@+id/btn3"
        android:layout_toRightOf="@id/btn2"
        android:text="Button3" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button4"
        android:id="@+id/btn4"
        android:layout_below="@id/btn1"
        android:layout_alignLeft="@id/btn1"
        android:layout_alignRight="@id/btn1"/>
</RelativeLayout>

Here is how it will look:

Answer 2

Made chages in your xml try to use that

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="20dp"
            android:gravity="center_horizontal">
            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/imageButton11"
                    android:background="@drawable/image"
                    android:layout_marginRight="30dp"/>
                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/imageButton14"
                    android:layout_below="@+id/imageButton11"
                    android:align_left="@+id/imageButton11"
                    android:align_right="@+id/imageButton11"
                    android:layout_marginTop="10dp"
                    android:background="@drawable/image"
                    android:layout_marginRight="30dp"/>
            </RelativeLayout>
            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/imageButton12"
                android:background="@drawable/image"
                android:layout_marginRight="30dp"/>
            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/imageButton13"
                android:background="@drawable/image"
                android:layout_marginRight="30dp"/>

        </LinearLayout>
    </LinearLayout>

</LinearLayout>

Answer 3

you can try using RelativeLayout in the imageButton you want to be under another one, and set it below the imagebutton you want to be on top of it

android:layout_below="@+id/imagebutton1"

Answer 4

• The gravity of your 1st LinearLayout (inner one) tag is "center", whereas for your 2nd LinearLayout it is "left".
• The three ImageButton tags having gravity as "center", whereas for the last one, there is no gravity at all.

I think this is the one you are looking for.

   <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="20dp">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton11"
        android:layout_marginRight="30dp"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton12"
        android:layout_marginRight="30dp"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton13"
        android:layout_marginRight="30dp"/>
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="20dp">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton14"
        android:layout_marginRight="30dp"/>

</LinearLayout>

Hope this helps!

EDITED SECTION:

LinearLayout linearLayout = (LinearLayout)findViewById(R.id.id_layout);

    TableLayout tableLayout = new TableLayout(this);
    tableLayout.setStretchAllColumns(true);
    tableLayout.setGravity(Gravity.CENTER_HORIZONTAL);
    TableLayout.LayoutParams layoutParams = new TableLayout.LayoutParams(TableLayout.LayoutParams.WRAP_CONTENT,TableLayout.LayoutParams.WRAP_CONTENT);
    tableLayout.setVerticalScrollBarEnabled(true);
    tableLayout.setLayoutParams(layoutParams);

    TableRow tableRow = new TableRow(this);

    ImageButton imageButton = new ImageButton(this);
    ImageButton imageButton1 = new ImageButton(this);
    ImageButton imageButton2 = new ImageButton(this);

    tableRow.addView(imageButton);
    tableRow.addView(imageButton1);
    tableRow.addView(imageButton2);

    tableLayout.addView(tableRow);

    TableRow tableRow1 = new TableRow(this);
    tableRow1.setPadding(0, 0, 0, 40);
    TableRow.LayoutParams params = new TableRow.LayoutParams();
    params.span = 1;

    ImageButton imageButton3 = new ImageButton(this);

    tableRow1.addView(imageButton3);

    tableLayout.addView(tableRow1);

    linearLayout.addView(tableLayout);

Hope this helps!