Layouts in android - how to make 3 columns?

Question

Im trying to create something like this (colors are only for better understanding, background will be white):

My problem is 3 boxes containing two TextViews, one under another.

This is my code so far:

<?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="wrap_content"
    >

    <!-- row 1 -->
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="TextView0"
        android:textSize="24dp"
        android:padding="16dp"
        android:background="#3366ff"/>
    <!-- row 1 end -->

    <!-- row 2 -->

        <!-- col 1 -->
            <TextView
                android:padding="8dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView1"
                android:background="#aaaaaa"
                />

            <TextView
                android:padding="8dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView1A"
                android:background="#cccccc"
                />
        <!-- col 1 end -->

        <!-- col 2 -->
            <TextView
                android:padding="8dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView2"
                android:background="#bbbbbb"
                />

            <TextView
                android:padding="8dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView2A"
                android:background="#dddddd"
                />

        <!-- col 2 end -->

        <!-- col 3 -->
            <TextView
                android:padding="8dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView3"
                android:background="#cccccc"
                />

            <TextView
                android:padding="8dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView3A"
                android:background="#eeeeee"
                />
        <!-- col 3 end -->

    <!-- row 2 end -->

</LinearLayout>

And this is result of my incomplete code:

I was experimenting with LinearLayout and RelativeLayout. I totally don't understand last one.

Answer 1

You can try something like this:

Put the two textviews of each column under a LinearLayout (Vertical) and finally put the three LinearLayouts under a Horizontal LinearLayout:

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

    <!-- row 1 -->

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#3366ff"
        android:padding="16dp"
        android:text="TextView0"
        android:textSize="24dp" />
    <!-- row 1 end -->


    <!-- row 2 -->

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="3" >

        <!-- col 1 -->

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#aaaaaa"
                android:padding="8dp"
                android:text="TextView1" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#cccccc"
                android:padding="8dp"
                android:text="TextView1A" />
        </LinearLayout>
        <!-- col 1 end -->
        <!-- col 2 -->

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#bbbbbb"
                android:padding="8dp"
                android:text="TextView2" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#dddddd"
                android:padding="8dp"
                android:text="TextView2A" />
        </LinearLayout>
        <!-- col 2 end -->
        <!-- col 3 -->

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#cccccc"
                android:padding="8dp"
                android:text="TextView3" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#eeeeee"
                android:padding="8dp"
                android:text="TextView3A" />
        </LinearLayout>
    </LinearLayout>
    <!-- col 3 end -->

</LinearLayout>

Use weight for equal wightage of all three column linear layouts.

Screenshot:

Hope this helps.

Answer 2

You need to put 3 TextView in some Layout

and if you want to let 3 TextView to have exact same width you might need to set their weight

something like this

<!-- row 2 -->
<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
    <!-- col 1 -->

    <LinearLayout
        android:orientation="vertical"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <TextView
            android:padding="8dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView1"
            android:background="#aaaaaa"
            />

        <TextView
            android:padding="8dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView1A"
            android:background="#cccccc"
            />
    <!-- col 1 end -->
    </LinearLayout>
    <LinearLayout
        android:orientation="vertical"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    <!-- col 2 -->
        <TextView
            android:padding="8dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView2"
            android:background="#bbbbbb"
            />

        <TextView
            android:padding="8dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView2A"
            android:background="#dddddd"
            />

    <!-- col 2 end -->

    </LinearLayout>
    <LinearLayout
        android:orientation="vertical"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    <!-- col 3 -->
        <TextView
            android:padding="8dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView3"
            android:background="#cccccc"
            />

        <TextView
            android:padding="8dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView3A"
            android:background="#eeeeee"
            />
    <!-- col 3 end -->

    </LinearLayout>
<!-- row 2 end -->
</LinearLayout>