I am trying to implement Google's newest design tricks with CoordinatorLayout and have problems with scrolling and parallax effect.
After Activity is displayed, everything looks ok but the problem occurs when I try to scroll. It seems the bottom View is not expanded correctly and after it's scrolled up, empty space appears below. Bottom View seems to be big only how much it has on initial display between top View and nav bar.
It looks something like this:
Relevant code:
<FrameLayout xmlns: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">
<CoordinatorLayout
android:layout_height="match_parent"
android:layout_width="match_parent">
<AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleMarginStart="72dp"
app:expandedTitleMarginEnd="16dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"/>
</CollapsingToolbarLayout>
</AppBarLayout>
<ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</CoordinatorLayout>
</FrameLayout>
This weird behavior happens randomly. Sometimes bottom View is scrollable normally and that empty space doesn't appear. What am I doing wrong? Thanks.
I had the same problem and I noticed that every layout with this problem had
android:fitsSystemWindows="true"
on CoordinatorLayout
Removing it fixed my problem everywhere.
Try to add Toolbar inside yours CollapsingToolbarLayout:
<android.support.design.widget.CollapsingToolbarLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
...
</android.support.design.widget.CollapsingToolbarLayout>
Also try to add
android:minHeight="?attr/actionBarSize"
to Toolbar CollapsingToolbarLayout and AppBarLayout
For navigational flags reasons android:fitsSystemWindows="true" did not meet my needs.
After some playing around I found that adding another CollapsingToolbarLayout with 0dp hieght does the trick.
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_scrollFlags="scroll|snap" />
Related
When using a CollapsingToolBarLayout with a RecyclerView, I found that the toolbar collapsed inconsistently when scrolling. I could scroll about halfway through the recyclerview before anything collapsed at all, and then it would collapse in fits and starts. The behavior wasn't always consistent - sometimes it would collapse more than others. By the time I scrolled to the bottom, however, it was always fully collapsed. My XML looked like the following:
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true" >
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" >
<com.google.android.material.appbar.MaterialToolbar
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
It turned out that the ultimate issue was having a second RecyclerView within some of the view holders of the first. As per this answer, setting setNestedScrollingEnabled(false) on the inner RecyclerView caused things to behave as expected.
Hello I have CoordinatorLayout with AppBar, Toolbar and RecyclerView.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
android:fitsSystemWindows="true"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="8dp"
android:fitsSystemWindows="true"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_photos"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:nestedScrollingEnabled="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
I want to leave Toolbar on top and don't want to move it, but let LinearLayout scroll below it (under the Toolbar).
Also I found that RecyclerView's not working with Coordinator layout. It doesn't trigger AppBar scroll events. If I will wrap it inside NestedSCrollView it will work but RecyclerView's not recycling view holders then so it's doesn't work for me.
Could anyone help to achieve this?
try like this
...
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_photos"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:nestedScrollingEnabled="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.v4.widget.NestedScrollView>
Put your toolbar and linear layout in a CollapsingToolbarLayout. Then use appropriate collapse mode attributes. For example, you could use pin for your toolbar and parallax for your linear layout:
<android.support.design.widget.AppBarLayout>
<android.support.design.widget.CollapsingToolbarLayout
...
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
...
app:layout_collapseMode="pin"/>
<LinearLayout
...
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
You need the dependency for design support library in your app's build.gradle:
implementation "com.android.support:design:$support_library_version"
More on coordinator and collapsing toolbar layouts
I couldn't implement it in the described way. RecyclerView doesn't send scroll events to AppaBar layout (what is really strange) so I need to split every view on that screen and make recycler view adapter handle them all in one recycler view. Thanks all for answers and time spent on this!
I want to make search toolbar which appears on swipe down and collapses on swipe up, regardless of scroll level. I encountered a problem when I wanted to set height of this toolbar exactly as search area. On swipe down it's fine. but on swipe up search icon is still visible.
If I change AppBarLayout android:layout_height="wrap_content" to 100dp, for example, it becomes possible to hide toolbar, to but it looks bad and may cause problems on different resolutions. Example of what I want to achieve is search in Play Market app, how it's done there?
<android.support.design.widget.CoordinatorLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="test.proekt101_test.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
>
<SearchView
android:id="#+id/searchView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:layout_marginTop="30dp"
>
</SearchView>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
Try adding android:fitsSystemWindows="true" to SearchView as well.
android:fitsSystemWindows="true" is supposed to be on CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout and the ImageView inside it.
From here. Worked for me.
android:fitsSystemWindows=“true”
was responsible for this. A useful article I've found — https://medium.com/google-developers/why-would-i-want-to-fitssystemwindows-4e26d9ce1eec#.psylrqm0y
Here is my layout hierarquy
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:clipToPadding="false"
android:theme="#style/AppThemeAppBarOverlay"
app:elevation="0dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
contentScrim="#color/transparent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:clipToPadding="false"
app:contentScrim="#color/transparent"
app:layout_scrollFlags="scroll|enterAlways">
<LinearLayout
android:id="#+id/openday_parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:clipToPadding="false"
android:orientation="vertical"
android:paddingTop="?attr/actionBarSize"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="1">
...</LinearLayout>
<android.support.v7.widget.Toolbar 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"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:clipChildren="false"
android:clipToPadding="false"
app:layout_collapseMode="pin"
app:layout_scrollFlags="snap|exitUntilCollapsed"
app:popupTheme="#style/AppThemePopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/card_view_margin_bt"
android:background="#color/windowBackground"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:listitem="#layout/card_item" />
</android.support.design.widget.CoordinatorLayout>
<include layout="#layout/navigation_view" />
I have two problems:
When the appbarLayout is expanded, and i perform a quick scroll Up in the recyclerView, the recyclerView scroll really fast and at the same time the collapsing toolbar start collapsing. This shouldnt happen. I want to only allow scroll in the recyclerView when the collapsingLayout is fully collapsed. I think the problem has to do with the recyclerView fling, because if i scroll it slow, this bug doesn't occur. I'm trying to find a workaround for this.
The second thing is, when the activity start, the appbar is expanded. i want it to start collapsed, which works with
appBarLayout.setExpanded(false, true)
But with this approach, the toolbar is also collapsed. I want to just collapse the appBarLayout header but not the toolbar.
The first issue is related to clipToPadding messing with the recyclerView scrolls. Just removed it and the glitch was gone.
The second issue was solved by removing all the toolbar flags and manually translating the view in the appBarLayout listener. Don't know if it is the best thing to do, but worked for me wonderfully.
I have a layout (as generated by android studio) where i added a RelativeLayout to the AppBarLayout. The code is below and it looks like this:
Where i am stuck: What i want to achieve is when scrolling the Recyclerview down i want that the green relative layout (which has the id 'controlContainer') scrolls out with it, and when i scroll up it should scroll in (not just on the top but at any place i scroll up in the list)
The Toolbar on top should stay where it is.
<android.support.design.widget.CoordinatorLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"
/>
<RelativeLayout
android:id="#+id/controlContainer"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#android:color/holo_green_dark"
app:layout_scrollFlags="scroll|enterAlways"></RelativeLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/venue_list" />
</FrameLayout>
I thought that using app:layout_scrollFlags="scroll|enterAlways" in the view that should scroll away combined with app:layout_behavior="#string/appbar_scrolling_view_behavior"should achieve that, but it does not do anything. alternatively, when i add those fields to the toolbar itself both layouts scroll away - which is not what i want, i want the toolbar to stay always fixed.
would be nice if anyone could point me in the right direction here? (i hoped it would be possible with using coordinator layout and not hacking some layout manipulation with onscroll listeners?)
Try this in your toolbar code:
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
I found this link helpful: Scrolling Toolbar