Linear Layout and Weight in Android

Linear Layout and weight in Android

You are not setting the layout_weight property. Your code reads weight="1" and it should read android:layout_weight="1".

Creating a linearlayout with weights

EDIT working example now

This is not a complete answer because the vertical dividers are still not working, but hopefully it gets you going in the right direction:

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="4"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textDishes"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Dishes"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <ImageView
        android:id="@+id/imageDishes"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />
</LinearLayout>

<View
    android:layout_width="match_parent"
    android:layout_height="5dp"
    android:background="@color/red" />

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="2"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textfood"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Food"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <ImageView
            android:id="@+id/imagefood"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

    <View
        android:layout_width="5dp"
        android:layout_height="fill_parent"
        android:background="@color/red"
        android:gravity="center" >
    </View>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textMalls"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Malls"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <ImageView
            android:id="@+id/imageMalls"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>
</LinearLayout>

<View
    android:layout_width="match_parent"
    android:layout_height="5dp"
    android:background="@color/red" />

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="App name"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

    <View
        android:layout_width="5dp"
        android:layout_height="fill_parent"
        android:background="@color/red"
        android:gravity="center" >
    </View>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Coupons"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

    <View
        android:layout_width="5dp"
        android:layout_height="fill_parent"
        android:background="@color/red"
        android:gravity="center" >
    </View>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Markets"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>
</LinearLayout>

Sample Image

Android Layout Weight distribution

Understand it using the below example

Weight defines how much space a view will consume compared to other views within a LinearLayout.

Weight is used when you want to give specific screen space to one component compared to other.

Key Properties:

weightSum is the overall sum of weights of all child views. If you don't specify the weightSum, the system will calculate the sum of all the weights on its own.
layout_weight specifies the amount of space out of the total weight sum
the widget will occupy.

Code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:weightSum="4">

    <EditText
        android:layout_weight="2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Type Your Text Here" />

    <Button
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Text1" />

    <Button
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Text1" />

</LinearLayout>

The output is:

Sample Image

Now even if the size of the device is larger, the EditText will take 2/4 of the screen's space. Hence the look of your app is seen consistent across all screens.

[This if before you edit your question might be irrelevant now

Now in your Bonfire at the beach there is no weight and its wrap_content so there is no grantee that it will take the remaining space! and that space can remain after adding it will differ with the screen size of device ]

Note:
Here the layout_width is kept 0dp as the widget space is divided horizontally. If the widgets are to be aligned vertically layout_height will be set to 0dp.

This is done to increase the efficiency of the code because at runtime the system won't attempt to calculate the width or height respectively as this is managed by the weight. If you instead used wrap_content the system would attempt to calculate the width/height first before applying the weight attribute which causes another calculation cycle.

Lets Move to your XML
see how i used them

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:weightSum="3"   //<-------------------
    android:layout_height="match_parent">

    <ImageView
        android:src="@drawable/mc"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        android:layout_weight = "1"/> //<-------------------

    <TextView
        android:text="You're invited!"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:textColor="@android:color/white"
        android:textSize="54sp"
        android:layout_weight = "1" //<-------------------
        android:background="#009688" />

    <TextView
        android:layout_weight = "1" //<------------------- if you remove this , this text view will be gone cuz its 0 by default
        android:text="Bonfire at the beach"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:textColor="@android:color/white"
        android:textSize="34sp"
        android:background="#009688" />

</LinearLayout>

Now you ask what if you have not given android:layout_weight ,Default weight is zero. Zero means view will not be shown, that empty space will remain there

Since you don't believe you can read the documentation
Sample Image

EDIT: 2

Since you said that, i went through android-visualizer that you use
and Have you ever noticed this...

"Line 6: The attribute android:weight_sum is not supported here."

thing on its bottom.

Meaning they are not providing that functionality to adjust your layout boundaries. Its just a simple online tool.I am
not saying it is not recommended to use, but my personal idea is, you
can't touch the depth of android if you use that.

Now if you want a confirmation what actually happens have a look on android studio/ eclipse as well which are read IDE s

This is android studio

Sample Image

Can you see any view contain your text "Bonfire at the beach"? no
Instead a.studio display a red line in XML.

Suspicious size: this will make the view invisible

Because there is no layout_weight is given and we have added 0 height

Now you can accept the answer :)

Linear Layout with Weights and Scroll View

If you have a determined number of 6 Monsters and 8 Towers, here is how you should organize your layout:

    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Monsters"/>

            <!-- the following LinearLayout should be repeated twice for 6 Monsters -->

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

                <MonsterView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />

                <MonsterView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />

                <MonsterView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />

            </LinearLayout>

            ...


            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Towers"/>        

            <!-- the following LinearLayout should be repeated twice for 6 Towers -->

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

                <TowerView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />

                <TowerView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />

                <TowerView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />

            </LinearLayout>

            ...


            <!-- attention here for two Towers in the last row -->        

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

                <TowerView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />

                <TowerView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />

            </LinearLayout>

        </LinearLayout>
    </ScrollView>

Android: layout_weight not working with Button and LinearLayout

There are a lot of different layouts you could use to achieve the design you want. This is an approach you could use by changing the outer Layout element from LinearLayout to RelativeLayout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/linearlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_toStartOf="@+id/button"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Header" />

        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:text="Button" />
</RelativeLayout>

Note you only need to add the attributes:

android:layout_alignParentStart="true"
android:layout_toStartOf="@+id/button"

to the inner LinearLayout and add this attribute to the Button view:

android:layout_alignParentEnd="true"

You can add Margin attributes to give the views some extra room.

Android Layout Weight

It doesn't work because you are using fill_parent as the width. The weight is used to distribute the remaining empty space or take away space when the total sum is larger than the LinearLayout. Set your widths to 0dip instead and it will work.

LinearLayout Weight works wrong

When using weights on a LinearLayout, you must take care of the weightSum value. By default it's 1, and in layout_weight you can have float values if you require it. Children should specify layout_weight value, and layout_width or layout_height must be 0dp, depending on the orientation of the parent.
It's a bit strange you didn't fixed it by yourself, because Android Studio automatically warns you.
Anyway, below you find the fixed layout. Let me know if it works for you.

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/colorPrimary"
        android:layout_weight="8">
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="#FFFFFF"
        android:layout_weight="2">
    </RelativeLayout>

</LinearLayout>

Also, I replaced fill_parent with match_parent, because if you used it, it means you are developing for API Level 8+, so you should use "match_parent" (it has been replaced, but value remains the same "-1").

Linear Layout and Weight in Android