CODEWITHSUNDEEP
androidandroid-layoutandroid-linearlayoutandroid-viewandroid-layout-weight
jricky6
jricky6

Reputation: 3

Android LinearLayout and weights issue

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.

Upvotes: 0

Views: 1439

Answers (5)

karan
karan

Reputation: 8843

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

Upvotes: 0

FunkTheMonk
FunkTheMonk

Reputation: 10938

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.

Upvotes: 0

Renjith
Renjith

Reputation: 5803

  • Remove the weightSum="2" from parent LinearLayout.
  • Remove the android:layout_weight="0" from 9 patch view

Upvotes: 0

Biraj Zalavadia
Biraj Zalavadia

Reputation: 28484

Updtae here and try

<View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="@drawable/divider_vertical"
 />

Upvotes: 0

Developer
Developer

Reputation: 6350

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>

Upvotes: 1

Related Questions