Android Layout Weight distribution

Question

I am doing the following course at udacity. It's about Android User Interface.

As a part of my course I used an XML visualizer.

http://labs.udacity.com/android-visualizer/#/android/linear-layout-weight

Now upon experimenting I entered the following code

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

    <ImageView
        android:src="@drawable/ocean"
        android:layout_width="wrap_content"
        android:layout_height="400dp"
        android:scaleType="centerCrop"
        android:layout_weight = "1"/>

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

    <TextView
        android:text="Bonfire at the beach"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:textSize="34sp"

        android:background="#009688" />

</LinearLayout>

as per my understanding, by using android:layout_weight the whole parent layout is divided as per priority and distributed accordingly, if so, the space after distributing among image and "You're invited!" there should only be remaining space enough, to fill out "Bonfire at the beach".

Then why there is a empty space below "Bonfire at the beach" ?

(Also if possible can anyone please explain how the control flows among XML code).

UPDATE
when I added android:layout_weight = "0" in "Bonfire at the beach" then there is no empty space below. Can any one explain why this happens and why there is space in previous case. and this is the code is used.

before

after

even tried setting height to 0dp

You are not using weight in the Bonfire at the beach TextView. If you use it, it will work. put height=0dp and weight=1 — Leandro Borges Ferreira, Dec 26 '16 at 16:18
add `android:layout_weight = "1"` property into second textview — Saurabh Bhandari, Dec 26 '16 at 16:22
yes but by default layout weight is value is 0 . and Yes i do understand that 0dp in height and weight to 1 works. What is want to know exactly is how the space is being distributed among the parent layout. and why reason why there is space below "Bonfire at the beach" — Srinadh kch, Dec 26 '16 at 16:22
Possible duplicate of [What is android:weightSum in android, and how does it work?](http://stackoverflow.com/questions/7452741/what-is-androidweightsum-in-android-and-how-does-it-work) — Charuක, Dec 26 '16 at 17:22

Charuක · Accepted Answer · 2016-12-27T15:49:50.393

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:

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

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

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 :)

Ok I got height to 0dp part but can u elaborate a bit regarding why there is space below "Bonfire at the beach". Thank you :) — Srinadh kch, Dec 26 '16 at 16:33
nd if you are wondering how the image is up there its in the available images down left. — Srinadh kch, Dec 26 '16 at 16:35
@Srinadh make your `LinearLayout` `android:weightSum=3` and use `android:layout_weight="1"` on two views and see — Charuක, Dec 26 '16 at 16:40
hmm . :( i added the line android:weightSum ="4" in root and even tried 3 t still remains the same. :( there is space below Bonfire at the beach. and also i set android:layout_height="0dp" for Bonfire at the beach but still the space appears. — Srinadh kch, Dec 26 '16 at 16:44
if i made android:layout_weight="1" in "Bonfire at the beach" then all the there children would divide the space equally. I am not getting the why empty space below part when weight = "0" (the default value). — Srinadh kch, Dec 26 '16 at 16:47
wait !! when i specified android:layout_weight="0" then there is no space appearing below. Hmm do you know the reason why it happens like so :( — Srinadh kch, Dec 26 '16 at 16:49
@Srinadh kch you got it right its default weight = "0" and 0 means don't allocate space — Charuක, Dec 26 '16 at 16:52
No i think there is something different in default value. As if I explicitly specify android:layout_weight = "0" then there is no space. but if not specified there appears a space below. — Srinadh kch, Dec 26 '16 at 17:00
@Srinadh kch ill show you the doc. Have you specified the root view for a weight_Sum ? take the edited xml of yours that i added and compare — Charuක, Dec 26 '16 at 17:02
@Srinadh kch yes exactly you gave the layout_weight for what `android:orientation=` its `vertical` so verticaly its now divided — Charuක, Dec 26 '16 at 17:11
@Srinadh but still you are not getting the way..why dont you read what i said in my answer here >"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." yet you have sizes like 400,100 — Charuක, Dec 26 '16 at 17:14
yes i even tried that 0dp for heights but still the problem is same — Srinadh kch, Dec 27 '16 at 14:52
@Srinadh kch can you re change the images of your currant status , may be i can explain then — Charuක, Dec 27 '16 at 15:02

Android Layout Weight distribution

1 Answers1