Android: LinearLayout going out of screen when using weight

Question

Why is 3rd linear layout (containg two text views) being pushed out of screen in following xml file? Simultaneous design in Android Studio is showing expected behaviour but when testing in phone, 3rd linear layout is being partially visible.

What I am trying to achieve is dividing screen into 3 parts (10%, 80% and 10%).

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/messageTextView"
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:layout_weight="3"
        android:text="Place a stone" />

    <Button
        android:id="@+id/resetButton"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:text="Reset" />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="8">

    <me.varunon9.fito.CanvasBoardView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/userInfoTextView"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:background="@drawable/focussed_background"
        android:text="Your turn\nStones left: 9" />

    <TextView
        android:id="@+id/computerInfoTextView"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:text="Computer's turn\nStones left: 9" />

</LinearLayout>

Even this xml is also being pushed out of screen-

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:id="@+id/topBar"
        android:orientation="horizontal"
        android:layout_alignParentTop="true">

        <TextView
            android:id="@+id/messageTextView"
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:text="Place a stone" />

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="40dp"
        android:layout_marginBottom="40dp"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:id="@+id/bottomBar"
        android:layout_marginBottom="0dp"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true">

        <TextView
            android:id="@+id/userInfoTextView"
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:text="User Info" />
    </LinearLayout>

</RelativeLayout>

I am using Fragment (Tabbed Activity). When using same xml layout (above snippets) in activity, things are working fine. Problem seems with Fragment.

Have you tried using weightSum for all parent level layouts? — ABS, Aug 21 '17 at 18:46
Also, using nested weights is strongly discouraged. It is bad for performance. — ABS, Aug 21 '17 at 18:47
adding android:weightSum="10" to parent layout is not working. Any suggestion to achive desired behaviour (dividing screen into proportional height) ? — Varun Kumar, Aug 21 '17 at 18:51
Why not use relative layout and align things appropriately. For example: set bottom bar and top bar fixed height, alignParentBottom and alignPatentTop respectively, and then use the center canvas with bottom margin = bottom bar height and top margin = top bar height. — ABS, Aug 21 '17 at 18:55
Ok, I created a sample with Relative layout and posted as an answer. This feels quite correct to me. — ABS, Aug 21 '17 at 19:01

score 1 · Answer 1 · answered Aug 21 '17 at 19:02

To avoid nested weights (bad for performance), you can use Relative layout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:id="@+id/topBar"
        android:orientation="horizontal"
        android:layout_alignParentTop="true"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="40dp"
        android:layout_marginBottom="40dp"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:id="@+id/bottomBar"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"/>
</RelativeLayout>

Are you able to see the height of layout in the monitor tool? You can use android monitor to check how layout is actually placed. If you find something interesting, please post it. — ABS, Aug 24 '17 at 01:00
It can't show expected behavior. You need to capture the view hierarchy from the device. It will look exactly same on the monitor tool. — ABS, Aug 24 '17 at 14:48

Ajil O. · Answer 2 · 2017-08-22T11:59:08.673

Instead of using nested weights, which happen to be terribly bad for performance, use ConstraintLayout which is very easy to implement in the layout editor.

If you have never used it before it can appear to be a bit complicated; but that is not the case. Refer to this link to get an idea on how to implement a ConstraintLayout.

Here is the code for what you want to achieve

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <android.support.constraint.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.1"
        tools:layout_editor_absoluteY="51dp"
        tools:layout_editor_absoluteX="0dp" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.9"
        tools:layout_editor_absoluteY="460dp"
        tools:layout_editor_absoluteX="0dp" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5"
        tools:layout_editor_absoluteY="0dp"
        tools:layout_editor_absoluteX="192dp" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.75"
        tools:layout_editor_absoluteY="0dp"
        tools:layout_editor_absoluteX="288dp" />

    <TextView
        android:id="@+id/stoneTV"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:text="@string/stoneText"
        app:layout_constraintBaseline_toBaselineOf="@+id/resetButton"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/guideline4"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp" />

    <Button
        android:id="@+id/resetButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:text="@string/reset_text"
        app:layout_constraintBottom_toTopOf="@+id/guideline1"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="@+id/guideline4"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.64"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="24dp" />

    <TextView
        android:id="@+id/playerTV"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/player_text"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
        app:layout_constraintTop_toTopOf="@+id/guideline2"
        android:layout_marginTop="8dp"
        app:layout_constraintRight_toLeftOf="@+id/guideline3"
        android:layout_marginRight="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintHorizontal_bias="0.0" />

    <TextView
        android:id="@+id/computerTV"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/computer_text"
        app:layout_constraintTop_toTopOf="@+id/guideline2"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="@+id/guideline3"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp" />

    <FrameLayout
        android:id="@+id/contentLayout"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/guideline2"
        app:layout_constraintTop_toTopOf="@+id/guideline1"
        android:layout_marginTop="8dp">

        <!--Add your other view(s) here-->

    </FrameLayout>
</android.support.constraint.ConstraintLayout>

Thank you. I removed nested weight. See my edited question. Even though it is not working. ConstraintLayout will be last option. — Varun Kumar, Aug 22 '17 at 14:54

score 0 · Accepted Answer · answered Aug 25 '17 at 06:48

Found it! Problem was not with fragment layout but its container, i.e. ViewPager. I am using Tabbed Activity and by default View Pager was too long (going out of screen). Here is the solution: Android Tabbed Activity Bottom off Screen

Thanks for effort guys.

score -1 · Answer 4 · answered Aug 21 '17 at 19:02

Hiiii I think you don't have proper info, how to use "Weightsum". well no issue, i will explain you, When you want to use "Weight" in linear layout you should use "Weightsum" in your main "LinearLayout" after that you can use sub layout or widgets in sum of weight like below code.

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

    <TextView
        android:id="@+id/messageTextView"
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:layout_weight="0.5"
        android:text="Place a stone" />

    <Button
        android:id="@+id/resetButton"
        android:layout_height="match_parent"
        android:layout_weight="0.5"
        android:layout_width="0dp"
        android:text="Reset" />

</LinearLayout>

WeightSum is optional. Even adding weightSum, it's not working. — Varun Kumar, Aug 22 '17 at 05:10

Android: LinearLayout going out of screen when using weight

4 Answers4