Collapsingtoolbarlayout Expand Only When At The Top
Solution 1:
Customisation of CoordinatorLayout behaviour is hard. You want the orange bar to appear immediately but ImageView only after the content is scrolled to the top, but these views belong to one parent CollapsingToolbarLayout and both get either the behaviour you have now or the opposite with enterAlwaysCollapsed flag. I see no way to separate the behaviour for these views without messing with CoordinatorLayout/CollapsingToolbarLayout Java API.
If simpler behaviour is not an option and noone here points out a simple solution, I suggest trying a relatively new MotionLayout instead of dancing with CollapsingToolbarLayout internals, you will save yourself a lot of time in the end. It will be a little harder at start but it provides clear ways for customisation. Here's a very good article that shows how to build a UX similar to CoordinatorLayout but using MotionLayout. And the second part of this article with some additional customisations.
Solution 2:
I ended up moving the orange bar out of the CollapsingToolbarLayout and setting an OnOffsetChangedListener that changes the translationY of the top bar on the AppBarLayout.
Setting the OnOffsetChangedListener:
app_bar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appbar, offset ->
topbar.translationY = Math.min(image.height.toFloat(), - offset.toFloat())
})
Layout:
<android.support.design.widget.AppBarLayoutandroid:id="@+id/app_bar"android:layout_width="match_parent"android:layout_height="wrap_content"><TextViewandroid:layout_width="match_parent"android:layout_height="56dp"android:id="@+id/topbar"app:elevation="8dp"android:elevation="8dp"android:background="#ff8000"android:gravity="center_vertical"android:paddingStart="16dp"android:paddingEnd="16dp"android:text="Top bar"android:textColor="@android:color/white"app:layout_scrollFlags="scroll|enterAlways" /><android.support.design.widget.CollapsingToolbarLayoutandroid:id="@+id/image"android:layout_width="match_parent"android:layout_height="wrap_content"app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"><TextViewandroid:layout_width="match_parent"android:layout_height="145dp"android:background="#444"android:gravity="center"android:text="ImageView"android:textColor="@android:color/white"android:textSize="20sp"app:layout_collapseMode="parallax" /></android.support.design.widget.CollapsingToolbarLayout><TextViewandroid:id="@+id/bottombar"android:layout_width="match_parent"android:layout_height="50dp"app:elevation="8dp"android:elevation="8dp"android:background="#ddd"android:gravity="center_vertical"android:paddingStart="16dp"android:paddingEnd="16dp"android:text="Bottom bar"android:textColor="@android:color/black"app:layout_scrollFlags="enterAlways" /></android.support.design.widget.AppBarLayout><android.support.v4.widget.NestedScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:clipToPadding="false"app:layout_behavior="@string/appbar_scrolling_view_behavior"><includelayout="@layout/content_scrolling"/></android.support.v4.widget.NestedScrollView>Solution 3:
There are lots of effects on the scrolling behavior that can be achieved by setting different layout_scrollFlags. In your case, I think the flag you want is enterAlwaysCollapsed. Add the flag along with enterAlways instead of replacing all the flags.
scroll will make the toolbar scroll like the rest of the content, enterAlways will make the toolbar AND the rest of the CollapsingToolbarLayout to pop back immediately after scroll up, whereas enterAlwaysCollapsed only expands the CollapsingToolbarLayout after the page is scrolled all the way to the top.
Here's the effect that enterAlwaysCollapsed achieves.
Solution 4:
I think you can manage that from your code ,I have tried that by simply detecting behavior of layout
app_bar.addOnOffsetChangedListener(newAppBarLayout.OnOffsetChangedListener() {
@OverridepublicvoidonOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (Math.abs(verticalOffset)-appBarLayout.getTotalScrollRange() == 0)
{
// Collapsed
}
else
{
//Expanded
}
}
});
Solution 5:
Try this @Mark.I got the scroll you showed in the Video
<android.support.design.widget.CoordinatorLayoutxmlns: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"><android.support.design.widget.AppBarLayoutandroid:id="@+id/app_bar"android:layout_width="match_parent"android:layout_height="wrap_content"><android.support.design.widget.CollapsingToolbarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed"><TextViewandroid:layout_width="match_parent"android:layout_height="145dp"android:layout_marginTop="56dp"android:background="#444"android:gravity="center"android:text="ImageView"android:textColor="@android:color/white"android:textSize="20sp"app:layout_collapseMode="parallax" /><TextViewandroid:layout_width="match_parent"android:layout_height="56dp"android:background="#ff8000"android:gravity="center_vertical"android:paddingStart="16dp"android:paddingEnd="16dp"android:text="Top bar"android:textColor="@android:color/white"app:layout_collapseMode="pin" /></android.support.design.widget.CollapsingToolbarLayout><TextViewandroid:layout_width="match_parent"android:layout_height="50dp"android:background="#ddd"android:gravity="center_vertical"android:paddingStart="16dp"android:paddingEnd="16dp"android:text="Bottom bar"android:textColor="@android:color/black"app:layout_scrollFlags="enterAlways" /></android.support.design.widget.AppBarLayout><android.support.v4.widget.NestedScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:clipToPadding="false"app:layout_behavior="@string/appbar_scrolling_view_behavior"><includelayout="@layout/content_scrolling"/></android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>
Post a Comment for "Collapsingtoolbarlayout Expand Only When At The Top"