android ConstraintLayout height percentage 0.99

Question

When app:layout_constraintHeight_percent is 0.50 or 0.80 it works fine, but when I set it to 0.99 , the Button go very long and larger than 99% of screen ?

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fillViewport="true"
    android:orientation="vertical">


    <android.support.constraint.ConstraintLayout
        android:orientation="vertical"
        android:background="@color/sos"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


        <Button
            android:id="@+id/mybtn1"
            android:text="1"
            android:layout_width="match_parent"
            app:layout_constraintHeight_percent="0.99"
            android:layout_height="0dp" />

        <Button
            app:layout_constraintTop_toBottomOf="@+id/mybtn1"
            android:text="2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />


    </android.support.constraint.ConstraintLayout>



</ScrollView>

newbieCoder.pkg · Answer 1 · 2018-09-24T16:09:38.197

This should work;

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

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">

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

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <Button
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="Button 1" />

            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <Button
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="Button 2" />

            </RelativeLayout>

        </LinearLayout>

    </ScrollView>

</LinearLayout>

because I want a 99% button with another button at bottom of first button and user scroll view to see second button — beginner, Sep 24 '18 at 15:30
You want the first button to occupy the entire screen and when the user scrolls down the second button shows up? — newbieCoder.pkg, Sep 24 '18 at 15:33
Answer edited, You should really rephrase the question because is barely understandable. — newbieCoder.pkg, Sep 24 '18 at 16:10

score 0 · Answer 2 · answered Sep 25 '18 at 10:39

Try out this code:

<?xml version="1.0" encoding="utf-8"?>

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <android.support.constraint.ConstraintLayout
        android:background="@android:color/holo_blue_dark"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/btn_one"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintHeight_percent="0.91"
            android:text="1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

        <Button
            android:id="@+id/btn_two"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="2"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/btn_one"
            app:layout_constraintVertical_bias="0.0"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />

    </android.support.constraint.ConstraintLayout>

</ScrollView>

I hope it helps you.

This is the most suitable code (as per me) that I wrote as to fulfill your use case. — Nitin Gurbani, Sep 25 '18 at 10:49

score 0 · Answer 3 · answered Sep 26 '18 at 15:04

The problem is not with the 99% layout_constraintHeight_percent but when the combined height of the two buttons exceeds the height the on-screen height of the ScrollView. It just happens that 99% triggers this wayward behavior on your emulator/device. If you make the second button much taller, you will see the same behavior with smaller percentages.

I have found these types of layouts to be problematic where a child's measurements depend upon the size of the parent and the parent size depends upon the size of the child. In your layout, the child mybtn1 depends upon the parent ConstraintLayout (app:layout_constraintHeight_percent="0.99") while the parent ConstraintLayout depends upon the size of the child mybtn1 (android:layout_height="wrap_content"). This seems to work OK when the combined heights of the two buttons do not exceed the on-screen height of the ScrollView but fails miserably when the combined heights do exceed it. (Setting android:fillViewport="true" on the ScrollView when the combined heights are less than the ScrollView height may work because there is an implicit fixed height to the ScrollView which is just the available real estate on the screen. This is just conjecture, though.)

You can fix this with a little coding as follows:

Add an id to the ScrollView:

android:id="@+id/scrollView"

Place the following code in onCreate():

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    final ScrollView scrollView = findViewById(R.id.scrollView);
    scrollView.post(new Runnable() {
        @Override
        public void run() {
            Button button = findViewById(R.id.mybtn1);
            ConstraintLayout.LayoutParams lp = (ConstraintLayout.LayoutParams) button.getLayoutParams();

            // Get percentage height of button.
            float percent = lp.matchConstraintPercentHeight;

            // Explicitly set the button height based upon the ScrollView height.
            button.setHeight((int) (scrollView.getHeight() * percent));

            // Reset the percent height so it no longer has any effect.
            lp.matchConstraintPercentHeight = 1.0f;
        }
    });
}

This code will force a size on mybtn1 that is 99% of the ScrollView height or whatever percentage is specified for the button.

android ConstraintLayout height percentage 0.99

3 Answers3

Linked