Develop Reference

Title in CollapsingToolbarLayout truncates on SearchView open

Whenever I open a SearchView within a CollapsingToolbarLayout, the page title gets squashed and truncated to 1 side for some reason rather than being positioned underneath the SearchView widget. Is there a way to prevent this from happening?
Main layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/myCoordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/collapsing_toolbar" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/myRecyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:scrollbarStyle="outsideInset"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/myFab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:src="#drawable/ic_search"
android:contentDescription="#string/string_search"
android:layout_margin="16dp" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Collapsing toolbar layout
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.appbar.AppBarLayout
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="wrap_content"
android:id="#+id/myAppBarLayout">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/myCollapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:maxLines="3">
<androidx.appcompat.widget.Toolbar
android:id="#+id/myToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>

Your CollapsingToolbarLayout was covered by your RecyclerView, try to change the Main layout

Nested co-ordinate layout and fitsSystemWindows overlaps status bar

Following is xml for my Main activity
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/bottom_nav_view_color"
app:itemIconTint="#color/bottom_nav_view_icon_tint_selector"
app:itemTextColor="#color/bottom_nav_view_text_color"
app:menu="#menu/navigation" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="70dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
app:srcCompat="#drawable/ic_assist_icon" />
</android.support.design.widget.CoordinatorLayout>
<include layout="#layout/navi_view_layout" />
Following is xml code for Home fragment
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="245dp"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
app:layout_behavior="com.gmr.android.FixAppBarLayoutBehavior">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#color/card_dark_text"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<ImageView
android:id="#+id/imgAirportBg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/screen_bg"
android:tint="#8a000000"
android:visibility="visible"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="2dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:title="#string/empty"
app:contentInsetStartWithNavigation="0dp"
app:layout_behavior=".view.ToolbarBackgroundAlphaBehavior"
app:layout_collapseMode="pin"
app:logo="#drawable/toolbar_logo"
app:navigationIcon="?attr/homeAsUpIndicator"
app:theme="#style/TransperantToolbar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/home_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:descendantFocusability="beforeDescendants"
android:focusable="true"
android:focusableInTouchMode="true"
android:layoutAnimation="#anim/layout_animation_recycler_slide_in"
android:paddingBottom="?attr/actionBarSize"
app:behavior_overlapTop="40dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
Following is xml code for Detail fragment
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="245dp"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
app:layout_behavior="com.gmr.android.FixAppBarLayoutBehavior">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/card_dark_text"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<ImageView
android:id="#+id/imgStoreBg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/screen_bg"
android:tint="#8a000000"
android:visibility="visible"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="2dp"
app:layout_behavior=".view.ToolbarBackgroundAlphaBehavior"
app:layout_collapseMode="pin"
app:navigationIcon="?attr/homeAsUpIndicator"
app:theme="#style/TransperantToolbar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/home_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:descendantFocusability="beforeDescendants"
android:focusable="true"
android:focusableInTouchMode="true"
android:layoutAnimation="#anim/layout_animation_recycler_slide_in"
android:paddingBottom="?attr/actionBarSize"
app:behavior_overlapTop="30dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
Now when I am calling Detail Fragement from Home Fragment my toolbar overlaps with status bar. If I call Detail fragment from any other fragment it is looking fine. Also toolbar in Home fragment does not overlap with status bar although xml for Home fragment and Detail fragment is nearly the same.
Picture one shows when detail fragment is opened normally
Picture two when detail fragment is opened from home page
Latest update:
This solution is helping me https://medium.com/google-developers/windows-insets-fragment-transitions-9024b239a436 but there are lots of changes involved any other short way to do it?

The symptoms you mention are very similar to the ones, mentioned in this question. To recap from the answer that I have provided there, the issue is, that window insets are being dispatched the first time fragment is being shown, but they are not being next time you are making a fragment transaction.
You have to manually ask for the window insets to be dispatched in order to receive correct system bar paddings:
private void replaceFragment() {
getSupportFragmentManager().beginTransaction()
.replace(R.id.content, new DetailFragment())
// NOTE, we are performing `commitNow()` instead of ordinary `commit()`,
// Because we want this commit to happen sychronously/immediately
.commitNow();
// Ask the framework to dispatch window insets once more to the root of your view hierarchy
ViewCompat.requestApplyInsets(findViewById(R.id.root));
}

