Develop Reference

Android collapsable layout not working properly

I am using collapsable layout . Here is the main layout for that,
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout android:id="#+id/main_content"
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:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/bgheader"
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:background="#drawable/scenary"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:attrs="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
<FrameLayout
android:id="#+id/titleContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center">
<.utils.CustomFontTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Toolbar Title"
android:textColor="#ffffff"
attrs:customFont="handyman_bold"
android:textSize="8pt"
android:layout_marginLeft="-20dp"
android:id="#+id/toolbar_title"/>
</FrameLayout>
<ImageButton
android:id="#+id/btn_ToolBarRightBtn"
android:layout_width="32dp"
android:layout_height="28dp"
android:tag="0"
android:background="#null"
android:scaleType="fitXY"
android:src="#drawable/icon_shopping"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginRight="10dp"
/>
</android.support.v7.widget.Toolbar>
</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.TabLayout
android:id="#+id/tabs"
android:layout_gravity="bottom"
android:background="#color/offwhite"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.CoordinatorLayout>
Inside the ViewPager I have a recycler view. Here is what I see when I load the app ,
When I scroll up the recycler view I am seeing this,
I am not sure why I see the gap initially and later it is getting filled with the app primary color. What a I doing here?
Attached animated gif of my screen.
Thanks

One straightforward solution is to use design support library version 23.1.1 This issue happens for design support library 23.2.0 onwards.
compile 'com.android.support:design:23.1.1'
Second solution is removing the line android:fitsSystemWindows="true" from the CoordinatorLayout.
UPDATE :
in both case the toolbar is overlapping the image, so the portion under status bar is not visible
This is happening because CollapsingToolbarLayout class is a child of FrameLayout. So the views you pass in the framelayout will stack upon each other. that's why toolbar is overlapping the image. The simplest solution in your case I found is to put android:layout_marginTop="?attr/actionBarSize" in the ImageView.

There is no app:layout_behavior="#string/appbar_scrolling_view_behavior"in your FrameLayout
<FrameLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/titleContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"

CollapsingToolbarLayout: unexpected view stack behavior

It appears that children of the CollapsingToolbarLayout (a custom FrameLayout) do not adhere to the expected stack behavior of FrameLayouts. I expect the views to be drawn on top of each other in the order they are provided in the XML layout.
In the example below, when collapsing the CollapsingToolbarLayout, the "layout_button_bar" LinearLayout scrolls underneath the "button_follow" and "button_like" buttons. Provided that the LinearLayout is defined after the above mentioned buttons, I expect the LinearLayout to scroll over the two buttons, obscuring them, rather than below them. Is anyone familiar with a workaround?
<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/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/collapsible_app_bar_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/background_content_frame"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:src="#drawable/some_image"
app:layout_collapseMode="parallax"/>
<ImageView
android:id="#+id/image_header_gradient"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/scrim_top_bottom_banner"
app:layout_collapseMode="parallax"
tools:ignore="ContentDescription"/>
<android.support.v7.widget.Toolbar
android:id="#+id/collapsible_toolbar"
android:layout_width="match_parent"
android:layout_height="104dp"
android:minHeight="?attr/actionBarSize"
android:gravity="top"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"/>
<Button
android:id="#+id/button_follow"
android:layout_width="#dimen/text_button_width"
android:layout_height="wrap_content"
android:layout_gravity="bottom|start"
android:layout_marginStart="#dimen/bottom_landing_button_margin"
android:layout_marginBottom="#dimen/slide_handle_height"
android:gravity="center_vertical|start"
android:drawablePadding="#dimen/spacing_xsmall"
android:drawableStart="#drawable/selector_follow"
android:visibility="gone"
android:textColor="#color/vertigo_alabaster_white"
app:layout_collapseMode="parallax"/>
<Button
android:id="#+id/button_like"
android:layout_width="#dimen/text_button_width"
android:layout_height="wrap_content"
android:layout_gravity="bottom|start"
android:layout_marginStart="#dimen/bottom_landing_button_margin"
android:layout_marginBottom="#dimen/slide_handle_height"
android:gravity="center_vertical|start"
android:drawablePadding="#dimen/spacing_xsmall"
android:drawableStart="#drawable/selector_like"
android:visibility="gone"
android:textColor="#color/vertigo_alabaster_white"
app:layout_collapseMode="parallax"/>
<LinearLayout
android:id="#+id/layout_button_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/button_bar_height"
android:layout_gravity="bottom"
android:gravity="center_vertical"
android:orientation="horizontal"
android:background="#color/slide_handle">
<!-- 3 Buttons -->
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</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:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Library: com.android.support:design 23.0.1 | Theme: Theme.AppCompat.NoActionBar
Pre-collapse:
Mid-collapse:

Just wrap the like Button and the follow Button inside a Layout. For example a LinearLayout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center_vertical"
android:orientation="horizontal"
android:layout_marginBottom="80dp"
app:layout_collapseMode="parallax">
<Button
android:id="#+id/button_follow"
...
/>
<Button
android:id="#+id/button_like"
...
/>
</LinearLayout>

Collapsing Toolbar. How to adapt custom Layout instead of default ImageView

