android / codelab-constraint-layout

Constraint Layout Codelab
https://codelabs.developers.google.com/codelabs/constraint-layout/
Apache License 2.0
469 stars 243 forks source link

Problem of adjustable Scrollview inside ConstraintLayout #101

Open aquagray opened 2 years ago

aquagray commented 2 years ago

When there's scrollview inside constraintlayout (that does not have height=match_parent), scrollview height behaves buggy.

Layout in question:

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

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/popup_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:background="@color/purple_200"
    >

    <!--      Button to close the popup. -->
    <Button
        android:id="@+id/close_popup_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BUTTON"
        android:textAlignment="center"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

    <TextView
        android:id="@+id/popup_header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Popup window"
        android:textAlignment="center"
        app:layout_constraintStart_toEndOf="@id/close_popup_button"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        style="@style/LargeFont" />
    >

    <ScrollView
        android:id="@+id/scroll_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@android:color/white"
        android:padding="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/close_popup_button">
        <!--        android:fillViewport="true"-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:id="@+id/main_properties"
                style="@style/MediumFont"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="properties"
                android:textColor="@android:color/black"
                android:textStyle="italic" />

            <!--      Texts that can bet really long or pretty short. Hoping scrollview/Csl will be adjusted accordingly. -->
            <TextView
                android:id="@+id/family_info_list"
                style="@style/SmallFont"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/longtext"
                android:textColor="@android:color/black" />

        </LinearLayout>
    </ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

In this layout, Scrollview cannot scroll to the bottom of the text.

There's no way to make scrollview flexible. (Idea: Scroll view height is flexible that only if there's long content it fills the screen.)

Tried: 1) scrollview 0dp height makes scrollview not visible. 2) scrollview wrap_content height make it visible, but then it won't scroll all the way to the bottom. (It misses text at the end, due to being pushed by button height) (It also pushes to the top weirdly as well, invading space for button) 3) scrollview match_parent height overlaps Button. (tho it does fix the issue of unable to scroll to the bottom)

4) using relative layout instead :P

Result needed was achievable thru RelativeLayout:

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

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

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/teal_200"
    >
    <!--      Button to close the popup. -->
    <Button
        android:id="@+id/close_popup_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BUTTON"
        android:textAlignment="center"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        />

    <TextView
        android:id="@+id/popup_header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Popup window"
        android:textAlignment="center"
        android:layout_toRightOf="@+id/close_popup_button"
        android:layout_alignParentEnd="true"
        style="@style/LargeFont" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/darker_gray"
        android:layout_below="@id/close_popup_button"
        >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <!--      Section for the string properties. -->
            <TextView
                android:id="@+id/main_properties"
                style="@style/MediumFont"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="properties"
                android:textColor="@android:color/black"
                android:textStyle="italic" />

            <!-- Flexible text that can be really long or really short. -->
            <TextView
                android:id="@+id/family_info_list"
                style="@style/SmallFont"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/longtext"
                android:textColor="@android:color/black" />

        </LinearLayout>

    </ScrollView>

</RelativeLayout>