Layout weights in Android LinearLayout don't work properly

Question

I have a ListView that displays two items in a row. The View that displays one row has a LinearLayout as it's root:

<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="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal"
        android:paddingBottom="10dp"
        android:paddingTop="10dp">

        <LinearLayout
            android:id="@+id/layout1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/grey"
            android:gravity="center_vertical">

            <TextView
                android:id="@+id/textview1"
                style="@style/refinement_button"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:layout_margin="1dp"
                android:layout_weight="1"
                android:background="@color/white"/>
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal"
        android:paddingBottom="10dp"
        android:paddingTop="10dp">

        <LinearLayout
            android:id="@+id/layout2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/grey"
            android:gravity="center_vertical">

            <TextView
                android:id="@+id/textview2"
                style="@style/refinement_button"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:layout_margin="1dp"
                android:layout_weight="1"
                android:background="@color/white"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

In the editor in Android Studio I see

but on a device I see

(image recreated in editor, to save time)

I tried this on a Nexus6 with Android 7.0 and on a Nexus 5 with Android 6.0.1. I assume this is a bug in Android on the phones, or in the editor in Android Studio. The purpose of the editor is to show you what your layout looks like on a device.

I am not asking for advice on how to create a proper layout. My only point is that what shows up on my device is different from what I see in the editor in Android Studio and I wonder how come.

you are asking a question and answer it immediately yourself in the same minute....what´s the sense of this? — Opiatefuchs, Dec 11 '16 at 11:54
When you ask a question on stackoverflow, stackoverflow suggests you answer it immediately "Q&A style". I spent considerable time finding the solution, couldn't find the issue here, so I share it with others. — Christine, Dec 11 '16 at 13:07
@Opiatefuchs And here is an [example](http://stackoverflow.com/questions/23353173/unfortunately-myapp-has-stopped-how-can-i-solve-this) of such a case that you likely know. — Onik, Dec 11 '16 at 16:09
I am talking about the layout of list items which you presented in this question — Umar Ata, Dec 11 '16 at 18:36
Thank you for pointing that out. The root element was missing, I guess I didn't copy it properly. I replaced the layout with the one from my editor. Somehow I'm having issues pasting the code in the question. Now the last is missing. — Christine, Dec 11 '16 at 18:49
You are nesting LinearLayout , do you want the two textviews to be appear one in left and another in right then it could be possible in relative layout or in tablelayout — Umar Ata, Dec 11 '16 at 18:57
Yes, I know the alternatives. My only question here is "how can the layout that shows up in my editor be different from what shows up on my device. I have now edited the layout so it reflects what I actually have in my editor. Somehow copy and past from AS to here requires additional editing, I guess. — Christine, Dec 11 '16 at 19:00
LinearLayout is use to make views appear one after another linearly — Umar Ata, Dec 11 '16 at 19:00
Basically there is a button avaiable to switch between devices and apis available in Android Studio another you can't rely on editor preview there are many emulator to test code even for only the preview which almost same as a device — Umar Ata, Dec 11 '16 at 19:04
I am just advising you to use a perfect code which could very less in your case but its not presently and the AS preview sometimes get changed when you rebuild the project that might be the problem too — Umar Ata, Dec 11 '16 at 19:10

score 0 · Answer 1 · answered Dec 11 '16 at 11:33

0

The ListView is in a fragment, this is its layout:

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

<ListView
    android:id="@+id/product_list"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:divider="@null"
    android:layout_marginTop="30dp"
    android:fadingEdge="none"
    android:scrollingCache="false"/>

Changing the FrameLayout to a LinearLayout here solved my issue.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="vertical">

I would think that the weights in my layout elements would depend on the wrapping layout in the list row layout, as I see in my editor. However, the parent of that layout seems to matter on a device.

answered Dec 11 '16 at 11:33

Christine

5,617
4
38
61

You are actually wrong , there must be one root layout in any xml which in your case is two LinearLayout . You may read more here https://developer.android.com/guide/topics/resources/layout-resource.html – Umar Ata Dec 11 '16 at 18:20
Framelayout is used when you require the components to be appear in overlay of one to another just like a close button on imageview – Umar Ata Dec 11 '16 at 18:21
@Umar What? There is one root layout. What are you talking about? – Christine Dec 11 '16 at 18:35
Yes, I know about FrameLayouts. Woudn't the world be beautiful if all code we work with is our own code? – Christine Dec 11 '16 at 19:03
I am not got you? – Umar Ata Dec 11 '16 at 19:08
What? I don't follow you here. – Christine Dec 11 '16 at 21:11

Binil · Answer 2 · 2016-12-11T17:59:44.263

change the Layout to,

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:padding="10dp">

        <TextView
            android:id="@+id/textview1"
            style="@style/refinement_button"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@drawable/text_bg" />

        <TextView
            android:id="@+id/textview2"
            android:layout_weight="1"
            style="@style/refinement_button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@drawable/text_bg" />

</LinearLayout>

create a text_bg.xml file in drawable folder.

text_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="@color/white"/>
    <stroke android:color="@color/grey" android:width="1dp"/>

</shape>

Never use the unwanted 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"
    android:orientation="horizontal"
    android:padding="10dp">

    <TextView
        android:id="@+id/textview1"
        style="@style/refinement_button"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@drawable/text_bg" />

    <TextView
        android:id="@+id/textview2"
        android:layout_weight="1"
        style="@style/refinement_button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@drawable/text_bg" />

</LinearLayout>

Results from Genymotion # Samsung Galaxy Note 3 api 18 # Samsung Galaxy s6 api 21 # Google Nexus 7 api 23

I want to know one thing, in which device you have tested the code ?

How does that answer the question? What I saw is that the layout was correct in my Android Studio editor, but wrong on my devices. The problem still exists when I leave out the borders. Also, I don't agree with what you say about layouts. — Christine, Dec 11 '16 at 15:18
What you're showing is what I saw. In the editor, everything is ok. Just on my devices, they went wrong. Please read the question before you post answers. — Christine, Dec 11 '16 at 16:37
You should understand and try what others are answering here not to just downvote them. — Umar Ata, Dec 11 '16 at 18:23

Layout weights in Android LinearLayout don't work properly

2 Answers2