Develop Reference

How to make my TabLayout header be under ToolBar?

I have the app with 5 tabs in TabLayout. I decided to initialize it in MainActivity. Each tab is a fragment and each of them has its own ToolBar, so I decided to initialize toolbars in every fragment separately. But the problem is that my toolbars now are under the TabLaout header. I want to ask how it's possible to move them down or maybe I should organize in some another way?
MainActivity:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.MainActivity">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/AppTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/tabs" />
</RelativeLayout>
Example of fragment:
<RelativeLayout 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=".activity.MainActivity">
<View
android:id="#+id/transparent_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="90"
android:background="#20000000"
android:visibility="gone" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_home"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:title="Your Wi-Fi is online">
<Button
android:id="#+id/btn_pause"
android:layout_width="90dp"
android:layout_height="36dp"
android:layout_margin="17dp"
android:layout_gravity="end"
android:background="#color/white"
android:text="#string/pause"
android:textColor="#color/midPurple"
android:textSize="14sp" />
</android.support.v7.widget.Toolbar>
</RelativeLayout>
TabLayout inisialization:
private void initUIComponents() {
mViewPager = findViewById(R.id.viewpager);
mTabLayout = findViewById(R.id.tabs);
mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
mViewPager.setAdapter(new MenuCategoryAdapter(getSupportFragmentManager()));
mTabLayout.setupWithViewPager(mViewPager);
for (int i = 0; i < mTabLayout.getTabCount(); i++) {
mTabLayout.getTabAt(i).setIcon(R.drawable.homeicon);
}
}
Example of ToolBar initialization:
private void initUIComponents(LayoutInflater inflater, #Nullable ViewGroup container) {
mRootView = inflater.inflate(R.layout.fragment_home, container, false);
mToolbarHome = mRootView.findViewById(R.id.toolbar_home);
mBtnPause = mRootView.findViewById(R.id.btn_pause);
if (mToolbarHome != null) {
((AppCompatActivity) getActivity()).setSupportActionBar(mToolbarHome);
}
mBtnPause.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View view) {
pauseWiFi(mToolbarHome, mBtnPause);
}
});
}
How does it looks like:

One way is you set your ViewPager's height to math_parent, and put TabLayout over your ViewPager with 80dp of top margin to reserve space for fragments toolbar
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.MainActivity">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/AppTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="80dp"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</RelativeLayout>
And in your fragment, put fake and empty TabLayout under toolbar to reserve the TabLayout's space and under it you can put your other views
<RelativeLayout 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=".activity.MainActivity">
<View
android:id="#+id/transparent_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="90"
android:background="#20000000"
android:visibility="gone" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_home"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:title="Your Wi-Fi is online">
<Button
android:id="#+id/btn_pause"
android:layout_width="90dp"
android:layout_height="36dp"
android:layout_gravity="end"
android:layout_margin="17dp"
android:background="#color/white"
android:text="#string/pause"
android:textColor="#color/midPurple"
android:textSize="14sp" />
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar_home"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/fake_tabs"
style="#style/AppTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<!-- Your other views -->
</LinearLayout>
</RelativeLayout>

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!

android:animateLayoutChanges="true" not working with toolbar

I'm trying to set visibility of some elements and I'm using the android:animateLayoutChanges="true" to animate this changes, the animation of the Floating Action Button happens ok, but not works with the menu items, they just blink. Here it is my xml and code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:fitsSystemWindows="true"
android:animateLayoutChanges="true"
android:gravity="center">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="#dimen/standard_elevation"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"/>
<FrameLayout
android:id="#+id/fl_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/my_toolbar">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/my_toolbar"
android:id="#+id/rlMainInside"
android:animateLayoutChanges="true">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/activity_vertical_margin"
android:clickable="true"
android:src="#drawable/ic_create_black_48dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:src="#drawable/main_center_image"
android:layout_centerInParent="true"/>
</RelativeLayout>
<FrameLayout
android:id="#+id/fl_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/my_toolbar"
android:layout_marginLeft="320dp"/>
</RelativeLayout>
And I use this method to set the visibility of some elements:
private void setMenuVisibility(boolean drawerOpenned) {
Menu menu = myToolbar.getMenu();
for (int i = 0; i < menu.size(); i++){
menu.getItem(i).setVisible(!drawerOpenned);
}
fab.setVisibility(drawerOpenned ? View.INVISIBLE : View.VISIBLE);
}
Can someone help me? I tried to put android:animateLayoutChanges="true" inside the toolbar element, but not happened also.

Using a SupportToolbar for phone layout and a standalone actionbar for tablet layout

