I have a layout with collapsing toolbar and tabs as shown in attached image below
I want to show my tab layout on top while scrolling the list in anyone of the tabs
I have tried some links link1 and end with below result as shown in image below
I want to hide my toolbar ,profile image and textview completely while scrolling the list in any tabs
following is the layout xml code that I used
<?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="#android:color/background_light"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true">
<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="#color/background_color"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/main.backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/mobilebanner"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/main.toolbar"
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.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/user_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:text="abc"
android:gravity="center_horizontal"
android:lineSpacingExtra="8dp"
android:textSize="20sp" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#color/background_color"
app:tabTextAppearance="#android:style/TextAppearance.Widget.TabWidget"
app:tabTextColor="#color/black" />
<android.support.v4.view.ViewPager
android:id="#+id/htab_viewpager"
android:layout_width="match_parent"
android:layout_height="400dp" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="80dp"
android:layout_height="80dp"
app:layout_anchor="#id/main.appbar"
app:layout_anchorGravity="bottom|center_horizontal|center"
android:layout_margin="#dimen/activity_horizontal_margin"
android:src="#drawable/user" />
</android.support.design.widget.CoordinatorLayout>
Related
I have a collapsingToolbarLayout in my app. I put a ViewPager in top of my layout.I want to my toolbar be disappear in expended state and is pin in the collapsing state. I write this code for my layout, but when I scroll layout toolbar don't appear and rather than the part of my ViewPager appear.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
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:id="#+id/appbar"
android:layout_height="192dp"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:layout_scrollInterpolator="#android:anim/decelerate_interpolator"
app:toolbarId="#+id/toolbar"
android:fitsSystemWindows="true">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="200dp"
>
<android.support.v4.view.ViewPager
android:id="#+id/slider"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
></android.support.v4.view.ViewPager>
<me.relex.circleindicator.CircleIndicator
android:id="#+id/Indicator"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="center"
android:layout_marginTop="10dp" />
</FrameLayout>
<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/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/txtTitleCategory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/category_title"
android:layout_alignParentEnd="true"
android:layout_marginTop="30dp"
android:layout_marginEnd="20dp"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/categoryRecy"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txtTitleCategory"
android:layout_margin="20dp"/>
<TextView
android:id="#+id/txtTopCourseCat1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="دوره های محبوب"
android:layout_below="#+id/categoryRecy"
android:layout_alignParentEnd="true"
android:layout_marginTop="30dp"
android:layout_marginEnd="20dp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/temp"
android:layout_below="#+id/topCourseCat1Recy"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/topCourseCat1Recy"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txtTopCourseCat1">
</android.support.v7.widget.RecyclerView>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
This is screenshot of my app:
This is screenshot of my expected behavior :
Just change toolbar like this
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:background="#color/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
Thank you
i have created a activity with collapsing toolbar, but now i have added a bottom navigation view with 3 menu items in it.
but i noticed that, the content displayed in activity is hiding behind the bottom navigation view.
anyone having idea?
in short, the last some lines of my content layout are hiding behind bottom navigation view.
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"
xmlns:design="http://schemas.android.com/tools"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="32dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="250dp"
android:src="#drawable/p1"
android:background="#color/colorPrimary"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:gravity="center"
android:singleLine="true"
android:textColor="#android:color/white"
android:textSize="18sp" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:id="#+id/scroll"
android:padding="16dp"
android:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.widget.NestedScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="#menu/bottom_menu"
android:id="#+id/bottomMenu"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
android:layout_above="#+id/navigationbottom"
Insert this line at your view
Below is my code snipet.
<?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/coordinate"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light"
tools:context="com.ajinkyabadve.mywatchlist.movie_detail_new.MovieActivity"> <ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone" />
<include
android:id="#+id/retryLayoutNoInternet"
layout="#layout/no_internet_retry_layout"
android:visibility="gone" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="400dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<ImageView
android:id="#+id/poster"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/poster_of_movie"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include
android:id="#+id/content"
layout="#layout/content_movie" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="112dp"
android:background="#color/colorPrimary"
android:elevation="4dp"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="8dp"
android:minHeight="?android:attr/actionBarSize"
android:orientation="vertical">
<TextView
android:id="#+id/movieTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title"
android:textAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse" />
<TextView
android:id="#+id/movieOrignalTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="subtitle"
android:textAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle.Inverse" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
And below is content_movie.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:id="#+id/content_movie"
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="com.ajinkyabadve.mywatchlist.movie_detail_new.MovieActivity"
tools:showIn="#layout/activity_movie">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/overview" />
<include layout="#layout/cast" />
<include layout="#layout/facts" />
<!-- Below tablayout I want to work as a sticky header -->
<!--<android.support.design.widget.TabLayout-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="100dp"-->
<!--android:background="#color/colorPrimary" />--> </LinearLayout>
</android.support.v4.widget.NestedScrollView>
The commented tablayout should work as a sticky header(meaning it should not scroll when it reaches to top while scrolling).How to achive this effect using the coordinate layout?OR In any other way.Can we use custom behavior or something?
You can use the following library to achieve this effect.
https://github.com/emilsjolander/StickyScrollViewItems
This is basically a custom scroll view and within this scroll view you can make any child view or layout as sticky by adding the tag:
android:tag="sticky"
Hope it helps!
All you have to do is move the TabLayout to the AppBarLayout.
Since the TabLayout doesn't have scroll flags defined, it will stick to the top of the layout when you scroll.
When you do this, the app bar height needs to be changed to wrap_content and the 400dp height needs to go to the CollapsingToolbarLayout.
I just took the AppBarLayout snippet from your entire XML to demonstrate:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="400dp"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<ImageView
android:id="#+id/poster"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/poster_of_movie"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/colorPrimary" />
</android.support.design.widget.AppBarLayout>
You have to put your Toolbar inside CollapsingToolbarLayout
<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/coordinate"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light"
tools:context="com.ajinkyabadve.mywatchlist.movie_detail_new.MovieActivity">
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone" />
<include
android:id="#+id/retryLayoutNoInternet"
layout="#layout/no_internet_retry_layout"
android:visibility="gone" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="400dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<ImageView
android:id="#+id/poster"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/poster_of_movie"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="112dp"
android:background="#color/colorPrimary"
android:elevation="4dp"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Light">
<TextView
android:id="#+id/movieTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title" android:textAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse" />
<TextView
android:id="#+id/movieOrignalTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="subtitle"
android:textAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Su btitle.Inverse" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include
android:id="#+id/content"
layout="#layout/content_movie" />
Im using the following code to create a collapsing toolbar containing listview below it.
<?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:background="#android:color/white"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
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="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
android:id="#+id/love_music"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/backdrop_title"
android:textColor="#android:color/white"
android:textSize="#dimen/backdrop_title" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/backdrop_subtitle"
android:textColor="#android:color/white"
android:textSize="#dimen/backdrop_subtitle" />
</LinearLayout>
</RelativeLayout>
<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/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/activity_experience"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#+id/appbar" />
</android.support.design.widget.CoordinatorLayout>
The problem is that, the listview is overlapping with appbar layout and hence the listview appears within appbarlayout. The layout activity_experience contains the listview
CoordinatorLayout won't work like RelativeLayout. This is why android:layout_below="#+id/appbar" isn't working properly for you.
Instead add this to your layout="#layout/activity_experience":
app:layout_behavior="#string/appbar_scrolling_view_behavior"
I am using coordinator layout with a custom collapsing view and tablayout.
Here is the 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:fresco="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Light">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:id="#+id/cardParentLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax">
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/profilePicOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
fresco:actualImageScaleType="centerCrop"
fresco:overlayImage="#drawable/profile_overlay" />
<RelativeLayout
android:id="#+id/childParentToAnimate"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="invisible">
<include
android:id="#+id/cardLayout"
layout="#layout/layout_profile_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/profilePicCard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
fresco:actualImageScaleType="centerCrop"
fresco:backgroundImage="#drawable/profile_placeholder"
fresco:roundAsCircle="true"
fresco:roundingBorderColor="#color/white"
fresco:roundingBorderWidth="2dp" />
</RelativeLayout>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="51dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="fill_vertical"
android:fillViewport="true"
android:orientation="vertical"
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="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#color/blue_primary"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/white"
app:tabMode="fixed" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
The problem is that when collapsed, the toolbar is appearing white (default gray color) as you can see in this image.
If I add background attribute to toolbar in xml, the toolbar is appearing even when not collapsed