Develop Reference

How to make Toolbar and TabLayout still visible even when CollapsingToolbarLayout is collapsed?

How to make Toolbar and TabLayout still visible even when CollapsingToolbarLayout is collapsed?
For example, i have a CollapsingToolbarLayout with app:contentScrim animation that contains a Toolbar, ImageView and TabLayout but i want to hide the ImageView when scrolling, but still show the Toolbar and TabLayout inside the CollapsingToolbarLayout even when i swipe up and collapse the view.
I want the Toolbar and TabLayout background to animate into a transparent color when expanding the CollapsingToolbarLayout, and should animate into a solid color as specified by app:contentScrim when collapsing the view.
I'm trying to achieve such in the image:
Image Credits: CollapsingToolBarLayout with TabLayout and ViewPager

I think i found a solution:
<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/htab_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/htab_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:titleEnabled="false">
<ImageView
android:id="#+id/htab_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/header"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.3"
android:background="#android:color/black"
android:fitsSystemWindows="true"/>
<android.support.v7.widget.Toolbar
android:id="#+id/htab_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:layout_marginBottom="48dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="#+id/htab_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabIndicatorColor="#android:color/white"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#color/white_70"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/htab_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/></android.support.design.widget.CoordinatorLayout>
Credits: https://blog.iamsuleiman.com/parallax-scrolling-tabs-design-support-library/comment-page-3/#comment-52129

Toolbar shadow not showing

My app has a fragment with tablayout and it shows a shadow with elevation:
<android.support.design.widget.TabLayout
android:id="#+id/my_music_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/tab_bg"
android:elevation="4dp"
app:tabSelectedTextColor="?attr/color_tab_text_selected"
app:tabTextColor="?attr/color_tab_text"
app:tabIndicatorColor="?attr/color_tab_text_selected"
app:tabIndicatorHeight="4dp" />
But when I switch to another fragment that doesn't have a TabLayout, the shadow doesn't appear:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay"
app:expanded="true" >
<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:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false" >
<include
layout="#layout/imageview_appbar"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
What am I doing wrong?

I got it to work by adding the following codes to my MainActivity class:
AppBarLayout layout = (AppBarLayout) findViewById(R.id.appbar);
layout.setStateListAnimator(null);
ViewCompat.setElevation(layout, 8);

Appbarlayout doesn't display shadow if it contains a scrollable collapsing toolbar, it is hardcoded to act so, probably because of performance concerns.
Try workarounds such as adding a plain view to bottom of appbar and setting its background to a shadow drawable ( manually coded gray gradient )

app:collapsedTitleGravity="center" doesn't work properly

I'm trying to make collapsing title to center by app:collapsedTitleGravity="center" in CollapsingToolbarLayout but actually title not center. I saw suspicious unnamed-view between title and up button
Is it issue form design support lib?
Is there any way to overcome this?
I saw a person who occured like me in here.
Here is screen shot
This is suspicious unnamed-view
Here is activity_main
<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"
tools:context=".ui.profile.detail.ProfileDetailActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/abl_profile"
android:layout_width="match_parent"
android:layout_height="200dp"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/ctl_profile"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
android:layout_marginTop="52dp"
app:expandedTitleMarginStart="16dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:collapsedTitleGravity="center_horizontal">
<android.support.v7.widget.AppCompatImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:src="#mipmap/ic_launcher"
app:layout_collapseMode="parallax"/>
<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.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_profile" />
</android.support.design.widget.CoordinatorLayout>
In MainActivity.java
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
style.xml is
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"/>

This will resolve the issue.
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
There is padding reserved so that your title is not next to toolbar icon.

There is an attribute expandedTitleGravity that you can use with the CollapsingToolbarLayout to center the expanded title text. Add this to your CollapsingToolbarLayout
app:expandedTitleGravity="bottom|center_horizontal"

How to remove transparent Toolbar padding when collapsed in CollapsingToolbarLayout

I use CollapsingToolbarLayout in my app but when it was collapsed, there is a marginLeft and marginRight in toolbar like picture below.
When I set the toolbar background not transparent ,such as red,it look as normal.
So how should I remove the margin？
I want it be this below but background to be transparent
my xml code is
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/transparent">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:collapsedTitleGravity="center_horizontal"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:expandedTitleGravity="center_horizontal"
app:statusBarScrim="#color/transparent"
app:contentScrim="#color/transparent"
app:expandedTitleTextAppearance="#style/CollapsingToolbarLayoutExpandedText"
app:collapsedTitleTextAppearance="#style/CollapsingToolbarLayoutCollapsedText"
app:expandedTitleMarginTop="0dp"
app:expandedTitleMarginBottom="20dp">
<View
android:id="#+id/venueImage"
android:layout_width="match_parent"
android:layout_height="100dp"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/transparent"
android:layout_marginTop="#dimen/status_bar_height"
app:layout_collapseMode="pin"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

Adding app:elevation="0dp" to the AppBarLayout widget fixed this for me.
Also in my layout I have AppBarLayout nested inside CoordinatorLayout whereas your's is the reverse.

You can also set android:stateListAnimator null in your AppBarLayout; something like
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stateListAnimator="#null"> // This works

Toolbar's gravity (or positioning) not working properly in CollapsingToolbarLayout

I have a layout with Toolbar and TablLayout with some nice collapsing effect seen below with the help of a CollapsingToolbarLayout:
The first picture is OK. This is the behavior I want.
But the collapsed state have the toolbar in wrong place:
As you can see the Toolbar is below its default place regardless I set it's gravity to top.
Here is the full layout:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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="215dp"
app:expandedTitleMarginBottom="56dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/big_header"
android:fitsSystemWindows="true"
android:scaleType="centerInside"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="104dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="13dp"
/>
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
style="#style/CustomTabLayout"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
I would like to place the toolbar to its place, next to the "back" button in the non-collapsed state. Please help if you can.

This is a known problem which I too have faced. You need to "hack it" a bit.
If you don't need your title to animate from big to small, just put collapsingToolbar.titleEnabled = false, and use your Toolbar title instead.
If you want your title to animate from big to small in the Collapsing Toolbar, you can hack it like this:
Add an appBarLayout OffsetChanged listener and put in it this code:
if (Math.Abs(e.verticalOffset) >= appBarLayout.totalScrollRange - 35) //Play with the number, and you should probably use dp instead of a hardcoded pixel number.
{
collapsingToolbar.titleEnabled = false;
SupportActionBar.title = "YourTitle";
}
else
{
collapsingToolbar.titleEnabled = true;
SupportActionBar.title = "";
}
It flips between the two titles...

I found a simpler solution without any hacking and in pure xml:
use expandedTitleMarginBottom in CollapsingToolbarLayout to avoid expanded title overlapping TabLayout
set layout_height to TabLayout as constant value
add layout_marginBottom to Toolbar with same value as TabLayout layout_height
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="215dp"
app:expandedTitleMarginBottom="78dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/big_header"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="?attr/actionBarSize"
app:layout_collapseMode="pin" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>