Design XML like this,
<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:id="#+id/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/home_bg"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
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="wrap_content"
app:contentScrim="#color/white"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="#color/gray">
<ImageView
android:id="#+id/imgStoreBg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/screen_bg"
android:tint="#8a000000"
android:visibility="visible"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_collapseMode="pin"
app:theme="#style/AppTheme"
app:title="#string/app_name">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/_45sdp"
android:gravity="center"
android:singleLine="true"
android:textColor="#color/black"
android:textSize="14dp"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/home_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:descendantFocusability="beforeDescendants"
android:focusable="true"
android:focusableInTouchMode="true"
android:layoutAnimation="#anim/layout_animation_recycler_slide_in"
android:paddingBottom="?attr/actionBarSize"
app:behavior_overlapTop="40dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
In your JAVA file,
onCreate :
Window window = getWindow();
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}

I think you should add this in you detail fragment (just give it a try):
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:title="#string/empty"
app:logo="#drawable/customimage"
and make one image as transparent add it as customimage for detail, this would be probably a trick.
Thank you.

How to show BottomNavigation CoordinatorLayout in Android

In my application I want show BottomNavigation bottom of CoordinatorLayout and for this I write below code :
<?xml version="1.0" encoding="utf-8"?>
<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"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="150dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include
android:id="#+id/mainToolbar"
layout="#layout/toolbar_main" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<com.aurelhubert.ahbottomnavigation.AHBottomNavigationViewPager
android:id="#+id/mainViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/mainBottomNavigation"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.aurelhubert.ahbottomnavigation.AHBottomNavigation
android:id="#+id/mainBottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:layout_anchorGravity="bottom"
app:selectedBackgroundVisible="true" />
</android.support.design.widget.CoordinatorLayout>
But when run application show me BottomNavigation top of CoordinatorLayout!
How can I show BottomNavigation bottom of CoordinatorLayout ?

I hope the answer is not too late. I just had the same problem, I used android:layout_gravity="bottom".
I have a Toolbar, a BottomNavigationView, and in the middle, I have a FrameLayout that is used as a placeholder for a fragment. Here is my XML layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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"
android:background="#drawable/bg_main"
android:minHeight="?attr/actionBarSize">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorTab"
app:layout_scrollFlags="scroll|enterAlways"
/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/fragment_placeholder"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<android.support.v4.view.ViewPager
android:id="#+id/slide_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:itemBackground="#color/colorTab"
app:itemIconTint="#drawable/bottom_navigation_toolbar"
app:itemTextColor="#drawable/bottom_navigation_toolbar"
app:menu="#menu/bottom_bar"
/>
</android.support.design.widget.CoordinatorLayout>
Also check out this question, it uses almost the same layout, and it also shows how to change the behavior of the BottomNavigationView so that it hides when you scroll. If you wish to implement that feature make sure to create the class BottomNavigationBehavior (or whatever you want to call it) and add this line to your BottomNavigationView in XML:
app:layout_behavior="com.yourpackage.yourpackage.BottomNavigationBehavior"
Hope it helps!

This helps me resolve the issue of bottom of view going behind bottom navigation bar.
I have resolved it by:
adding app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
to the BottomNavigationView.
Changing the parent layout of ActivityMain to CoordinatorLayout &
Adding android:layout_gravity="bottom" to BottomNavigationView.

How to make RecyclerView fix header when scrolling

I have a RecyclerView that has been filled with data. It's just that when I scroll, the header does not fix the toolbar into position and results go up.
How do I hide the toolbar header when scrolling? Or more easily create fixed scroll on RecyclerView when scrolling?
All my code runs well, it's just a problem with the header that goes up when the scroll
ActivityMain Layout :
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.bertho.gmyl.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<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"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
app:tabBackground="#drawable/tab_selector"
app:tabIndicatorColor="#color/whiteColor"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
RecyclerView Layout :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/rvArticle"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Result :

Try setting android:fitsSystemWindows="false" as it takes entire screen (including status bar) to draw activity.
For more info.

Android tabs in fragment with collapsing toolbar

