I have a CollapsingToolbarLayout that is defined to center both in collapsed and in expanded modes:
<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/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="286dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleGravity="center"
app:expandedTitleGravity="center"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/backgroundImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#null"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
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:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
<ImageView
android:id="#+id/someIcon"
android:layout_width="56dp"
android:layout_height="wrap_content"
android:src="#drawable/some_icon"
android:padding="16dp"
android:layout_gravity="top|end"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
I define a title for the toolbar but when I collapse it I can see the title moving in a diagonal direction instead of straight up and it aligns itself slightly to the right of the center of the toolbar line. Notice that the width is match_parent and the collapsed gravity is center, so why could this be happening and how should I fix it?
• First screenshot: what it looks like if I use collapse -> center and expanded -> center gravities and then collapse the layout. Notice that it's to the right of the center of the screen.
• Second screenshot: what it looks like if I get rid of collapse -> center gravity but leave expanded -> center gravity and then collapse the layout. Notice that it's aligned left by default.
• Third screenshot: what it looks like expanded
Things that I've tried so far to solve this (without success):
• Getting rid of the collapsedGravity and leaving only the expandedGravity
• Using the default roboto font for the title
• Setting padding and margins to 0 for both the toolbar and the collapsing layout
• setting gravity center_horizontal instead of center
Edit:
The only workaround I've found that makes this work properly is to use a separate textview to hold the title instead of setting the title for the collapsingtoolbarlayout (this makes the title collapse properly to the center). This isn't optimal so I'd appreciate knowing if the CPL has a bug in it or if there's a way to use the default title to do the same thing.
You need to set app:contentInsetStart and app:contentInsetLeft properties to 0dp.
<android.support.v7.widget.Toolbar
..
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"/>
It may be late, but what I found is, the your title is in center in the title's view and not the whole toolbar. It happened with me, when I didn't had the up/back button on the left and had a single icon on the right.
So if you have back/up button, it should be exactly in the center because on the left and right you have 1 icon. But, this didn't happened because when you set the up/back button, it adds some right margin (you can see this behavior on the normal toolbar, with left title gravity).
So by considering that, the in the remaining area, your title is in the center. But, not center considering toolbar's width, center in title view's available width.
EXPERIMENT: You can try adding a second icon on the right and it will be very much in the center. Just a hack. Ugly hack.
Setting content related properties to 0dp (app:contentInsetLeft="0dp", android:contentInsetLeft="0dp", app:contentInsetStart="0dp", android:contentInsetStart="0dp", app:contentInsetStartWithNavigation="0dp") might help you. Here is my working Toolbar.
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleGravity="center|center_horizontal"
app:collapsedTitleTextAppearance="#style/CollapsedAppBar"
app:expandedTitleTextAppearance="#style/ExpandedAppBar"
app:statusBarScrim="#color/colorPrimaryDark"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMargin="#dimen/large_padding"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/comImage1"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:src="#drawable/bg"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
app:contentInsetLeft="0dp"
android:contentInsetLeft="0dp"
app:contentInsetStartWithNavigation="0dp"
app:contentInsetStart="0dp"
android:contentInsetStart="0dp"
app:theme="#style/ToolbarTheme"
android:gravity="center_horizontal"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:titleMargin="0dp"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
Hope it will help :)
You need to set app:expandedTitleGravity="center"
and remove app:collapsedTitleGravity="center" from your code like
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleGravity="center"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
Hope this helps you
Related
I am trying to use CollapsingToolbarLayout but getting this blue space under my content. Collapsed state doesn't have this problem.
The Empty space under the expanded content seems to be equal to status bar height. I am unable to understand why that would happen.
My xml looks like this
<android.support.design.widget.CoordinatorLayout
android:fitsSystemWindows="true" ...>
<android.support.design.widget.AppBarLayout
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true" ...>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#color/colorPrimary"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed|enterAlwaysCollapsed"
app:statusBarScrim="#android:color/transparent">
<android.support.constraint.ConstraintLayout
android:id="#+id/expanded_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax".../>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:navigationIcon="?attr/homeAsUpIndicator"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<android.support.constraint.ConstraintLayout.../>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Update
I found a workaround for the time being
collapsingToolbar.post {
val params = (collapsingToolbar.layoutParams as ViewGroup.MarginLayoutParams)
params.height = findViewById<View>(R.id.expanded_toolbar).height
collapsingToolbar.layoutParams = params
}
I think you should try changing the layout_height of your collapsing toolbar to wrap_content instead of match_parent
I believe that the blue color is because of the toolbar within the collapsing toolbar. So you should make sure that your background is applied to the appbar layout, or the collapsing toolbar layout.
However, that may cause problems since you're using an image background instead of just a color. So I recommend that you keep track of the collapsing toolbar's status, whether it's collapsed or open, and update your background accordingly.
Setting "match_parent" in the constraint inside the CollapsingToolbarLayout works for me:
<android.support.constraint.ConstraintLayout
android:id="#+id/expanded_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax".../>
I'm using a custom AppBarLayout because I want a custom shape for my toolbar with an elevation shadow. The background is set on the AppBarLayout as a custom Drawable and I use the following code to to get the shadow to render on the toolbar.
setClipToOutline(true);
setOutlineProvider(ViewOutlineProvider.BACKGROUND);
All is good, the shadow renders. However, my CollapsingToolbarLayout also contains some tabs and when I collapse the toolbar I want my tabs to stay visible. Currently when I scroll the entire toolbar disappears including the tabs ands it's only when I set exitUntilCollapse on the CollapsingToolbarLayout that the tabs remain after scrolling. The catch is when I set this flag my elevation shadow stops rendering! Why could this be? Is there a way around it, is there another way to stop my tabs disappearing?
I've included some of my relevant layout code below:
<com.ss.views.CustomBackgroundAppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="350dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_behavior="com.ss.views.FlingBehaviour"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:expandedTitleMarginBottom="0dp"
app:expandedTitleMarginEnd="0dp"
app:expandedTitleMarginStart="0dp"
app:expandedTitleMarginTop="0dp"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:titleEnabled="false"
>
<include
android:id="#+id/tab_layout"
layout="#layout/include_tab_layout"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/main.toolbar"
android:minHeight="100dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
<include
android:id="#+id/user_dash"
app:layout_collapseMode="parallax"
layout="#layout/include_toolbar_user_dash"/>
</android.support.design.widget.CollapsingToolbarLayout>
</com.ss.views.CustomBackgroundAppBarLayout>
The main problem I've currently got with the CollapsingToolbarLayout is, that whatever I'm trying, the minHeight attribute of my Toolbar does not have any effect.
My desired result would be this:
(The CollapsingToolbarLayout with a certain expanded height and a certain collapsed height (in the example 180dp), while the title either collapses or stays on the top)
But whatever I do, the title sometimes is in the center, won't completely collapse or the minHeight is ignored anyway. I have tried to set the minHeight for either AppBarLayout, CollapsingToolbarLayout, the toolbar itself, any contents, etc. also with different approaches found on the web but with no luck.
Here is the basic xml:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:minHeight="180dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="#android:color/transparent"
app:expandedTitleGravity="bottom"
app:expandedTitleTextAppearance="#style/TextAppearence.App.ToolbarTitle"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="#android:color/transparent">
<com.xxxxxx.custom.Banner
android:id="#+id/parallax_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/xxxxxxxx"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.6"
app:layout_scrollFlags="scroll" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="180dp"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
I hope this is enough content to explain my problem.
Any help is appreciated, thanks!
This one is pretty easy. Just set bottom margin of your Toolbar to whatever space you want to be reserved in the collapsed version.
The reasoning behind this is simple. CollapsingToolbarLayout inherits from FrameLayout which stacks images on top of each other. The only things it takes in account when considering collapsed bounds are toolbar height and its top / bottom margins.
You can set the height to 180dp instead of using minHeight, and then add a TextView into the toolbar to serve as the title.
just set Toolbar collapseMode as "pin" mode, and height with your requirement size
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
I am trying to create some combined layout using CoordinatorLayout and also CollapsingToolbarLayout.
In the first state, when we on the most top page, and didn't scrolled yet, I want the toolbar to expend as shown below (yes, i did it):
In the second state, when starting to scroll down, the image and toolbar should disappear, as shown below (only tab will show):
And in the last state once I am at some point in the list (but not the top of the list) I want to start scrolling up, once I start scrolling up I want the toolbar (and not the expended one with the image) to start whowing, as shown below (if didn't reaches the top of the list, the image will not show, only the toolbar):
I was able to achive the the first state, but the other 2 state are problematic,
once toolbar is implemented inside CollapsingToolbarLayout, the flexability of what I can do with it outside of CollapsingToolbarLayout component is not clear.
I can't make the toolbar hide, if I do so, then it will only be shown once I reaches the top.
Anyways, my current XML (showing below) is in state where the first picture is implemented, but once I start scrolling down, the toolbar stay at the top and do not hide. Note: I must tell the toolbar to stay "pin" because if I didn't then the information inside the toolbar disappear, and only an empty toolbar will show (that's for another post, but it still interesting to know why this happen?).
here is my current xml:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/benefit_coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_material_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<include
android:id="#+id/toolbar_search_container"
layout="#layout/search_box"
android:layout_height="192dp"
android:layout_width="match_parent"
app:layout_collapseMode="parallax"
/>
<include
android:id="#+id/toolbar_benefit"
layout="#layout/toolbar_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentScrim="?attr/colorPrimary"
/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/benefit_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
app:tabIndicatorColor="#color/accentColor"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#android:color/black"
app:tabIndicatorHeight="4dp" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/benefit_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<include
layout="#layout/floating_btn_benefits"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
/>
</android.support.design.widget.CoordinatorLayou
I have fixed the issue, just to clerify, I wanted my Toolbar to be able to expand with a paralex image once it reaches the top, but I also wanted the toolbar to disappear if scrolling down, and show itself again (without the paralex image) once I scroll up. the paralex image effect should only displayed if I reaches the top.
So basically the solution is, change the component CollapsingToolbarLayout with the following attribute:
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
and also change toolbar component with the following attribute
android:minHeight="?attr/actionBarSize"
regarding my paralex effect image (which is my toolbar_search_container) I shouldn't add any layout_scrollFlags to it.
So why is it working?
To understand it, you need to know what is enterAlwaysCollapsed,
The enterAlwaysCollapsed effects views that added the minHeight attribute. this means, every child of CollapsingToolbarLayout which have minHeight will be effected by this attribute.
So my toolbar will be effected.
enterAlwaysCollapsed attribute definition in simple words:
Assuming enterAlways is declared and you have specified a minHeight, you can also specify enterAlwaysCollapsed. When this setting is used, your view will only appear at this minimum height. Only when scrolling reaches to the top will the view expand to its full height..."
Well, isn't this exactly what we want? (do not answer this retorical question ;) )
One more thing to add, the parallax component (toolbar_search_container) is depends on the toolbar to expand, and because the toolbar will expand only when it reaches the top, then this is all just working great!
The new code is :
<android.support.design.widget.CoordinatorLayout
android:id="#+id/benefit_coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_material_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
>
<include
android:id="#+id/toolbar_search_container"
layout="#layout/search_box"
android:layout_height="192dp"
android:layout_width="match_parent"
app:layout_collapseMode="parallax"
/>
<include
android:id="#+id/toolbar_benefit"
layout="#layout/toolbar_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:contentScrim="?attr/colorPrimary"
app:layout_collapseMode="pin"
android:fitsSystemWindows="true"
/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/benefit_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
app:tabIndicatorColor="#color/accentColor"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#android:color/black"
app:tabIndicatorHeight="4dp" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/benefit_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<include
layout="#layout/floating_btn_benefits"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
/>
</android.support.design.widget.CoordinatorLayout>
Add this line of code to your CollapsingToolbarLayout
app:layout_scrollFlags="scroll|snap|enterAlways|enterAlwaysCollapsed"
Update
I was looking into this because when I changed the size of the spacer manually it caused stuttering and thought the CollapsingToolbarLayout will help fix it.
Reading https://stackoverflow.com/a/16103503/2482564 help me fix the stuttering by using ObjectAnimator and setting its duration to 0.
I'm keeping the question open in case someone has a solution with CollapsingToolbarLayout
Original question
I'm trying to achieve the following behavior with CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout, Toolbar and TabLayout - whichever is appropriate for the task...
I want my initial view to look like this mockup
and the behavior when scrolling up should be:
the area marked in yellow disappears 1st
the area marked in blue disappears 2nd - it's only an area with color, no text
the area marked in pink - the tabs area, remains on the screen and is located at the top of the screen
I tried to work with the cheesesquare example and modified include_list_viewpager with the code below, but I get the normal collapsing tabs behavior with the shrinking title
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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"
android:minHeight="50dp"
android:background="#color/cardview_dark_background"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="50dp"
android:background="#color/cardview_shadow_start_color"
android:gravity="top"
android:orientation="vertical"
app:layout_collapseMode="pin">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/cardview_light_background"/>
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
any idea what should be changed to get the behavior I want? I tried other methods of changing the size of the spacer area manually, but it causes flickering on screen since I'm intruding in the middle of the scroll event
Remove the app:layout_scrollFlags="scroll|exitUntilCollapsed" from your CollapsingToolbarLayout