Android: how to align views vertically and horizontally

Question

I'm wondering how I can align the buttons as the following: Button1 and Button2-2 are supposed to align horizontally, Button2-1 and Button2-2 should align vertically.

                        [Button2-1]
[other views] [Button1] [Button2-2]

Here is my code but it doesn't work:

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ButtonGroups"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/Button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical" >

            <Button
                android:id="@+id/Button2-1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center" />

            <Button
                android:id="@+id/Button2-2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

---

EDITED:

To be more clear, I posted more code here and hopefully it could explain my needs better:

What I want is to align the text view horizontally with the image buttons while vertically with the seekbar above it.

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ButtonGroups"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal" >

        <ImageButton
            android:id="@+id/Button00"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/background00"
            android:gravity="bottom"
            android:scaleType="center"
            android:src="@drawable/button00" />

         <ImageButton android:id="@+id/Button11"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:src="@drawable/button11"
             android:scaleType="center"
             android:gravity="bottom"
             android:background="@drawable/background11"
             />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="bottom"
            android:orientation="vertical" >

           <SeekBar
                    android:id="@+id/SeekBar1"
                    style="@style/MySeekBar1"
                    android:layout_width="60dp"  
                    android:layout_height="35dp"
                    android:layout_marginBottom="20dp"
                />

            <TextView
                    android:id="@+id/MyText"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="bottom"
                    android:background="@drawable/MyTextImg"
                />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

Answer 1

Try the code below:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="*">

<TableRow >
    <TextView />

    <Button 
        android:id="@+id/button2" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:text="Button2-1" />
</TableRow>

<TableRow >
    <Button 
        android:id="@+id/button1" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:text="Button1" />

    <Button 
        android:id="@+id/button2" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:text="Button2-2" />

</TableRow>

</TableLayout>

The trick is to use a blank text view for the empty space in the first row. Let me know if this helps you. :)

Answer 2

As someone suggested, use a RelativeLayout to design this type of pattern! Here's an example for your situation:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ButtonGroups"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

        <Button
            android:id="@+id/Button2-2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBaseline="@+id/Button1"
            android:layout_alignBottom="@+id/Button1"
            android:layout_toRightOf="@+id/Button1"
            android:text="button 2-2" />

        <Button
            android:id="@+id/Button2-1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/Button2-2"
            android:layout_alignLeft="@+id/Button2-2"
            android:text="button 2-1" />

        <Button
            android:id="@+id/Button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginTop="54dp"
            android:text="button 1" />
</RelativeLayout>

I hope this get you started!

Answer 3

Try changing the gravity attribute of the first button (Button 1) to bottom.

Answer 4

Use RelativeLayout. Stacking LinearLayouts is usually not the way to go!

https://developer.android.com/reference/android/widget/RelativeLayout.html

https://developer.android.com/guide/topics/ui/layout/relative.html