Question

I am having trouble with a LinearLayout and weights in Android. I want a horizontal LinearLayout to hold 2 vertical LinearLayouts separated by a single View with a 9 patch background to be the separator between the 2 vertical LinearLayouts.

Like this: (outer box is the outer LinearLayout and the middle double line is my 9 patch separator.)

----------------------------
|    one    ||    three    |
|    two    ||    four     |
----------------------------

What keeps happening is the first inner LinearLayout displays with minimal width to display its content (as if it's width is wrap_content), then the rest of the space is taken up by the separator view stretched to fill the rest of the outer LinearLayout. The 2nd inner LinearLayout is not displaying at all.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="2" >    
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center_horizontal"
        android:layout_weight="1" >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="one" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="two" />
    </LinearLayout>

    <View
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@drawable/divider_vertical"
        android:layout_weight="0" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center_horizontal"
        android:layout_weight="1" >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="three" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="four" />
    </LinearLayout>

</LinearLayout>

What am I doing wrong here? I cannot figure out for the life of me why the middle View is taking up all of the space, leaving none for the second inner LinearLayout.

I can get it to work if I specify a specific px or dp width for the 9-patch view, but I really want it to work without having to specify this width. That way if I decide to change my 9-patch drawable, I won't have to manually update the width.

Was it helpful?

Solution

Try This layout

Updated Layout

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="one" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="two" />
</LinearLayout>

<View
    android:layout_width="1dp"
    android:layout_height="88dp"
    android:background="@android:color/darker_gray" />

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="three" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="four" />
</LinearLayout>

OTHER TIPS

Updtae here and try

<View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="@drawable/divider_vertical"
 />
  • Remove the weightSum="2" from parent LinearLayout.
  • Remove the android:layout_weight="0" from 9 patch view

How big is your 9 patch? the stretchable regions of a 9 patch are not shrinkable - the width of the asset's file will determine the minimum space it will try to take in your LinearLayout.

Set layout weights as below

keep in mind the weightSum of the parent by default it is set to the children's layout_weight sum

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    >    
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center_horizontal"
        android:layout_weight="3" >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="one" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="two" />
    </LinearLayout>

    <View
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@drawable/divider_vertical"
        android:layout_weight="1" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center_horizontal"
        android:layout_weight="3" >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="three" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="four" />
    </LinearLayout>

</LinearLayout>

certainly you can experiment with values for weigths

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top