Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

android: simple LinearLayout and fill_parent question

I'm sure I am missing something simple...

Background:

I am new to android and UI design, and I just wanted to play around with layouts. Right now I want to stack a checkbox on top of text label. I am using the following xml layout which works fine:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <CheckBox android:id="@+id/check_box"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/check_box_text" />

    <TextView android:id="@+id/dummy_display"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/dummy_label" />

</LinearLayout>

My Tests (just to get a feel for how things works):

  • Scenario 1) When I set the CheckBox's layout_height to "fill_parent", the CheckBox takes up the whole screen and is aligned center (i.e. - the TextView disappears).

  • Scenario 2) If I instead set the TextView's layout_height to "fill_parent", the CheckBox does NOT disappear. In fact, nothing disappears, and the layout looks the same as the above xml where everything is pushed to the top-left.

The Question (and comments):

How come Scenario 1 works the way it works?

This behavior seems inconsistent to me. I thought that fill_parent is only supposed to let the element fill up whatever space is available in the parent. So to me, it seems that the TextView should get whatever space it needs (since it is wrap_content), but the CheckBox should take up the rest of the space (so the TextView would be forced to the bottom of the screen, but not invisible). In other words... Scenario 2 makes sense to me, but scenario 1 does not.

Please explain :-).

Thanks,

Tom

like image 383
Tom Avatar asked Dec 24 '09 13:12

Tom


1 Answers

LinearLayout measures it children as a single step one by one, so in your first example it sees that first child want to have all available height it gives it to it. In your second example it gives all available place to the second child. If you want checkbox to take all the place except place needed for text box you should change layout_height of checkbox to wrap_parent and set layout_weight property of each child, layout weight indicates how much of available place after all children were measured should be add to the each of them. To be more specific the way it works by steps:
1) Parent of LinearLayout tells linear layout how big it can be
2) LinearLayout asks all it children in order they specified about their layout params and distributes available space.
3) If any free space is still available it distributes it between children according to their weight's ( layout weight is between 0 and 1 , 0 - by default)
Hope it helps
Edit:
I've checked LinearLayout source code and found out what if a linear layout had a FILL_PARENT layout params and not zero weight measuring code will set layout height to WRAP_CONTENT and later distribute space between all children according to weights.

like image 170
Nikolay Ivanov Avatar answered Nov 10 '22 01:11

Nikolay Ivanov