Develop Reference

How to create this type of layout using coordinatorLayout , AppbarLayout ,CollaspingToolbarLayout

Anyone please guide me how to make this type of layout i have tiny knowledge about this.
it has
1> FloatingActionButton
2> 1 ImageView usging in CollapsingToolbarLayout to parallex
3>1 TabLayout with ViewPager
I am not able to create middle layer of layout in which 2nd ImageView and its relevant text and FloatingButton anchored.
here is the layout
<
<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="com.express.entertain.profileapp.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:statusBarScrim="#color/colorPrimary"
app:contentScrim="#color/colorAccent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/poster"
android:id="#+id/poster"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/tablayout"
android:layout_gravity="bottom"
app:tabMode="scrollable"
app:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/viewpager"
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_margin="#dimen/fab_margin"
android:clickable="true"
app:fabSize="mini"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|right"
android:src="#android:drawable/ic_dialog_email"
/>
</android.support.design.widget.CoordinatorLayout>

Android - Remove shadow between Toolbar and TabLayout

I'm trying to make a layout with CollapsingToolbarLayout. But I do not get one thing. I want to remove the shadow between Toolbar and TabLayout. I've tried several ways and I have not managed to remove the shadow. Can anybody help me? Thank you
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/adview"
android:fitsSystemWindows="true">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="50dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:background="?attr/colorPrimary"
android:translationZ="2dp"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="3dp"
app:tabMode="fixed"
app:tabTextColor="#color/tabs_text_selector" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<net.opacapp.multilinecollapsingtoolbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="20dp"
app:expandedTitleMarginStart="20dp"
app:expandedTitleTextAppearance="#style/detalle_txt_expanded"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/detalle_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/img_thumb_m"
android:transitionName="#string/transition"
app:layout_collapseMode="parallax"
tools:targetApi="lollipop" />
<ImageView
android:id="#+id/detalle_img_tipo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:layout_gravity="center_horizontal"
android:src="#drawable/img_edificio"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme"/>
</net.opacapp.multilinecollapsingtoolbar.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/detalle_info_fab_check"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="false"
android:src="#drawable/ic_check1"
app:fabSize="mini"
app:backgroundTint="#android:color/white"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
<include
android:id="#+id/adview"
layout="#layout/adview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />

Try setting app:elevation="0dp" (not android:elevation) for your AppBarLayout.
In case you don't have the app namespace in your xml, add xmlns:app="http://schemas.android.com/apk/res-auto".
The difference between these two properties can be found here.
After that, check that you're not adding some background/border with any of these properties:
<android.support.design.widget.TabLayout
android:background="?attr/colorPrimary"
android:translationZ="2dp"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/white"/>
Or the theme you're using for the AppBarLayout.

<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
app:titleTextColor="#android:color/white" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_tablayout" />
Use app:elevation="0dp" to remove the shadow. It has always worked for me. Hope it works for you.
And also by programatically,
appBar.setOutlineProvider(null);

You have to put the Toolbar and the TabLayout in the same AppBarLayout
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<net.opacapp.multilinecollapsingtoolbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="20dp"
app:expandedTitleMarginStart="20dp"
app:expandedTitleTextAppearance="#style/detalle_txt_expanded"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/detalle_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/img_thumb_m"
android:transitionName="#string/transition"
app:layout_collapseMode="parallax"
tools:targetApi="lollipop" />
<ImageView
android:id="#+id/detalle_img_tipo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:layout_gravity="center_horizontal"
android:src="#drawable/img_edificio"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme"/>
</net.opacapp.multilinecollapsingtoolbar.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:background="?attr/colorPrimary"
android:translationZ="2dp"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="3dp"
app:tabMode="fixed"
app:tabTextColor="#color/tabs_text_selector" />
</android.support.design.widget.AppBarLayout>
Take a look at this issue

I know the question is already answered. But I want to share something that I learnt the hard way so that people who are facing the same problems can save time.
You need to wrap AppBarLayout inside CoordinatorLayout or else app:elevation will not work.
Working example:
<CoordinatorLayout>
<AppBarLayout>
<Toolbar>

