Android complex collapsing toolbar transition

Question

I have a custom app bar view and a scroll view (left layout) and I want the custom app bar view to collapse to the layout on the right

As you can see, the image should change in size, the padding on the left and bottom changes, the text becomes smaller and the buttons has less padding on the right.

How can I achieve a smooth transition using a collapsing toolbar?

user_13154040 · Answer

You can just use MotionLayout with a NestedScrollView. Then you need to create a MotionScene in your res/xml folder. In which you can set the transition start, end constraintSet, as well as the trigger type(onSwipe).

Here is a good tutorial explaining that with one TextView.

user_4651659 · Answer

one solution is using MotionLayout and customizing it to have a collapsing toolbar layout behavior. this way the transition is very smooth. i remember in Google I/O they were showcasing the MotionLayout and one of their showcases was using it as collapsing toolbar layout.

other solution is detecting the collapsed and expanded status of Collapsing toolbar layout, and changing the layout parameters of the views to the necessary requirements.

something like this (this code is in kotlin, you'll get the idea)

      appBarLayout.addOnOffsetChangedListener(this)

then in onOffsetChangedListener change the layout parameters of your views.

    override fun onOffsetChanged(appBarLayout: AppBarLayout, offset: Int) {

    when (appBarLayout.totalScrollRange) {
        abs(offset) -> {

            // Collapsed



                val params =
                    (binding.titleTextView.layoutParams as ConstraintLayout.LayoutParams)
               // cast to the correct parent layout params, in my case it was ConstraintLayout

                //customize the layout params
               params.height= 100 // its in pixel , you can easily convert dp to pixel



                    binding.titleTextView.layoutParams = params

                    binding.titleTextView.requestLayout()



        }
        else -> {
            // Not Collapsed

          val params =
                    (binding.titleTextView.layoutParams as ConstraintLayout.LayoutParams)
               // cast to the correct parent layout params, in my case it was ConstraitLayout

                //customize the layout params
               params.height= 200 // its in pixel



                    binding.titleTextView.layoutParams = params

                    binding.titleTextView.requestLayout()


            }

    }

}

note that when using collapsing toolbar layout, the scroll flags are very important and change the behavior of the collapsing toolbar. this link illustrates how the flags work. i went with something like this :

Android complex collapsing toolbar transition

2 Answers