How to make a complex Layout in Android

Posted by Shoaib at 11:17:00 am Read our previous post

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="2"
     tools:context=".MainActivity">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:weightSum="3"
        android:layout_weight="1"
        android:background="#BA2610"
        android:orientation="vertical"
        android:layout_gravity="center">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:weightSum="9"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:orientation="horizontal"
            android:layout_gravity="center">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:weightSum="5"
                android:layout_weight="5"
                android:background="#07A7F7"
                android:layout_margin="2dp"
                android:orientation="vertical"
                android:layout_gravity="center">
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:weightSum="2"
                android:layout_weight="4"
                android:background="#FFFFFF"
                android:padding="2dp"
                android:orientation="horizontal"
                android:layout_gravity="center">
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:weightSum="5"
                    android:layout_weight="1"
                    android:layout_margin="1dp"
                    android:padding="1dp"
                    android:background="#07A7F7"
                    android:orientation="vertical"
                    android:layout_gravity="center">
                </LinearLayout>
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:weightSum="5"
                    android:layout_margin="1dp"
                    android:layout_weight="1"
                    android:background="#07A7F7"
                    android:orientation="vertical"
                    android:layout_gravity="center">
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="9"
            android:background="#FFFFFF"
            android:padding="3dp"
            android:orientation="horizontal"
            android:layout_gravity="center">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="5"
                android:background="#07F74F"
                android:orientation="vertical"
                android:layout_margin="2dp"
                android:layout_gravity="center">
            </LinearLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="4"

                android:background="#1F1F1F"
                android:layout_margin="2dp"
                android:orientation="vertical"
                android:layout_gravity="center">
            </LinearLayout>




        </LinearLayout>

    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:weightSum="9"
        android:background="#FFFFFF"
        android:orientation="horizontal"
        android:layout_gravity="center">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="5"
            android:weightSum="5"
            android:layout_margin="5dp"
            android:background="#FFFFFF"
            android:orientation="vertical"
            android:layout_gravity="center">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="3"
                android:weightSum="1"
                android:layout_margin="3dp"
                android:background="#FFF1"
                android:orientation="vertical"
                android:layout_gravity="center">
            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="2"
                android:weightSum="1"
                android:layout_margin="5dp"
                android:background="#34352A"
                android:orientation="vertical"
                android:layout_gravity="center">
            </LinearLayout>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="4"
            android:weightSum="5"
            android:background="#FFFFFF"
            android:orientation="vertical"
            android:layout_gravity="center">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="3"
                android:weightSum="2"
                android:layout_margin="5dp"
                android:background="#FFFFFF"
                android:orientation="vertical"
                android:layout_gravity="center">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:weightSum="1"
                    android:layout_margin="5dp"
                    android:background="#F61E"
                    android:orientation="vertical"
                    android:layout_gravity="center">
                </LinearLayout>
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:weightSum="1"
                    android:layout_margin="5dp"
                    android:background="#F61EF6"
                    android:orientation="vertical"
                    android:layout_gravity="center">
                </LinearLayout>

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="2"
                android:weightSum="2"
                android:background="#FFFFFF"
                android:orientation="horizontal"
                android:layout_gravity="center">

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:weightSum="2"
                    android:background="#FFFF12"
                    android:layout_margin="5dp"
                    android:padding="50dp"
                    android:orientation="horizontal"
                    android:layout_gravity="center">
                </LinearLayout>
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="#6760A4"
                    android:layout_margin="2dp"
                    android:padding="2dp"
                    android:orientation="horizontal"
                    android:layout_gravity="center">
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

Difference between weightSum vs weight:

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:weightSum="2"
                android:background="#FFFFFF"
                android:orientation="horizontal"
                android:layout_gravity="center">

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:weightSum="2"
                    android:background="#FFFF12"
                    android:layout_margin="5dp"
                    android:padding="50dp"
                    android:orientation="horizontal"
                    android:layout_gravity="center">
                </LinearLayout>
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="#6760A4"
                    android:layout_margin="2dp"
                    android:padding="2dp"
                    android:orientation="horizontal"
                    android:layout_gravity="center">
                </LinearLayout>
           </LinearLayout>

down voteaccepted


It is better to explain with an example.

I  have  taken a LinearLayout with horizontal orientation and divided it into 2 parts (android:weightSum="2").  Then I have declared each of their space(android:layout_weight="1"). 

Both of nested layout is taking 1: 1 space. It's very easy to understand