Layouts in android - how to make 3 columns?
I'm trying to create something like this (colors just for better understanding, background will be white):
My problem is 3 boxes containing two TextViews, one below the other.
This is my code:
<?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 the result of my incomplete code:
I've experimented with LinearLayout
and RelativeLayout
. I totally don't understand the latter.
+3
source to share
5 answers
You can try something like this:
Place two text images of each column under the LinearLayout and finally, place three LinearLayouts under the 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 to equal weight for all three columns of linear layouts.
Screenshot:
Hope it helps.
+4
source to share
We need to use a nested layout The layout should be somewhat similar to this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dip" >
<TextView
android:id="@+id/email"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
+1
source to share
Change the orientation of your LinearLayout to position the viewpoints horizontally:
android:orientation="horizontal"
But it will break when there is no more space as the views will not automatically advance to the next line.
To create exactly what is in the picture, try something like
<LinearLayout>
<!--horizontal-->
<LinearLayout>
<!--vertical-->
<TextView />
<TextView />
</LinearLayout>
<!-- repeat while you need -->
</LinearLayout>
But do you really need TextViews? In the picture it looks like tabs ...
0
source to share
You need to place 3 TextView in layout
and if you want 3 TextViews to have exact width you may need to set your weight
something like that
<!-- 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>
0
source to share
You can use a horizontal LinearLayout which has three subexpressions that are vertical (RelativeLayouts are also possible, but I'm sticking with LinearLayouts because you fully understand RelativeLayouts). Each of the three sublayers contains two column text boxes. I followed it below for one column, just copy the layout paste for the first column.
<?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 -->
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- 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 -->
</LinearLayout>
<!-- row 2 end -->
</LinearLayout>
0
source to share