Today I was thinking of a way to improve my tablet design, and I found this image
I wanted that so bad, as it looks amazing. I am searching google for about a hour now and I haven't come across any good tutorials. I've found this one: v21 Material Design for Pre Lollipop.
I started implementing this right away and everything I tried went completely wrong. The theming for the standalone actionbar needs to be the ThemeOverlay.AppCompat.ActionBar however on my phone layout I am extending the Theme.AppCompat.NoActionBar theme. (Theme is below)
It's just not clear what I should do to make something like the image above on Tablets and show the normal (custom) supportActionBar on Phones without messing up one of them.
Here is my AppTheme style (that I apply to my app)
<!-- Base application theme. -->
<style name="AppTheme" parent="#style/Theme.AppCompat.NoActionBar">
<!-- your app branding color for the app bar -->
<item name="colorPrimary">#color/primaryColor</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<!-- theme UI controls like checkboxes and text fields -->
<item name="colorAccent">#color/colorAccent</item>
</style>
Before you ask, yes I've found this quesion on SO, but no this isn't a duplicate question. The post that Chris Banes wrote didn't make things clear for me as well.
Is it possible to do this without destroying both the layouts? Thinking out loud, the reason for me to pick the custom toolbar was because I had included a custom searchview, but removed it. There is another view in the toolbar but I think that it could be removed if it's really necessary.
This is the layout of my phone version.
<?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/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:theme="#style/Theme.AppCompat.NoActionBar">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:orientation="vertical">
<include android:id="#+id/toolbar" layout="#layout/toolbar"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="#color/primaryColor"
android:minHeight="?attr/actionBarSize"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/appBarLayout"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/replaceFrameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/errorWarnings"
android:visibility="gone"
android:gravity="center"
android:layout_gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/errorIcon"
android:tint="#color/fab_material_red_500"
android:layout_centerVertical="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/errorDescription"
android:layout_below="#+id/errorIcon"/>
</RelativeLayout>
<com.tim.koers.wallpapers.UI.FilterButton
android:id="#+id/filterButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_menu_filter"
android:elevation="6dp"
android:tint="#color/fab_material_white"
android:visibility="gone"/>
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/drawer"/>
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
Here is my tablet 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/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:orientation="vertical"
android:background="#android:color/white"
android:layout_marginEnd="64dp"
android:layout_marginStart="64dp"
android:layout_marginTop="56dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- This is the secondary toolbar, 72dp also according to specs -->
<include android:id="#+id/toolbar" layout="#layout/toolbar"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="#color/primaryColor"
android:minHeight="?attr/actionBarSize"/>
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
android:layout_marginEnd="64dp"
android:layout_marginStart="64dp"
tools:context=".MainActivity" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/replaceFrameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/errorWarnings"
android:visibility="gone"
android:gravity="center"
android:layout_gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/errorIcon"
android:tint="#color/fab_material_red_500"
android:layout_centerVertical="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/errorDescription"
android:layout_below="#+id/errorIcon"/>
</RelativeLayout>
<com.tim.koers.wallpapers.UI.FilterButton
android:id="#+id/filterButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_menu_filter"
android:elevation="6dp"
android:tint="#color/fab_material_white"
android:visibility="gone"/>
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/drawer"/>
</android.support.v4.widget.DrawerLayout>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>

I found an article that implements this layout.
Create a Card Toolbar (Nested Toolbar) in Android
You can implement it to your tablet layout.
It is composed of a extended-height toolbar (blue) and a CardView with title and regular menu.
The basic structure:
<FrameLayout>
<!-- Extended Toolbar holding Drawer icon -->
<android.support.v7.widget.Toolbar />
<android.support.v7.widget.CardView>
<LinearLayout>
<!-- Card Toolbar -->
<android.support.v7.widget.Toolbar />
<!-- Divider -->
<View />
</LinearLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
step1 double the height of the toolbar
step2 setting up the CardView as the secondary toolbar
step3 Java code
origin toolbar: set Navigation Icon
CardView toolbar: set menu and title
See More
Android 5.0 - How to implement this tablet layout from Material Design guidelines
Googling this Picture

