Can anyone suggest me how to do following layout?

Question

I need to arrange views in following manner

I somehow managed to do it with 2 views But for doing it for 4 views, I am facing problem.. Can anybody help me?? NOTE: I am Having API level 8

So I can't use GridLayout

Answer 1

This is the layout I think you are asking.

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

<FrameLayout 
android:id="@+id/framelayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"

>

<LinearLayout 
android:id="@+id/parentviewLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >


<LinearLayout 
android:id="@+id/viewLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="horizontal" >

<com.forlo.photomaster.PanZoomView
android:id="@+id/zoomview1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
/>
<com.forlo.photomaster.PanZoomView1
android:id="@+id/zoomview2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
/>

</LinearLayout>

<LinearLayout 
android:id="@+id/viewLayout2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:layout_below="@id/viewLayout" >

<com.forlo.photomaster.PanZoomView2
android:id="@+id/zoomview3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
/>

  <com.forlo.photomaster.PanZoomView3
android:id="@+id/zoomview4"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
/>

</LinearLayout>

</LinearLayout>

</FrameLayout>

</RelativeLayout>

Answer 2

Use this one :)

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

<TableLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="4"
    >

    <TableRow 
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:layout_weight="2"
        android:id="@+id/row1"
        >

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher"
            android:background="@android:color/holo_blue_light"/>

         <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:src="@drawable/ic_launcher"
            android:layout_weight="1"
            android:background="@android:color/holo_blue_light"/>



    </TableRow>

     <TableRow 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_weight="2"
        android:id="@+id/row2"

        >

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher"
            android:background="@android:color/holo_blue_light"/>

         <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher"
            android:background="@android:color/holo_blue_light"/>



    </TableRow>


</TableLayout>

</RelativeLayout>

Answer 3

<LinearLayout 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <LinearLayout android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="2">
        <TextView />
        <TextView />
    </LinearLayout>
    <LinearLayout android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="2">
        <TextView />
        <TextView />
    </LinearLayout>
</LinearLayout>

Answer 4

Use weighted LinearLayouts - one horizontal and two vertical or vice versa.

You might get a warning that "nested linear layouts will effect performance" but that's for listviews or other scenarios with lots of layouts.

Here's a good source: Linear Layout and weight in Android

Answer 5

You can easily create this layout using weighted linear and relative layouts. Below, I provide a sample code of one of way doing it:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools" 
              android:orientation="vertical"
              android:id="@+id/root"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">

    <LinearLayout android:id="@+id/first_row"
                  android:layout_width="fill_parent" 
                  android:orientation="horizontal"
                  android:layout_height="0dip"
                  android:layout_weight="1"
                  android:baselineAligned="false">

          <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                        android:id="@+id/layout1"
                        android:orientation="vertical"
                        android:layout_weight="1"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        tools:ignore="NestedWeights">
         </RelativeLayout>

         <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                        android:id="@+id/layout2"
                        android:orientation="vertical"
                        android:layout_weight="1"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        tools:ignore="NestedWeights">
        </RelativeLayout>

    </LinearLayout>
    <LinearLayout android:id="@+id/second_row"
                  android:layout_width="fill_parent" 
                  android:orientation="horizontal"
                  android:layout_height="0dip"
                  android:layout_weight="1"
                  android:baselineAligned="false">

        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                        android:id="@+id/layout3"
                        android:orientation="vertical"
                        android:layout_weight="1"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        tools:ignore="NestedWeights">
        </RelativeLayout>

        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                        android:id="@+id/layout4"
                        android:orientation="vertical"
                        android:layout_weight="1"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        tools:ignore="NestedWeights">
        </RelativeLayout>

</LinearLayout>