CODEWITHSUNDEEP
androidandroid-layoutandroid-linearlayoutandroid-layout-weight
fida1989
fida1989

Reputation: 3249

LinearLayout weightsum not working with image

I have a LinearLayout with weightSum 10 which has 2 child LinearLayout with layout_weight 4 and 6. It works fine when background is color or nothing. But the problem occurs when I set a background image. What can be the problem and solution?

Working code:

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

    android:weightSum="10" >

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="4"
        android:background="@color/Blue"
 >

    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="6"
        android:background="@color/new_back"
        android:orientation="vertical"
        android:weightSum="10" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="5"
            android:gravity="center"
            android:orientation="horizontal"
            android:weightSum="99" >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="33"
                android:gravity="center"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/idbtnCustomers"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/customer" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Chemist"
                    android:textColor="#000000" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="33"
                android:gravity="center"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/idbtnOrder"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/order" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Order"
                    android:textColor="#000000" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="33"
                android:gravity="center"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/idbtnItemStatus"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/item_status" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Item Status"
                    android:textColor="#000000" />
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="5"
            android:gravity="center"
            android:orientation="horizontal"
            android:weightSum="99" >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="33"
                android:gravity="center"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/idbtnNotification"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/notification" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Notification"
                    android:textColor="#000000" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="33"
                android:gravity="center"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/idbtnAttendance"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/attendance" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Attendance"
                    android:textColor="#000000" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="33"
                android:gravity="center"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/idbtnExpenceClaim"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/expence_clain" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Exp. Claim"
                    android:textColor="#000000" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

Problematic code:

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

    android:weightSum="10" >

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="4"
        android:background="@drawable/top_menu"
 >

    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="6"
        android:background="@color/new_back"
        android:orientation="vertical"
        android:weightSum="10" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="5"
            android:gravity="center"
            android:orientation="horizontal"
            android:weightSum="99" >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="33"
                android:gravity="center"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/idbtnCustomers"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/customer" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Chemist"
                    android:textColor="#000000" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="33"
                android:gravity="center"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/idbtnOrder"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/order" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Order"
                    android:textColor="#000000" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="33"
                android:gravity="center"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/idbtnItemStatus"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/item_status" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Item Status"
                    android:textColor="#000000" />
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="5"
            android:gravity="center"
            android:orientation="horizontal"
            android:weightSum="99" >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="33"
                android:gravity="center"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/idbtnNotification"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/notification" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Notification"
                    android:textColor="#000000" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="33"
                android:gravity="center"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/idbtnAttendance"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/attendance" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Attendance"
                    android:textColor="#000000" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="33"
                android:gravity="center"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/idbtnExpenceClaim"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/expence_clain" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Exp. Claim"
                    android:textColor="#000000" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

Upvotes: 0

Views: 2147

Answers (4)

J Jiang
J Jiang

Reputation: 1512

This is a common misunderstanding about layout_weight. Rather than divide the total space of parent view based on each item's weight, it is the Extra Space that is divided.

As the official document says about layout weight and I quote:

LinearLayout also supports assigning a weight to individual children with the android:layout_weight attribute. This attribute assigns an "importance" value to a view in terms of how much space is should occupy on the screen. A larger weight value allows it to expand to fill any remaining space in the parent view. Child views can specify a weight value, and then any remaining space in the view group is assigned to children in the proportion of their declared weight. Default weight is zero.

In your case, set the layout_height to 0dp means wrap_content, since the image is large enough, it occupies almost all the space of the parent view, which leads to no Extra space to be divided based on layout_weight. Since the wrap_content for pure color is just 1dp, it works fine since there is enough extra space.

To sum up, if you want the layout_weight to work like you expected, each view should be less than its weight of parent view.

To fix it, just wrap the weight=4 view into a new LinearLayout with weight set to 4.

Upvotes: 0

fida1989
fida1989

Reputation: 3249

Found the solution! The problem was with layout theme set in eclipse for that particular xml file. Theme was set to Theme.NoTitleBar in that xml file. I switched it to default AppTheme which is Theme.Light, now it works. :)

Upvotes: 0

Martin Marconcini
Martin Marconcini

Reputation: 27226

You need to understand how weight works. Weight will assign remaining space after the measure has been passed. If your image is wrapping its contents and it uses all the space, the remaining unused space (none) will be distributed based on weights. You have to adjust your containers and read about Linear Layout weight.

Upvotes: 1

Bhanu Sharma
Bhanu Sharma

Reputation: 5145

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="4"
        android:background="@drawable/ic_launcher" >
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="6"
        android:background="#000000"
        android:orientation="vertical"
        android:weightSum="10" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="5"
            android:gravity="center"
            android:orientation="horizontal"
            android:weightSum="99" >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="33"
                android:gravity="center"
                android:orientation="vertical" >

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

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Chemist"
                    android:textColor="#000000" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="33"
                android:gravity="center"
                android:orientation="vertical" >

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

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Order"
                    android:textColor="#000000" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="33"
                android:gravity="center"
                android:orientation="vertical" >

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

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Item Status"
                    android:textColor="#000000" />
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="5"
            android:gravity="center"
            android:orientation="horizontal"
            android:weightSum="99" >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="33"
                android:gravity="center"
                android:orientation="vertical" >

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

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Notification"
                    android:textColor="#000000" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="33"
                android:gravity="center"
                android:orientation="vertical" >

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

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Attendance"
                    android:textColor="#000000" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="33"
                android:gravity="center"
                android:orientation="vertical" >

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

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Exp. Claim"
                    android:textColor="#000000" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

Upvotes: 0

Related Questions