I want to make collasping toolbar, in which is my custom Layout . On the image below is presented use of new released design.support lib. On the img.1, the element (ImageView) is disappearing. In my project I want to disappear a Layout.
Because inside Layout will be ViewPager it can not be resized like the image, it should dissolve in Toolbar background - should become transparent.
img. 1
Additionaly I want to open/hide ToolbarLayout by moving ToolbarFooter - belt to move - bright blue Layout. So expand/collapse are not like in img.1 Instead it should works like status bar that shifts up and down by blick on ToolbarFooter.
img.2
The think is I read about it a lot (collapsing with button , layout inside) of but I've found any clue or implementation. I don't know how to approach to this topic.
I suppose that my ViewPager and RelativeLayout(or whatever) should be outside of the toolbar. And they should just take a place of toolbar view like this:
<android.support.v4.widget.DrawerLayout
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">
<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:clipChildren="false">
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_max_height"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/AppBarTheme">
<Button
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentTop="true"
android:layout_gravity="left|top"
android:gravity="center_vertical|left"
android:text="ToolbarTitle"
android:background="?android:attr/selectableItemBackground"
android:textAllCaps="false"/>
</android.support.v7.widget.Toolbar>
<net.android.app.views.ViewPagerToolbar
android:id="#+id/calendar_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="?attr/actionBarSize"/>
<RelativeLayout
android:id="#+id/toolbar_footer"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:layout_alignParentTop="false"
android:layout_alignBottom="#+id/app_bar">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginBottom="8dp"
android:text="#string/belt_to_move"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="#string/belt_to_move"/>
</RelativeLayout>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/app_bar">
<android.support.v4.view.ViewPager
android:id="#+id/vp_container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"/>
Now can anyone tell me what component should I use?
Support library offers CoordinateLayout, CollapsedToolbar, Appbar.
By standard approach can be use RelativeLayout or FrameLayout which overlap view. So guys what you recommend me, how from which side should I eat this cake?
UPDATED:
Finally I've found the solution. It isn't CollapsingToolbar but ViewDragHelper.
The solution I followed: Blog, GitHub project, YouTube explanation,

You need attach a viewPager above toolbar.
Example for ImageView :
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="240dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="2dp">
<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:elevation="2dp"
app:collapsedTitleTextAppearance="?attr/autoCompleteTextViewStyle"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
// put here your content
<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:elevation="2dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

Setting a gravity to a TabLayout inside a CollapsingToolbarLayout causes it to diassapear

I have the following XML layout:
<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:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="192dp"
android:background="#drawable/bg_bucket_list">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="144dp"
app:expandedTitleMarginBottom="#dimen/quadruple_margin"
app:layout_collapseParallaxMultiplier="0.7"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/bg_bucket_list" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_gravity="top"
android:background="#color/black_40" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:animateLayoutChanges="true"
android:gravity="top">
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="#dimen/single_margin"
android:layout_marginStart="#dimen/single_margin"
android:layout_marginTop="#dimen/quadruple_margin"
android:text="#string/my_places_for"
android:textColor="#color/white"
android:textSize="24sp"
android:visibility="gone" />
<TextView
android:id="#+id/sub_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/text"
android:layout_marginLeft="#dimen/single_margin"
android:layout_marginStart="#dimen/single_margin"
android:layout_marginTop="#dimen/quarter_margin"
android:text="#string/pick_category_or_business"
android:textColor="#color/white"
android:textSize="16sp"
android:visibility="gone" />
</RelativeLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="bottom"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:tabBackground="#color/transparent"
app:tabGravity="center"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/white"
app:tabTextColor="#color/grey_400" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
app:contentInsetLeft="#dimen/triple_margin"
app:contentInsetStart="#dimen/triple_margin"
app:popupTheme="#style/Theme.AppCompat.NoActionBar"
app:theme="#style/Theme.AppCompat.NoActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
If you look at the TabLayout, the gravity assigned to it (bottom) causes it to disappear. If I remove that, it shows but fixed to the top.
The reason I don't have the CollapsingToolBarLayout matching the AppBarLayout in size is because I've been experimenting with putting the TabLayout in that space and setting it's flags independent of the CollapsingToolbarLayout directly as a descendant of the AppBarLayout.
Setting it independent works, but then I don't have the ImageView Background with the mask 60% black opacity mask anymore.
I tried what was suggested here: Similar question
There's no difference however.
EDIT: I figured it out and answered my own question here: Answer
The important thing is to recognize the CollapsingToolBarLayout extends FrameLayout, so you can put more than 1 in An AppBarLayout which extends LinearLayout. You set the scroll behaviour by using the scroll flags available to an AppBarLayout's children views.

android:fitsSystemWindows not working on Toolbar

I'm using android library Android-ObservableScrollView from ksoichiro. I use his sample Flexible Space with viewpager and i modify it.
But there's some problem. You can see in my xml there is 2 android:fitsSystemWindows. One in LinearLayout, and the other in Toolbar. In LinearLayout working good. but in Toolbar is not working. Why this happen?
Thank you. Sorry for my bad english
theres my xml code:
<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">
<com.github.ksoichiro.android.observablescrollview.TouchInterceptionFrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="#dimen/flexible_background"
android:scaleType="centerCrop"
android:src="#drawable/bridge" />
<View
android:id="#+id/overlay"
android:layout_width="match_parent"
android:layout_height="#dimen/flexible_background"
android:background="?attr/colorPrimary" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true">
<FrameLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="#dimen/flexible_height">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:layout_margin="#dimen/abc_action_bar_default_padding_material"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="1"
android:minHeight="?attr/actionBarSize"
android:textColor="#android:color/white"
android:textSize="20sp" />
</FrameLayout>
<com.bright.nongkrongyuk.ui.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#android:color/black"
app:sliding_textColor="#drawable/sliding_tab_profile" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light" />
</LinearLayout>
</com.github.ksoichiro.android.observablescrollview.TouchInterceptionFrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:minHeight="?attr/actionBarSize"
android:fitsSystemWindows="true" />
</FrameLayout>

The android:fitsSystemWindows attribute sets a padding. This means the fitting applies to the child views. You would have to apply this either to your FrameLayout or put the Toolbar into a nested Layout
It's really tricky to make a proper fullscreen layout with views fitted to the screen. I subclassed Fragment where I can declare a content-view which will get padding depending on Status- and/or Navigationbar