CollapsingToolbarLayout in combination with SwipeRefreshLayout and Recyclerview not working

I am struggling to get my toolbar to collapse, I have seen some other topics on stackoverflow that -seem- to be related, but modification to my code didn't help the situation.
The swiperefreshlayout still does it's job, and I can still scroll through the recyclerview-items, but my bar isn't collapsing..
Additionally : it seems that the toolbar is overlapping a part of my recyclerview now
Code:
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="6dp"
android:onClick="showInputDialog"
android:src="#drawable/ic_action_add"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
/>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/MyToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swiperefresh"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_collapseMode="parallax">
<android.support.v7.widget.RecyclerView
android:id="#+id/aandelenlijst"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical">
</android.support.v7.widget.RecyclerView>
</android.support.v4.widget.SwipeRefreshLayout>

Android Tabs (within tabs there should be scroll view) with collapse header

Android tabs with collapse header, this header is below Action bar where screen will be present, so tabs will be almost center of the layout
So first i need header to be scrolled and then after reaching some height then the scroll view within the selected tab should scroll.
Please Download zip file from below link
http://www.filedropper.com/profilescreenimp2

Make your layout as below:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
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/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textStyle="bold"
style="#android:style/TextAppearance.Medium"
android:text="Toolbar Title" />
</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:background="#color/colorPrimary"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/white"
app:tabMode="fixed" />
</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.CoordinatorLayout
android:id="#+id/homeCoordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/homeAppBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/homeCollapseToolbar"
android:layout_width="match_parent"
android:layout_height="350dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
//This can be changed to ImageView
<com.daimajia.slider.library.SliderLayout
android:id="#+id/homeSliderLayout"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="350dp"/>
<android.support.v7.widget.Toolbar
android:id="#+id/homeToolbar"
android:title=""
android:layout_width="match_parent"
android:layout_height="115dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp" >
<ImageView
android:src="#drawable/ic_logo"
android:paddingLeft="10dp"
android:layout_gravity="center|top"
android:layout_width="wrap_content"
android:layout_height="35dp" />
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/homeTabLayout"
android:layout_marginBottom="15dp"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabGravity="center"
app:tabIndicatorColor="#color/colorAccent" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/homeViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

CollapsingToolbarLayout + TabLayout, strange toolbar title margin

I have a srange toolbar title behaviour that I doubt to be valid.
collapsed :
extended :
The strangest part is that the
app:titleMarginTop
does not have any effect on the title placement.
Here is my 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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.m360learning.app.activity.UserDetailsActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#drawable/background_navigation_drawer"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerInside" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabIndicatorColor="#color/colorAccent" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
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"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
Any help would be greatly appreciated.
Thanks
---Edit :
If I set the toolbar size to "actionbarsize"
And it doesn't change the expanded behaviour.
------------ FINAL EDIT -- CORRECTION
<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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_navigation_drawer"
android:fitsSystemWindows="true"
android:paddingBottom="?attr/actionBarSize"
android:paddingEnd="30dp"
android:paddingLeft="30dp"
android:paddingRight="30dp"
android:paddingStart="30dp"
app:layout_collapseMode="parallax">
......
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
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"
android:background="?attr/colorPrimary"
app:tabGravity="fill"
app:tabIndicatorColor="#99FFFFFF"
app:tabIndicatorHeight="6dp"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

I think your TabLayout should be outside your CollapsingToolbarLayout while still inside your AppBarLayout:
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#color/colorAccent" />
</android.support.design.widget.AppBarLayout>
A tab section is part of the app bar, but not part of the tool bar.

#kris larson answer is ok but unfortunatelly doesn't work if we want transparent parallaxed TabLayout background. To make it works you need to do as follows:
add expandedTitleMarginBottom to CollapsingToolbarLayout
set layout_height to TabLayout as constant value
add layout_marginBottom to Toolbar with same value as TabLayout height
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:expandedTitleMarginBottom="56dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<YourMagicViewWithBackgroundImageTextAndOtherStuff
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="48dp"
app:layout_collapseMode="pin" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="bottom" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>