I have a Collapsing Toolbar in my app.
I use a NavigationDrawer and switch between the items with different fragments, while replacing a FrameLayout, and leaving the Toolbar across the app.
One of the fragments has a tab layout.
When I show that fragment it is shown underneath the Toolbar, with the Toolbar shadow overlapping it.
I want it to be on the same level with the Toolbar, and to look and act like it is in the same AppBarLayout.
Also, I want to make the tabs transparent when the Toolbar is expanded.
How do I reorganize my layouts so that this will work?
Here is my Xml:
Main Xml:
<android.support.v4.widget.DrawerLayout 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:layout_gravity="right"
android:clickable="true"
android:layoutDirection="rtl"
android:fitsSystemWindows="true"
android:id="#+id/drawer_layout">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/mainCoordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layoutDirection="rtl"
android:background="#EEEEEE"
android:clickable="true">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/toolbar_layout">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="250dp"
app:collapsedTitleGravity="right"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:collapsedTitleTextAppearance="#style/CollapsedTitleTextAppearance"
app:expandedTitleTextAppearance="#style/ExpandedTitleTextAppearance"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp">
<ImageView
android:id="#+id/headerImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:src="#drawable/soldier" />
<View
android:layout_width="match_parent"
android:layout_height="88dp"
android:background="#drawable/scrim_top"
app:layout_collapseMode="pin" />
<View
android:layout_width="match_parent"
android:layout_height="88dp"
android:layout_gravity="bottom"
android:layout_alignBottom="#+id/headerImage"
android:background="#drawable/scrim_bottom" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/WhiteTitle"
app:layout_scrollFlags="scroll|enterAlways"
app:titleTextColor="#color/White"
android:fitsSystemWindows="true"
android:layout_gravity="right"
android:layoutDirection="rtl"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/content_frame"
android:animateLayoutChanges="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fillViewport="true" />
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/mainFab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_gravity="bottom|end"
android:layout_marginLeft="16dp"
android:layout_marginBottom="16dp"
android:layout_marginTop="5dp"
android:elevation="8dp"
app:pressedTranslationZ="12dp"
app:backgroundTint="?android:colorAccent"
android:src="#drawable/ic_perm_phone_msg_white_24px" />
<LinearLayout
android:id="#+id/miniFabFrame"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
android:layout_alignParentLeft="true"
android:layout_gravity="bottom|end"
android:layout_marginLeft="20dp"
android:layout_marginBottom="80dp"
android:padding="0dp">
<android.support.design.widget.FloatingActionButton
android:id="#+id/messageFab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:elevation="8dp"
android:layout_marginTop="5dp"
android:layout_marginRight="0dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
app:pressedTranslationZ="12dp"
app:backgroundTint="?android:colorPrimary"
app:fabSize="mini"
android:src="#drawable/ic_textSMS_white_24px" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/callFab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginTop="5dp"
android:layout_marginRight="0dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:elevation="8dp"
app:pressedTranslationZ="12dp"
app:backgroundTint="?android:colorPrimary"
app:fabSize="mini"
android:src="#drawable/ic_call_white_24px" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:id="#+id/nav_view"
android:layoutDirection="rtl"
app:headerLayout="#layout/header"
app:menu="#menu/nav_menu" />
Fragment with tabs layout:
<LinearLayout 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:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fitsSystemWindows="true"
android:id="#+id/halachot_layout"
android:layoutDirection="ltr"
android:animateLayoutChanges="true">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:elevation="0dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.refractored.PagerSlidingTabStrip
android:id="#+id/halachotTabs"
android:layout_below="#id/halachot_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
pstsPaddingMiddle="false"
app:pstsShouldExpand="true" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/halachotPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
Any guidance will be appreciated.
Thanks.

You should make a strucure like this
<?xml version="1.0" encoding="utf-8"?>
<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/main_content"
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="256dp"
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"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabMode="scrollable"
app:tabContentStart="72dp" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="8dp"
android:src="#drawable/ic_done"
app:layout_anchor="#id/tabs"
app:layout_anchorGravity="center|left|start"
app:fabSize="mini"
app:layout_behavior="com.support.android.designlibdemo.ScrollAwareFABBehavior"
app:borderWidth="0dp" />
</android.support.design.widget.CoordinatorLayout>
Taken from here
Also see this answer it explained well there.
If you want further explaination then read these blogs
http://blog.grafixartist.com/parallax-scrolling-tabs-design-support-library
http://blog.nkdroidsolutions.com/collapsing-toolbar-with-tabs-android-example
https://lab.getbase.com/nested-scrolling-with-coordinatorlayout-on-android/

I had a similar problem.
I solved removing the elevation of the ActionBar while showing the fragment with the undesired shadow.
I added this two methods in the Activity:
public void setToolbarElevation(){
if (Build.VERSION.SDK_INT >= 21){
if (toolbar!=null) {
toolbar.setElevation(getResources().getDimensionPixelSize(R.dimen.actionbar_elevation));
}
}
}
public void removeToolbarElevation(){
if (Build.VERSION.SDK_INT >= 21){
if (toolbar!=null) {
toolbar.setElevation(0);
}
}
}
So when you call the fragment with the tabs, you call the removeToolbarElevation() in the activity and the shadow should disappear.
Let me know if it works for you.

