I'm using the Android Design Support Library to create an Activity with a Collapsible Toolbar with a nice fading effect, just like Google Play or Whatsapp's Contact profile. I will put the activity layout at the end but bear in mind this is just the default Collapsible Activity layout to which I added an ImageView to the AppBarLayout to create the Toolbar <-> Image fade effect.
My problem with this implementation presents itself as 2 symptoms I will describe:
The activity content is long, when I want to scroll up quickly with a fast swipe the scroll will stop before expanding the Toolbar. I want it to continue, when I'm at the bottom of my NestedScrollView and I do a quick finger swipe to go all the way to the top of my activity I want this scroll to go and expand the Toolbar, this is the way the Google Play app behaves or Whatsapp's profile does.
Similarly when the Toolbar is expanded there is no inertia to the scroll, a quick swipe down will scroll a tiny bit, again this is not how Google Play or Whatsapp profile behaves. Once the Toolbar is collapsed the scroll behaves as it always has in ScrollViews, ListViews, etc. A quick swipe will allow you to go the bottom or top (unless there is a lot of content).
Is the behaviour I describe supported by the Design Support Library?
activity.xml:
<?xml version="1.0" encoding="utf-8"?>
<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=".ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:fitsSystemWindows="true"
android:layout_height="#dimen/app_bar_height_custom"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary">
<ImageView
android:src="#drawable/cuthbert"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:minHeight="100dp"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_scrolling"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
android:src="#android:drawable/ic_dialog_email"/>
</android.support.design.widget.CoordinatorLayout>
content_scrolling.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_scrolling"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ScrollingActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/text_margin"
android:text="#string/large_text"/>
</android.support.v4.widget.NestedScrollView>
Try to add these lines in :
<android.support.design.widget.CollapsingToolbarLayout
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="#android:color/transparent"
Update support libraries to 26.0.0 ( especially design support library ). They finally fixed this issue after years of complaining.
Related
I am using the sample ScrollingActivity (included in the SDK) for testing parallax behavior. The sample uses a NestedScrollView in a CoordinatorLayout. When I scroll up from the bottom of the screen; the scroll stops at toolbar (even if my scroll has high velocity). As you can see in the attached image, multiple scrolls are needed to show the expanded AppBarLayout.
I need a smooth scroll for users to see expanded AppBarLayout. Interestingly, this issue does not happen if I use RecyclerView instead of NestedScrollView.
I am using build tool 23.0.3. Here is the layout XML :
<?xml version="1.0" encoding="utf-8"?>
<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="me.deepakmishra.swipetests.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<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|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_gravity="fill_vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="me.deepakmishra.swipetests.ScrollingActivity"
tools:showIn="#layout/activity_scrolling">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/text_margin"
android:text="#string/large_text" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
I could not achieve this using CoordinatorLayout, essentially because I was not able to get an event which encapsulates velocity and position at the same time. CoordinatorLayout is providing velocity and position in separate callbacks, and using them is resulting in a stuttered movement.
I implemented parallax effect in a traditional fashion with custom handlers to track all scroll/fling operations.
Add android:fillViewport="true" and android:layout_gravity="fill_vertical" to your NestedScrollView. Hope this will help you.
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
Hi I am doing a simple app to try out material design. Unfortunately, following the incredible tutorial here and trying out the samples here (These are incredible sources for FYI in material design) I am struggling to make my app toolbar to work perfectly as it should. For instance, the back button right next to the title on collapse in not showing up. BUT I can simply click that area where it should be and it responded.
So therefore the button is there but it is not showing up and I cannot figure out why. Also, as the toolbar collapsed, the toolbar doesn't change its color to primary color I set. contentScrim doesn't seem to react on collapse mode but I will post another question for this.
Here is what it currently looks like:
Now on collapse, the title is noticeably far to the right. The button is there, I can click it, it returns to my app's homescreen but the back icon is not there.
Here is the layout file for the activity:
<?xml version="1.0" encoding="utf-8"?>
<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"
android:orientation="vertical"
tools:context=".HomeScreenActivity"
android:weightSum="1">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_note"
android:layout_width="match_parent"
android:layout_height="168dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingtoolbarlayout_note"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_note"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
<ImageView
android:src="#drawable/backgroud_note"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
...
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_note"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/appbar_note"
app:layout_anchorGravity="bottom|right|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_send_white_24dp" />
</android.support.design.widget.CoordinatorLayout>
I am using API 22 build 23.0.2 all of my support libraries are at 23.1.0
I found the answer, it seems the tutorial doesn't work for my case since probably they do a different method on how to load the image backdrop. I simply put mine into the drawable-xxxhdpi folder and load it via android:src attribute I am not very sure if this makes difference at all. I peeked at the sample project and they defer the loading/caching of images at runtime in onCreateView() using Glide. I did otherwise. I guess this is the convention on huge file size for material backgrounds?
It appears to me it involves how the actual layout is positioned. I positioned the ImageView below the toolbar. So the imageview gets rendered first, I believe. The ImageView is always there even though the Toolbar entered. This must be the reason why the contentScrim looked like it failed to recognize that it is already on Toolbar mode. The ImageView is blocking the entire Toolbar!
So I placed the ImageView below the Toolbar. This time, Toolbar gets to show up first and then the image. It worked!
Here is my new layout:
<?xml version="1.0" encoding="utf-8"?>
<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"
android:orientation="vertical"
tools:context=".HomeScreenActivity"
android:weightSum="1">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_note"
android:layout_width="match_parent"
android:layout_height="168dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingtoolbarlayout_note"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:src="#drawable/backgroud_note"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_note"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
...
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_note"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/appbar_note"
app:layout_anchorGravity="bottom|right|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_send_white_24dp" />
</android.support.design.widget.CoordinatorLayout>
I am thinking maybe if I could delay the loading of image a bit (like deferring the image loading at onCreateView()) making way for the toolbar to show up first, maybe it won't matter how I positioned my elements inside the CollapsingToolbarLayout. But this is just my rough guess. I can always be wrong.
Just use app:layout_collapseMode="pin"inside Toolbar! It's work fine) Thanks
I have changed a version in build.gradle from
compile 'com.android.support:design:22.2.0'
to
compile 'com.android.support:design:24.2.1'
and added this to class:
Toolbar toolbar = (Toolbar) findViewById(R.id.mainToolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(true);
Now back button is working!
I'm having some issues implementing a CollapsingToolbarLayout in my app in conjunction with a recyclerview. So I have it all setup and working (compared to a few different sources - including the CheeseSquare setup) - but I'm having some issues with spacing near the bottom of the layout (1st photo & 3rd photo) I was hoping someone might be able to help with.
Images found here:
http://imgur.com/a/w3lb8
It seems a few others have had this problem, and their answers did not solve mine - completely atleast:
CoordinatorLayout leaves empty space at the bottom after scrolling
Whitespace below CoordinatorLayout in DrawerLayout
I tried adding the android:layout_gravity="fill_vertical" to the NestedScrollView / Recyclerview as suggested, and while that seems to (mostly) fix it, it now hides about 1 & 1/3 of the lowest views (looking at the views through the hierarchy viewer - Photo 4). I'm sure there's a solution to this, but I haven't been able to figure it out yet. Any assistance would be much appreciated.
Activity Layout file:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator_layout"
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"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="240dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="#style/GasMonitorTheme.ActionBar.TitleTextAppearance"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/toolbar_imageview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:transitionName="car_image"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_actionbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:layout_gravity="fill_vertical"
android:id="#+id/fragment_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/default_side_padding"
android:clickable="true"
android:src="#drawable/ic_add"
android:tint="#color/white"
app:layout_anchor="#id/coordinator_layout"
app:layout_anchorGravity="bottom|right|end"
/>
</android.support.design.widget.CoordinatorLayout>
I've gone through and simplified my activity to match that of the CheeseSquare app (trying to find why only mine is doing this), aside from my adapter pulling from a List. I've tested this and seen the same issue on API 22 & 23.
I have the following layout (almost the same as the scrollingActivity generated by Android Studio )
Notice the layout_heights and layout_scrollFlags
<?xml version="1.0" encoding="utf-8"?>
<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="com.man.myapplication.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:background="#android:color/holo_red_dark"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_green_dark"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/holo_blue_dark"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_scrolling" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end" />
</android.support.design.widget.CoordinatorLayout>
Problem
After starting the application, the CollapsingToolbarLayout doesn't start from below the statusbar, but from behind it and it still can be scrolled down 50 pixels.
(Notice in the gif below in the first view as I start the app)
+ sometimes it snaps below the header (where it should be) when playing with scroll.
Note: this does not appear with the exitUntilCollapsed flag
Question
Is there any way to get rid of that 50 extra pixels scroll and make the Toolbar appear properly under the statusbar?
(currently am debugging the design-support library)
Ok I've found a way to get rid of the extra scroll (though not an explanation for why it is happening):
Quickfix
Changing the android:fitsSystemWindows on the AppBarLayout to false gets rid of the extra scroll.
What happens
This setting makes the AppBarLayout begin its layout from the very top of the screen instead from below the statusbar, which somehow gets rid of the weirdscroll.
Note
Though this way your Toolbar won't be hidden nicely below the statusbar.
Result
Footnotes
What is still a mistery, is why doesn't the above behavior take into consideration the statusbar and adds that extra scrollheight. in its original form.