Android Layout - layoutweight and weightsum

Question

I need to build a layout with the set of linear layouts. The layout has to occupy a defined percentage of the screen. I need to do this to have a similar look in all the devices.

Issue:

I have a textview in the top right layout (green color box ). Whenever I add some data in the textview it disturbs the entire layout as shown below in the 2nd image. But I need to have the data wraps automatically when it reaches the right end of the screen/layout.

Please help me to resolve this. Thanks In Advance

Image1 - Graphical view as per the XML shown below

enter image description here

Image2 - Shows how the layout automatically changes, when I add some data in the textView

enter image description here

xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/background"
android:orientation="vertical" 
android:weightSum="100">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" 
    android:orientation="horizontal" 
    android:layout_weight="91"
    android:weightSum="100">

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:orientation="vertical" 
                        android:layout_weight="40"
                        android:weightSum="235">

                                                    <LinearLayout
                                                        android:layout_width="match_parent"
                                                        android:layout_height="match_parent" 
                                                        android:orientation="vertical"  
                                                        android:gravity="center"
                                                        android:background="#ff0000"
                                                        android:layout_weight="100">

                                                                                    <TextView
                                                                                        android:id="@+id/textView1"
                                                                                        android:layout_width="wrap_content"
                                                                                        android:layout_height="wrap_content"
                                                                                        android:textColor="#000000" />

                                                    </LinearLayout>

                                                    <LinearLayout
                                                        android:layout_width="match_parent"
                                                        android:layout_height="match_parent" 
                                                        android:orientation="vertical"   
                                                        android:background="#ffff00"
                                                        android:layout_weight="45">   



                                                                                    <ViewFlipper
                                                                                        android:id="@+id/view_flipper"
                                                                                        android:layout_width="match_parent"
                                                                                        android:layout_height="match_parent"
                                                                                        android:layout_below="@+id/tvItemName" >


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



                                                    </LinearLayout>

                                                    <LinearLayout
                                                        android:layout_width="match_parent"
                                                        android:layout_height="match_parent" 
                                                        android:orientation="vertical"  
                                                        android:background="#ffffff"
                                                        android:layout_weight="90">   


                                                    </LinearLayout> 

                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:orientation="vertical" 
                        android:layout_weight="60"
                        android:weightSum="100">

                                                    <LinearLayout
                                                        android:layout_width="match_parent"
                                                        android:layout_height="match_parent" 
                                                        android:orientation="vertical"   
                                                        android:layout_weight="30"
                                                        android:background="#00ab00"
                                                        android:weightSum="100"> 

                                                                                    <TextView
                                                                                        android:id="@+id/textView1"
                                                                                        android:layout_width="match_parent"
                                                                                        android:layout_height="fill_parent"
                                                                                        android:textColor="#000000"
                                                                                        android:text="Test data" />

                                                    </LinearLayout>

                                                    <LinearLayout
                                                        android:layout_width="match_parent"
                                                        android:layout_height="match_parent" 
                                                        android:orientation="vertical" 
                                                        android:background="#cd00ab" 
                                                        android:layout_weight="70"> 

                                                    </LinearLayout>

                    </LinearLayout>

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" 
    android:background="#ab0000"
    android:layout_weight="9">

</LinearLayout>

</LinearLayout>

score 9 · Answer 1 · answered Mar 29 '13 at 04:24

9

Start your layout_width or layout_height as 0dp instead of wrap_content. (If it's in a vertical layout, layout_height should be 0dp; if it's in a horizontal layout, layout_width should be 0dp)

The layout_weight describes how to divide the remaining space after the layout_widths/layout_heights have been assigned.

Note that wrap_content doesn't mean "make the text wrap"; it means set that dimension to the "preferred" dimension of the view.

answered Mar 29 '13 at 04:24

Scott Stanchfield

29,742
9
47
65

I am still unable to resolve this. I would be helpful if you can guide me to correct the xml. Your help will be appreciated much – iappmaker Mar 29 '13 at 04:41
I agree with `If it's in a vertical layout, layout_height should be 0dp; if it's in a horizontal layout, layout_width should be 0dp`. Have you found any counterexample for this yet? – Attacktive Sep 03 '15 at 01:42
1

@Suzi - A counterexample would be a case where you want to make sure a component always has a certain minimum amount of space. If you have two components where seeing one is always more important than seeing the other, this may be helpful. However, that means you're thinking about the components being in an area where both might not be visible, and you should really consider a different UI approach, perhaps a ScrollView, tabs, or separate activities/fragments. – Scott Stanchfield Sep 08 '15 at 19:57

SKK · Accepted Answer · 2013-03-29T06:05:03.777

Use this XML file. I have made the changes for you.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/background"
android:orientation="vertical"
android:weightSum="100" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="91"
    android:orientation="horizontal"
    android:weightSum="100" >

    <!-- Below is the first modification to layout_width -->

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="40"
        android:orientation="vertical"
        android:weightSum="235" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="100"
            android:background="#ff0000"
            android:gravity="center"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#000000" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="45"
            android:background="#ffff00"
            android:orientation="vertical" >

            <ViewFlipper
                android:id="@+id/view_flipper"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@+id/tvItemName" >

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="90"
            android:background="#ffffff"
            android:orientation="vertical" >
        </LinearLayout>
    </LinearLayout>

    <!-- Below is the second modification to layout_width -->

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="60"
        android:orientation="vertical"
        android:weightSum="100" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="30"
            android:background="#00ab00"
            android:orientation="vertical"
            android:weightSum="100" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="match_parent"
                android:layout_height="fill_parent"
                android:text="Test data Test dataTest dataTest dataTest dataTest dataTest dataTest dataTest dataTest dataTest dataTest dataTest dataTest dataTest dataTest dataTest dataTest dataTest data"
                android:textColor="#000000" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="70"
            android:background="#cd00ab"
            android:orientation="vertical" >
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="9"
    android:background="#ab0000" >
</LinearLayout>

</LinearLayout>

It looks fine to me. check out the below snapshot.

Check my edited answer. Try it and let me know. A linearlayout's start and end tag was missing when i pasted. — SKK, Mar 29 '13 at 06:09
Thanks.. it is fine now.. the text is not scaling up in different sizes. any pointers please. I do not want a separate layout for different devices http://picpaste.com/4-CY0Qb7o0.png — iappmaker, Mar 29 '13 at 06:18
android:textSize ="XXsp" here XX is some numerical value. a single layout cannot fit all devices. its upto you. and if you have found my answer useful mark it as accept. happy coding. — SKK, Mar 29 '13 at 06:25

Android Layout - layoutweight and weightsum

Issue:

Image1 - Graphical view as per the XML shown below

Image2 - Shows how the layout automatically changes, when I add some data in the textView

xml

2 Answers2

Linked