I'm trying to make a CollapsingToolbarLayout that is like GooglePlay .
All is fine except for one thing.
I can't make the toolbar inside CollapsingToolbarLayout to alwaysEnter
<android.support.design.widget.CollapsingToolbarLayout
android:elevation="2dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:contentScrim="#color/colorPrimaryDark"
android:id="#+id/toolbar_layout"
android:fitsSystemWindows="true"
app:titleEnabled="false"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
app:layout_collapseMode="parallax"
android:maxHeight="300dp"
android:id="#+id/profileFarmImage_loggedLO"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
<android.support.v7.widget.Toolbar
app:layout_scrollFlags="scroll|enterAlways|snap"
android:layout_width="match_parent"
app:layout_collapseMode="pin"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
I know that setting scrollFlags inside CollapsingToolbarLayout won't have any effect, but if I set the scrollFlagsof my CollapsingToolbarLayout as enterAlwaysCollapsed I get unwanted behavior in which when the screen is scrolled to bottom and when I scrollup again all the views inside CollapsingToolbarLayout is shown. That's not the behavior I want. The behavior I want is when the screen is scrolled to bottom then when I scroll up I only want the toolbar to show and when the screen is scrolled to top only then it will show the remaining view inside CollapsingToolbarLayout.
I know that this behavior is possible since GooglePlay implements it.
I was able to fix it by setting CollapsingToolbarLayout
android:minHeight="?attr/actionBarSize"
Related
I have a CollapsingToolbarLayout and a viewflipper inside of it to auto change the images. My problem is when the user scrolls up or once it is collapsed , my app bar is showing the Viewflipper images, i dont want to do that i want my toolbar must get the original color once it collapsed
This is what i am getting, second image once it is collapsed
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="250dp"
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"
app:toolbarId="#+id/toolbar">
<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" />
<ViewFlipper
android:id="#+id/srinivasflipper"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ViewFlipper>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Try adding app:layout_collapseMode="parallax" inside the viewfliper it is required for the desired effect .
Collapsing Toolbars
you can use app:layout_collapseMode="parallax" (and optionally app:layout_collapseParallaxMultiplier="0.7" to set the parallax multiplier) to implement parallax scrolling (say of a sibling ImageView within the CollapsingToolbarLayout). This use case pairs nicely with the app:contentScrim="?attr/colorPrimary" attribute for CollapsingToolbarLayout, adding a full bleed scrim when the view is collapsed.
Note :
Also since collapsing toolbar extends framelayout , you need to place the toolbar below viewflipper.
I have a layout which has a toolbar in the top, followed by 2 toolbar sized bars under it and a listview below that. When someone scrolls on the listview, the 2 bars under the toolbar should scroll up and disappear under the toolbar.
I tried putting the app:layout_scrollFlags="scroll|enterAlways" only on those bars and not the toolbar but then they doesn't respond to scroll events.
If I put the same scrollFlags on the toolbar as well, they all respond but I want the toolbar to always display.
If I move the two bars above the toolbar, it works and only the two bars respond, but now the toolbar is below the bars and this is not the display I want.
Try putting the Toolbar you want to stay still at the top below your appBar. Your AppBar contains the views that you actually want to scroll, while the other one will be below it. Make sure to have your app bar have an elevation of 0dp or else it will go and be displayed above it (or change the elevation of your toolbar to be higher than the appbar). Also add the Height of the bar you want to stay at the top as the top margin of the appbar so it starts out below you view.
<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">
<!--Toolbars you want to move-->
<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:layout_marginTop="?attr/actionBarSize"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/holo_blue_light"
android:layout_gravity="bottom"
app:layout_scrollFlags="scroll|enterAlways"
/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/holo_orange_light"
android:layout_gravity="bottom"
app:layout_scrollFlags="scroll|enterAlways"
app:elevation="2dp"
/>
</android.support.design.widget.AppBarLayout>
<!--Toolbar you don't want to move-->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:background="#color/wallet_bright_foreground_holo_light"
app:popupTheme="#style/AppTheme.PopupOverlay"
/>
<!--Your content here -->
<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/item_list" />
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
I have a TabLayout that I want always pinned to the top, and a Toolbar below that, that when the view is scrolled, scrolls up into the TabLayout.
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
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"
tools:context=".main.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:animateLayoutChanges="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView2"
android:src="#drawable/music_content"
android:contentDescription="#string/image_chooser_title"
/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
You can see here that I've set the Toolbar
app:layout_scrollFlags="scroll|enterAlways"
and not set any scrolling flags for the TabLayout above, since I want it to remain pinned. However, using these settings, the AppBarLayout doesn't scroll at all. If I add a scroll flag to the TabLayout, then they both scroll, and the TabLayout doesn't remain fixed. Is there a way to have the TabLayout remain fixed, while the Toolbar below scrolls up "off screen?"
Pictures can be provided if needed
As per the Android Design Support Library blog post:
One note: all views using the scroll flag must be declared before views that do not use the flag. This ensures that all views exit from the top, leaving the fixed elements behind.
So what you want is not possible with AppBarLayout.
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" />
I have a toolbar that collapses when the RecyclerView scrolls down, but when the user scrolls up quickly, the toolbar doesn't expand. Any idea what is wrong?
This behavior is shown in this video: https://youtu.be/67ntPkW-5XA
Layout code :
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="192dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
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/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:clickable="true"
android:onClick="showText"
android:src="#drawable/ic_done_white_24dp"
app:borderWidth="0dp" />
If you want it to expand every time you scroll up, you should add app:layout_scrollFlags="scroll|enterAlways" to the view you want to be shown.
As I understand you want to add this to your CollapsingToolbarLayout.
Possible flags:
scroll: this flag should be set for all views that want to scroll off the screen - for views that do not use this flag, they’ll remain pinned to the top of the screen
enterAlways: this flag ensures that any downward scroll will cause this view to become visible, enabling the ‘quick return’ pattern
enterAlwaysCollapsed: When your view has declared a minHeight and you use this flag, your View will only enter at its minimum height (i.e., ‘collapsed’), only re-expanding to its full height when the scrolling view has reached it’s top.
exitUntilCollapsed: this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting