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 )

Collapsing toolbar title gravity does not set to bottom

i am using collapsing toolbar with toolbar only here my purpose
is to use default parallex feature for toolbar,but the problem i am facing that back arrow and title in expanded form overlapping each other i tried to set expandedtitlegravity to bottom didn't work either
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="140dp"
android:background="#color/white"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:fitsSystemWindows="true"
app:collapsedTitleTextAppearance="#style/SavedCollapsedAppBar"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="20dp"
app:expandedTitleMarginStart="20dp"
app:expandedTitleTextAppearance="#style/SavedExpandedAppBar"
app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/white"
android:fontFamily="sans-serif-medium"
android:theme="#style/SavedToolbarColoredBackArrow"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme"
app:titleTextAppearance="#style/SavedCollapsedAppBar"
app:titleTextColor="#color/black" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

It's seems like, the problem is with the Toolbar.
set app:contentInsetStart in Toolbar i.e.
<android.support.v7.widget.Toolbar
...
app:contentInsetStart="72dp"
It may solve the problem.

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>

Primary difference between ToolBar and CollapsingToolBar

What is the difference between ToolBar and CollapsingToolBar in android?
I tried finding it online but couldn't get any useful resource

A toolBar looks like this:
You can move it anywhere on the screen you want. its treated just like a view.
Lets look how you can put it in its own layout file with other views:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp">
</Toolbar>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/gray"/>
and a collapsingtoolbar is a wrapper for doing a sort of animation on the toolbar and adding views like images to the tool bar. Here is an example:
When you swipe down on the collapsing toolbar it shows other views.
Here is a code example and notice how i put the toolbar inside of the collapsable toolbar, it wraps it:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<com.antonioleiva.materializeyourapp.SquareImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
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"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
note: you probably want to put that in a coordinator layout but i didnt' want to add more confusion.