When I show that fragment it is shown underneath the Toolbar, with the Toolbar shadow overlapping it.
I want it to be on the same level with the Toolbar, and to look and act like it is in the same AppBarLayout.
for this give the same elevation to the tab layout as per the material design guidelines described here default elevation is 4 dp. so try giving the tab layout elevation
Also, I want to make the tabs transparent when the Toolbar is expanded.
for this add a class like this
public abstract class AppBarStateChangeListener implements AppBarLayout.OnOffsetChangedListener {
public enum State {
EXPANDED,
COLLAPSED,
IDLE
}
private State mCurrentState = State.IDLE;
#Override
public final void onOffsetChanged(AppBarLayout appBarLayout, int i) {
if (i == 0) {
if (mCurrentState != State.EXPANDED) {
onStateChanged(appBarLayout, State.EXPANDED);
}
mCurrentState = State.EXPANDED;
} else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) {
if (mCurrentState != State.COLLAPSED) {
onStateChanged(appBarLayout, State.COLLAPSED);
}
mCurrentState = State.COLLAPSED;
} else {
if (mCurrentState != State.IDLE) {
onStateChanged(appBarLayout, State.IDLE);
}
mCurrentState = State.IDLE;
}
}
public abstract void onStateChanged(AppBarLayout appBarLayout, State state);
}
then in your activity use it like
appBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
#Override
public void onStateChanged(AppBarLayout appBarLayout, State state) {
Log.d("STATE", state.name());
//if state is expanded then set your tab layout background to transparent
}
});

You have go through this. As I am refering this Blog.
It is combination of what you have require means the combination of DrawerLayout + Fragments + CollapsingToolbarLayout.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
app_bar_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="192dp"
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"
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_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="#layout/app_bar_main">
<FrameLayout
android:id="#+id/content_main_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
Output :

Thank you everyone for all the input.
What I ended up doing, is this:
Main Xml:
<android.support.v4.widget.DrawerLayout 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:layout_gravity="right"
android:clickable="true"
android:layoutDirection="rtl"
android:fitsSystemWindows="true"
android:id="#+id/drawer_layout">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/mainCoordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layoutDirection="rtl"
android:background="#EEEEEE"
android:clickable="true">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/toolbar_layout">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:collapsedTitleGravity="right"
app:expandedTitleGravity="bottom|right"
app:expandedTitleMarginBottom="50dp"
app:collapsedTitleTextAppearance="#style/CollapsedTitleTextAppearance"
app:expandedTitleTextAppearance="#style/ExpandedTitleTextAppearance"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp">
<ImageView
android:id="#+id/headerImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:background="#drawable/soldier" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="top"
app:titleTextColor="#color/White"
android:fitsSystemWindows="true"
android:layout_gravity="right"
android:layoutDirection="rtl"
app:layout_collapseMode="pin"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabIndicatorHeight="3dp"
android:layoutDirection="ltr"
app:tabIndicatorColor="#android:color/white"
app:tabSelectedTextColor="#color/White"
app:tabTextColor="#color/Black"
app:tabMode="fixed"
app:tabGravity="fill" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/content_frame"
android:animateLayoutChanges="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fillViewport="true" />
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:id="#+id/nav_view"
android:layoutDirection="rtl"
app:headerLayout="#layout/header"
app:menu="#menu/nav_menu" />
</android.support.v4.widget.DrawerLayout>
Then, when I switch the fragments, I show the tabs only on the fragment that I want them in, and hide them when I don't want them to show:
toolbar_layout.SetExpanded(true);
tabs.Visibility = ViewStates.Gone;
And when I want to show them:
toolbar_layout.SetExpanded(false,false);
tabs.Visibility = ViewStates.Visible;
Although I don't get them transparent, but I decided to just collapse the toolbar when I show them, and disable expanding it on the fragment with the tabs.
Maybe not the best solution, but it works pretty well for me.
These links really helped me:
- http://blog.iamsuleiman.com/parallax-scrolling-tabs-design-support-library/
- http://blog.iamsuleiman.com/material-design-tabs-with-android-design-support-library/
- How to use a TabLayout with Toolbar inside CollapsingToolbarLayout?
- http://manishkpr.webheavens.com/android-material-design-tabs-collapsible-example/
- Disable Scrolling in child Recyclerview android - How to disable expanding the toolbar on the fragment with the tabs (that also contains a recyclerview).
See what it looks like here:
https://youtu.be/y2xLVSQ_NGM
It may not be the best solution, but I wanted a cleaner way that looks good.
Thank you all for your help!