Scroll entire fragment containing x number of GridViews-CodePudding

So I've really looked everywhere without finding an answer. I have a layout with x number of GridViews which gets the data from JSON via MQTT. The problem is if a ScrollView is set as a container, each GridView becomes one row with the ability to scroll each one separately. If I use fillViewPort, the GridViews are shown correctly, but nothing will scroll and the content goes below the screen.

I just want the entire fragment to be scrolled like it does on the sites without any GridViews.

This is an example of one combination. I've tried of all other combinations, there are lots of similar questions but no solutio works in my case.

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>
        <variable
            name="viewModel"
            type="com.volvo.mechatronicsstudio.showcarcontrol.ui.main.viewmodels.MainViewModel" />

    </data>

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

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@ id/main"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:isScrollContainer="true"
            tools:context=".ui.main.fragments.MainFragment">

            <!--        HANDLES & DOORS-->
            <TextView
                android:id="@ id/tv_title_handles_doors"
                style="@style/Widget.Theme.ShowcarControl.text.title.category"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Handles and Doors"
                android:layout_marginTop="10dp"
                android:layout_marginStart="20dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <GridView
                android:id="@ id/gridview_handles_doors"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:columnWidth="120dp"
                android:numColumns="auto_fit"
                android:stretchMode="spacingWidth"
                android:horizontalSpacing="30dp"
                android:verticalSpacing="30dp"
                android:layout_margin="20dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@ id/tv_title_handles_doors" />

            <!--        LIGHTS-->
            <TextView
                android:id="@ id/tv_title_lights"
                style="@style/Widget.Theme.ShowcarControl.text.title.category"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Lights"
                android:layout_marginTop="15dp"
                android:layout_marginStart="20dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@ id/gridview_handles_doors" />

            <GridView
                android:id="@ id/gridview_lights"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:columnWidth="120dp"
                android:numColumns="auto_fit"
                android:stretchMode="spacingWidth"
                android:horizontalSpacing="30dp"
                android:verticalSpacing="30dp"
                android:layout_margin="20dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@ id/tv_title_lights" />

            <!--        DECOR-->
            <TextView
                android:id="@ id/tv_title_decor"
                style="@style/Widget.Theme.ShowcarControl.text.title.category"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text=""
                android:layout_marginTop="15dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@ id/gridview_lights" />

            <GridView
                android:id="@ id/gridview_decor"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:columnWidth="120dp"
                android:numColumns="auto_fit"
                android:stretchMode="spacingWidth"
                android:horizontalSpacing="30dp"
                android:verticalSpacing="30dp"
                android:layout_margin="20dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@ id/tv_title_decor" />

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

CodePudding user response：

So I've tried alot of things and come up with a part solution for now. Instead of ConstraintLayout I use LinearLayout, and NestedScrollView instead of ScrollView. The page now scrolls as i want.

The problem now is the dynamic height of the GridViews - they only show one row. But thats another problem.

This is the working example:

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

    <data>
        <variable
            name="viewModel"
            type="com.volvo.mechatronicsstudio.showcarcontrol.ui.main.viewmodels.MainViewModel" />
    </data>

    <androidx.core.widget.NestedScrollView
        android:id="@ id/nestedScrollViewContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">

        <LinearLayout
            android:id="@ id/main"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scrollbars="vertical"
            android:background="@drawable/bg_mainfragment"
            tools:context=".ui.main.fragments.MainFragment"
            android:orientation="vertical">
    
            <!--        WELCOME-->
            <TextView
                android:id="@ id/tv_title_welcome"
                style="@style/Widget.Theme.ShowcarControl.text.title.category"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:layout_marginStart="20dp"
                android:text="Welcome"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <GridView
                android:id="@ id/gridview_welcome"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="20dp"
                android:columnWidth="120dp"
                android:gravity="center"
                android:horizontalSpacing="10dp"
                android:numColumns="auto_fit"
                android:stretchMode="spacingWidth"
                android:verticalSpacing="30dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@ id/tv_title_welcome" />

            <!--        LIGHTS-->
            <TextView
                android:id="@ id/tv_title_lights"
                style="@style/Widget.Theme.ShowcarControl.text.title.category"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:layout_marginStart="20dp"
                android:text="Lights"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@ id/gridview_welcome" />

            <GridView
                android:id="@ id/gridview_lights"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="20dp"
                android:columnWidth="120dp"
                android:gravity="center"
                android:horizontalSpacing="10dp"
                android:numColumns="auto_fit"
                android:stretchMode="spacingWidth"
                android:verticalSpacing="30dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@ id/tv_title_lights" />

            <!--        DECOR-->
            <TextView
                android:id="@ id/tv_title_decor"
                style="@style/Widget.Theme.ShowcarControl.text.title.category"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:layout_marginStart="20dp"
                android:text="Decor"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@ id/gridview_lights" />

            <GridView
                android:id="@ id/gridview_decor"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="20dp"
                android:columnWidth="120dp"
                android:gravity="center"
                android:horizontalSpacing="10dp"
                android:numColumns="auto_fit"
                android:stretchMode="spacingWidth"
                android:verticalSpacing="30dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@ id/tv_title_decor" />

            <View
                android:id="@ id/line_Decor_Bottom"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="@color/line_settings"
                android:layout_margin="20dp"
                app:layout_constraintTop_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent" />

        </LinearLayout>
    </androidx.core.widget.NestedScrollView>
</layout>