Collapsing Toolbar Layout Scroll even when there is no scrolling content in Nested Scroll View

user_8059396 0
Viewed 2483

I am using Collapsing toolbar layout in my project in which I am using one NestedScrollView in which I have multiple Card Views in which the content is not static instead it changes in onActivityResult. I have set minimum height of CollapsingToolbarLayout as 100dp. So I have observed couple of issues in it:

  1. On big phones the content scrolls up to minimum height 100dp leaving a large empty space at bottom which is not desired result. It should scroll up only when it is necessary. Necessary Condition is that when I get large text value in Text fields it should scroll otherwise not.
  2. I have used Natario Solution in it which calculates minimum height of CollapsingToolbarLayout dynamically which works somehow but it vanish the scroll ability of NestedScrollView If I get large dynamic texts, which is not desired result.

My layout.xml file is:-

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:clickable="true"
    android:id="@+id/topBlock"
    app:layout_constraintTop_toTopOf="parent"
    android:focusable="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:id="@+id/navigation"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appbar"
            app:elevation="0dp"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:background="@null"
            android:minHeight="100dp">

            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:id="@+id/collapse_bar"
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:background="@android:color/holo_blue_light"

                android:minHeight="100dp"

                app:layout_collapseMode="parallax"
                app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
                app:layout_scrollInterpolator="@android:anim/decelerate_interpolator">


            </com.google.android.material.appbar.CollapsingToolbarLayout>

        </com.google.android.material.appbar.AppBarLayout>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/camera"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:elevation="8dp"
            app:backgroundTint="@color/white"
            app:fabSize="normal"
            app:layout_anchor="@+id/nestedScrollView"
            app:layout_anchorGravity="top|center_horizontal"
            app:srcCompat="@drawable/ic_launcher_background" />

        <androidx.core.widget.NestedScrollView
            android:id="@+id/nestedScrollView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/white"
            app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent">

       

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:background="@color/white"
                    android:layout_height="wrap_content">

                    ////My Scrolling Content(Contains many edit texts so its size may vary)
                </androidx.constraintlayout.widget.ConstraintLayout>
        </androidx.core.widget.NestedScrollView>


    </androidx.coordinatorlayout.widget.CoordinatorLayout>


</androidx.constraintlayout.widget.ConstraintLayout>

I have not done anything in MyActivity.kt file. Please help me out this. I have tried nearly all solutions in this community from last 15 days still no luck. Thanks!!

Edit: As Suggested I have updated the Question with NestedScrollView as direct child and posted Screenshot of Android Studio preview in which it is taking height which is crossing preview. It should take height according to the content.If I make NestedScrollView wrap_content then still it leaves empty space at bottom. In background I have Camera running so I have to make it match parent to make cover full height.enter image description here

android-collapsingtoolbarlayout android-coordinatorlayout android-layout android
2 Answers

First of all, there is no need for ConstraintLayout since you have the CoordinatorLayout. Also as mentioned by users in comments, NestedScrollView should be a direct child of CoordinatorLayout and not in the ConstraintLayout. In this way you designed, some behaviors might not work as expected and it's actually a wrong design.

I've made the changes and here is what you'd see in the preview:

enter image description here

UPDATED layout:

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/topBlock"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="0dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapse_bar"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:background="@android:color/holo_blue_light"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:layout_scrollInterpolator="@android:anim/decelerate_interpolator">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/myToolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme"
                app:title="Your title" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:id="@+id/nestedScrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipToPadding="false"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="40dp"
            android:layout_marginEnd="20dp"
            android:layout_marginRight="20dp">

            <TextView
                android:id="@+id/title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="20dp"
                android:text="MyRandomText"
                android:textColor="@android:color/black"
                android:textSize="42sp"
                android:textStyle="bold"
                app:layout_constraintBottom_toTopOf="@+id/view"
                app:layout_constraintCircleRadius="0dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <View
                android:id="@+id/view"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_marginTop="20sp"
                android:background="@android:color/holo_blue_light"
                app:layout_constraintTop_toBottomOf="@id/title" />

        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.core.widget.NestedScrollView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/camera"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="8dp"
        android:src="@mipmap/ic_launcher"
        app:backgroundTint="@color/white"
        app:fabSize="normal"
        app:layout_anchor="@+id/nestedScrollView"
        app:layout_anchorGravity="top|center_horizontal" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

P.S: Please also remember that the NestedScrollView should have only one child as it's first child.

In this way which is the right way to do, you won't have to use kotlin-java codes to achieve scrolling or other behaviors, you'll be able to achieve the behaviors using flags and attributes like layout_scrollFlags and exitUntilCollapsed and the like.

user_44091130

I have no particular solution to your problem, but I highly suggest you to embrace Motion Layout. I'm developing an app with a 'collapsing toolbar' too, and I wanted to do a parallax effect, just like in Spotify. It got really difficult using Coordinator Layout and Collapsing Toolbar, besides the documentation about it are not very extensive so honestly I didn't know what I was doing.

I researched online for other ways to do it and finally I found out about this. Motion Layout lets you tweek your animations to the very little details. I know that thinking of changing your whole layout from CoordinatorLayout to MotionLayout seems like a lot of work but it isn't. And if anything it's rewarding given that Motion Layout extends from Constraint Layout and you can animate every view of your layout (if your parent is Motion Layout). Another pro-ML argument is that you have animation listeners: for example when a transition is done, a method is called automatically and this way you can chain animations if you need to, it's really fun.

  1. Check out some of the possible animations that you can build with Motion Layout. These come with the layouts xml and the animation xml so you can learn from these (great official documentation btw): https://developer.android.com/training/constraint-layout/motionlayout/examples

  2. This is the tutorial I used to imitate the behavior of the Collapsing Toolbar inside a Coordinator Layout: https://blog.stylingandroid.com/motionlayout-collapsing-toolbar-part-1/ https://blog.stylingandroid.com/motionlayout-collapsing-toolbar-part-2/ (I personally just went through part1 then continued on my own)

user_131500660
Related