I am trying to add shadow to a toolbar using elevation and the Design Library. The layout code is something like:
<android.support.design.widget.CoordinatorLayout ... >
<android.support.design.widget.AppBarLayout ... >
<android.support.design.widget.CollapsingToolbarLayout ... >
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:contentInsetStart="16dp"
android:background="#color/colorPrimary"
android:elevation="16dp"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
The complete application source code it is available on github.
The problem is that the toolbar height or the shadow are not behaving as I expect. If you watch the screen capture below, you can notice the problem.
What I need to do is to display the shadow below of the blue area.
Any hint is very appreciated.
As mentioned there, it's by implementation of CollapsingToolbarLayout - elevation is removed if CollapsingToolbarLayout shows non-pinned elements:
if (Math.abs(verticalOffset) == scrollRange) {
// If we have some pinned children, and we're offset to only show those views,
// we want to be elevate
ViewCompat.setElevation(layout, layout.getTargetElevation());
} else {
// Otherwise, we're inline with the content
ViewCompat.setElevation(layout, 0f);
}
So, all I can suggest is to make your own CollapsingToolbarLayout by copying original CollapsingToolbarLayout from Google, and make changes in this condition.
Move the elevation to the AppBarLayout. CollapsingToolbarLayout changes in size, so setting it on the AppBarLayout creates the shadow at the right position.
<android.support.design.widget.CoordinatorLayout ... >
<android.support.design.widget.AppBarLayout
android:elevation="16dp">
<android.support.design.widget.CollapsingToolbarLayout ... >
<android.support.v7.widget.Toolbar ... />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
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'm newbie in Android so this might be the easy question for you guys but I'm stuck. I want to remove shadow of Toolbar so I followed thread how to remove shadow below actionbar with AppCompat.Light.NoActionBar? and using app:elevation="0dp" I was able to remove the shadow of Toolbar but that change the current height of Toolbar as displayed in [Image 2]. I want maintain the same exact size of Toolbar but without shadow. I also used android:fitsSystemWindows="true" from thread Android toolbar height difference but it move Profile text on top and also create white line at bottom [Image 3] .
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:minHeight="?attr/actionBarSize"/>
</android.support.design.widget.AppBarLayout>
I guess we can use android:layout_height:Xdp or android:layout_height:Xpx but is this the last option or there is default way to do this.
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