LinearLayout with two children of equal width

Question

I'm having some issues getting two children of a LinearLayout to have the same width. This is what I am getting:

screenshot

And here is my layout xml for the grey box:

<LinearLayout 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="2"
    android:background="@color/medium_grey"
    >

    <ImageView 
        android:id="@+id/profile_photo"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:src="@drawable/placeholder_profile_photo"
        android:scaleType="fitCenter"
        android:contentDescription="@string/blank"
        android:layout_weight="1"
        />

    <LinearLayout 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_weight="1"
        android:layout_gravity="center_vertical"
        android:background="@color/alert"
        >

        <TextView
            android:id="@+id/profile_rate_header"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Rate User"
            />

        <LinearLayout 
            android:id="@+id/profile_action_rate_user"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_weight="1"
            android:gravity="center"
            >

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

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

        </LinearLayout>
    </LinearLayout>
</LinearLayout>

I was assuming that setting the layout_weight of the children of the root LinearLayout along with a weightSum and width of 0dp would produce the desired effect (image being the same size as the pink 'rate user' section) however this isn't the case.

What am I missing?

Edit:

This is what I want it to look like

enter image description here

The photo and the pink linear layout should be equal widths.

i did't get your problem completly @boz.plz tell, what is your desired output??? i can solve your weight problem. i think you should use weight insted of weightSum. — Rumit Patel, Jul 09 '13 at 04:46
possible duplicate of [Android: How to make all elements inside LinearLayout same size?](http://stackoverflow.com/questions/1177020/android-how-to-make-all-elements-inside-linearlayout-same-size) — Madan Sapkota, Jun 05 '15 at 07:02

score 40 · Accepted Answer · edited Feb 25 '17 at 15:04

40

android:weightSum="2" should be on the parent of the two children ImageViews, not on the upper parent. Or else try to set weightsas 0.5 and see if it works.

Also, the widths of the two image views should be android:layout_width="0dp" when using weights like this.

Next, scale up your images to fill space. Details here.

edited Feb 25 '17 at 15:04

Irshu

8,248
8
53
65

answered Jul 09 '13 at 08:23

Ken

30,811
34
116
155

Ok that made a bit of a difference. The image and the child `LinearLayout` are now similar widths but they aren't 50% of the parent. Here is a screenshot http://i.stack.imgur.com/UuFHp.png – boz Jul 09 '13 at 08:37
See edit. But your right image looks like it has not chance of being scaled as you wish unless you look at making it a 9-patch. – Ken Jul 09 '13 at 08:46
If I want to add third child that must be under the first one, but it is not? – IntoTheDeep Jun 08 '16 at 07:43
This answer isn't wrong, but really only changing the widths of the child views to 0dp is necessary. – Prime624 Feb 07 '19 at 05:02

dreamdeveloper · Answer 2 · 2014-08-26T11:05:03.723

24

Equally weighted children

To create a linear layout in which each child uses the same amount of space on the screen, set the android:layout_height of each view to "0dp" (for a vertical layout) or the android:layout_width of each view to "0dp" (for a horizontal layout). Then set the android:layout_weight of each view to "1". Refer : http://developer.android.com/guide/topics/ui/layout/linear.html

edited Aug 26 '14 at 11:05

answered Aug 26 '14 at 09:16

dreamdeveloper

1,266
1
15
20

Rumit Patel · Answer 3 · 2013-07-09T09:20:36.983

this is you want:

try this xml @boz:it will run in all size of layouts...!

<?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" >

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight=".50"
        android:background="@drawable/ic_launcher" >
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight=".50"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="33.33" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="33.33"
            android:background="@android:color/darker_gray" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="33.33" >
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

i take two linear layout with(50%,50%),and three child linear layout with(33.33%,33.33%,33.33%).among there three layouts, 2nd layout is your pinkone.

if still any query,plz ask.

score 1 · Answer 4 · answered Jul 08 '13 at 16:00

1

Remove the weight sum from your Parent View (@+id/profile_action_rate_user).

answered Jul 08 '13 at 16:00

Booger

18,579
7
55
72

score 0 · Answer 5 · answered Jul 09 '13 at 09:00

You can use something like this,hope this will fit your requirement. Try this xml .

<?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" >

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@color/Black"
        android:gravity="center"
        android:orientation="vertical" 
        android:layout_weight="0.5"
        >

        <TextView
            android:id="@+id/profile_rate_header"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Rate User"
            />

        <LinearLayout 
            android:id="@+id/profile_action_rate_user"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center"
            >

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

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

        </LinearLayout>
    </LinearLayout>

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

        <ImageView
            android:id="@+id/profile_photo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="fitCenter"
            android:src="@drawable/close" />

    </LinearLayout>

</LinearLayout>


</LinearLayout>

LinearLayout with two children of equal width

5 Answers5

Linked

Related