Monday 2 August 2021

Guidelines Inside ScrollView - use Viewport %

I would like to add content to an app that starts at about 70% down vertically and can be scrolled upwards to cover the top 70% views.

I thought of using two children ConstraintLayout's inside a parent ConstraintLayout - the two children would be on top of each other. One would contain the views that would populate the first 70% of the screen while the other would contain a NestedScrollView which has an invisible <View> that takes up 70% of the height and then the additional content that can be scrolled up.

I'm facing a problem with marking the 70% spot - using a Guideline inside the NestedScrollView isn't working because the %s are fluid (it matches to 70% of the content inside the NestedScrollView instead of 70% of the viewable screen). Using a Guideline outside the NestedScrollView doesn't work because well... constraints have to be siblings to compile.

How can I accomplish this?

           <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/parentLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            >

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/firstConstraintLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/red5F"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent">
                // A bunch of content that should fill up the first 70% of the screen and be covered by the overlay if user scrolls
            </androidx.constraintlayout.widget.ConstraintLayout>
            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/overlayConstraintLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent">
              
                <androidx.core.widget.NestedScrollView
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:fillViewport="true"
                    android:id="@+id/scrollView"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent">
                    <androidx.constraintlayout.widget.ConstraintLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/overlayInnerLayout">
                        <androidx.constraintlayout.widget.Guideline
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:id="@+id/verticalGuidelineOverlay"
                            android:orientation="horizontal"
                            app:layout_constraintGuide_percent="0.7"/>
                        <View
                            android:layout_width="match_parent"
                            android:layout_height="0dp"
                            android:id="@+id/spacerView"
                            app:layout_constraintTop_toTopOf="parent"
                            app:layout_constraintBottom_toTopOf="@id/verticalGuidelineOverlay"
                            app:layout_constraintLeft_toLeftOf="parent"/>
                        // More content here that the user could scroll upwards that would start at the 70% point and eventually cover the entire screen.
                     </ConstraintLayout>
           </NestedScrollView>
      </ConstraintLayout>
    </ConstraintLayout>


from Guidelines Inside ScrollView - use Viewport %

No comments:

Post a Comment