codelab-constraint-layout icon indicating copy to clipboard operation
codelab-constraint-layout copied to clipboard

Problem of adjustable Scrollview inside ConstraintLayout

Open aquagray opened this issue 3 years ago • 0 comments

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:

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

aquagray avatar Aug 30 '22 20:08 aquagray