After many hours of trying things out I've come up with the following code:
For your phone layout use this as a base:
<?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/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/Theme.AppCompat.NoActionBar">
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:orientation="vertical">
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#color/primaryColor"
android:minHeight="?attr/actionBarSize"
style="#style/tabsWidgetIndicatorColors"
android:theme="#style/Theme.AppCompat.NoActionBar">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="#color/primaryColor"
android:minHeight="?attr/actionBarSize"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Put your content here -->
</FrameLayout>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/drawer"/>
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
For your tablet layout use this as a base:
<?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/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:theme="#style/Theme.AppCompat"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fitsSystemWindows="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="128dp"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
android:minHeight="?attr/actionBarSize"
android:id="#+id/actionToolbar"
/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/primaryColor"
android:minHeight="?attr/actionBarSize"
/>
</LinearLayout>
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:orientation="vertical"
android:layout_marginEnd="64dp"
android:layout_marginStart="64dp"
android:layout_marginTop="56dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- This is the secondary toolbar, 72dp also according to specs -->
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#color/colorSecondary"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
android:minHeight="72dp"
style="#style/tabsWidgetIndicatorColors"
>
<!--android:background="?attr/colorPrimary"-->
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="#color/colorSecondary"
android:minHeight="?attr/actionBarSize"/>
<!--android:background="?attr/colorPrimary"-->
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- your content here-->
</FrameLayout>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/drawer"/>
</android.support.v4.widget.DrawerLayout>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
In your main code use findViewById to find the Toolbar with the id #+id/toolbar and #+id/actionBar.
If you are on a tablet layout, both Toolbars should not be null. On a phone, the actionBar is null.
Check for that, and if it's not null, you will need to set the supportactionbar to the toolbar with the id #+id/actionBar, and you will need to inflate the menu on the toolbar with the id #+id/toolbar. While running the tablet/phone check, make a new private boolean accessible to your class named isInflateMenuEnabled. If the #+id/actionBar toolbar is not null, isInflateMenuEnabled should be false.
To wrap things up, this is the code:
public class MainActivity extends AppCompatActivity implements Toolbar.OnMenuItemClickListener{
private boolean isInflateMenuEnabled = true;
private Toolbar mToolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.activity_main);
//Check if it is a tablet or phone
mToolbar = (Toolbar) findViewById(R.id.toolbar);
Toolbar actionToolbar = (Toolbar)findViewById(R.id.actionToolbar);
if(actionToolbar != null){
isInflateMenuEnabled= false;
setSupportActionBar(actionToolbar);
actionToolbar.setTitle("");
mToolbar.inflateMenu(R.menu.menu_main);
mToolbar.setOnMenuItemClickListener(this);
}else{
mToolbar.inflateMenu(R.menu.menu_main); // Inflate the menu because there will be no menu inflated automatically anymore.
mToolbar.setOnMenuItemClickListener(this);
setSupportActionBar(mToolbar);
}
mToolbar.setTitle(getString(R.string.title));
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return isInflateMenuEnabled;
}
#Override
public boolean onOptionsItemSelected(final MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
// This will be working with your menu clicks
}
}

Toolbar Overlapping Layout

My layout is being overlapped by the Toolbar. I have to include a 56dp padding to push it down below the toolbar, which makes it awkward to work with (and likely also means I can't use AlignParentTop). The fragment screen (activity_login.xml) is pretty much straight up stock Google-provided code.
(Without Padding)
activity_login.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
tools:context="com.myProject.LoginActivity"
android:id="#+id/login2LinearLayout"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin">
<!-- Login progress -->
<ProgressBar
android:id="#+id/login_progress"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:visibility="gone" />
<ScrollView
android:id="#+id/login_form"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/email_login_form"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_email"
android:inputType="textEmailAddress"
android:maxLines="1"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_password"
android:imeActionId="#+id/login"
android:imeActionLabel="#string/action_sign_in_short"
android:imeOptions="actionUnspecified"
android:inputType="textPassword"
android:maxLines="1"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="#+id/email_sign_in_button"
style="?android:textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="#string/action_sign_in"
android:textStyle="bold" />
</LinearLayout>
</ScrollView>
app_bar_main.xml
<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"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
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:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<include layout="#layout/login" />
<include layout="#layout/activity_login" />
<include layout="#layout/home" />
<include layout="#layout/my_stats" />
<include layout="#layout/settings" />
<include layout="#layout/winners" />
<include layout="#layout/about" />
<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="#drawable/ic_add_white_24dp" />
</android.support.design.widget.CoordinatorLayout>

Put appbar code and main content code in LinearLayout with vertical orientation. That solved problem for me.
Here is my 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"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
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:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadeScrollbars="true"
android:layout_margin="10dp"/>
</LinearLayout>
<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>

This is very straight forward and easy. Just follow what I tried to say below.
You replace any View by using:
**
getFragmentManager().beginTransaction()
.replace(R.id.blankFragment, new SettingsFragment())
.commit();
**
//Here, blackFragment is id of FrameLayout View. You replace FrameLayout View with Fragment's Layout. Note: It should be FrameLayout or FrameLayout's derivatives Layout.
My whole code is:
1) SettingsActivity.java
**
public class SettingsActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fragment);
Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar2);
mToolbar.setTitle("Settings");
//// remove the left margin from the logo
mToolbar.setPadding(2, 0, 0, 0);//for tab otherwise give space in tab
mToolbar.setContentInsetsAbsolute(0, 0);
setSupportActionBar(mToolbar);
// Display the fragment as the main content
getFragmentManager().beginTransaction()
.replace(R.id.blankFragment, new SettingsFragment())
.commit();
}
}
**
2) activity_fragment.xml
**
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:fitsSystemWindows="true"
android:orientation="horizontal">
<!--scroll|snap-->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/statusbar"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
<FrameLayout
android:id="#+id/blankFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize"
android:layout_gravity="top"
android:fitsSystemWindows="true"
android:orientation="horizontal" />
</FrameLayout>
**
You can see my Screen after I replaced FrameLayout's View with Fragment's View

I think the most simple solution in this situation is just add below line to linear_layout inside of activity_login.xml
app:layout_behavior="#string/appbar_scrolling_view_behavior"

consider using this
int horizontalMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics());
int verticalMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics());
int topMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, (int) getResources().getDimension(R.dimen.activity_vertical_margin) + 30, getResources().getDisplayMetrics());
LinearLayout layout = (LinearLayout) getListView().getParent().getParent();
getListView().setPadding(horizontalMargin, topMargin, horizontalMargin, verticalMargin);
and then you use setupActionBar method to inflate the toolbar