Develop Reference

How to make CollapsingToolbarLayout disappear completely after scrolling?

I'm trying to make a fragment "head" with two toolbars and horizontal scroll view between them. I want to make horizontal scroll view completely disappear after scrolling down but after scrolling there some black space and i don't know why. What attributes should i type to make it?
Here is my layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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_height="match_parent"
android:layout_width="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/tool"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:foregroundGravity="center"
android:src="#drawable/ic_arrow" />
</androidx.appcompat.widget.Toolbar>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:clipToPadding="false"
android:fitsSystemWindows="true"
app:layout_constraintTop_toBottomOf="#id/tool"
tools:context=".ui.menu.MenuFragment">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="220dp"
android:fitsSystemWindows="true"
android:theme="#style/Theme.PizzaTime.AppBarOverlay">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
</LinearLayout>
</HorizontalScrollView>
<androidx.appcompat.widget.Toolbar
android:id="#+id/support_action"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:layout_collapseMode="pin"
app:popupTheme="#style/Theme.PizzaTime.PopupOverlay">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:foregroundGravity="center"
android:src="#drawable/ic_arrow" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/scroll_content" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

After I deleted the following line from CoordinatorLayout:
android:fitsSystemWindows="true"
It started working correctly, hope it will be helpful for someone.

Donot want to expand Collapsing toolbar

I am using a collapsing Toolbar. If I start a specific Fragment I want to collapse the Toolbar so it behaves like a "normal" one and that the user can not expand it by himself. Also I want only the views ion nested scrollview to scroll and not the toolbar when i collapse. Here is my layout which I use for my Toolbar:
<?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/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/collapsing_height"
android:fillViewport="true"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:id="#+id/past_upcoming_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#efeded"
android:fitsSystemWindows="true"
android:orientation="vertical"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<TextView
android:id="#+id/upcoming_heading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center_horizontal"
android:padding="#dimen/spacing_normal_8dp"
android:text="#string/upcoming_appointments"
android:textSize="#dimen/text_size18sp" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/upcoming_heading">
<android.support.v7.widget.RecyclerView
android:id="#+id/upcoming_appointments_recycler_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:orientation="horizontal" />
<TextView
android:id="#+id/no_upcoming_list"
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/no_upcoming_appointment"
android:textSize="#dimen/text_size18sp" />
</FrameLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentBottom="true"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/past_appointments"
android:textSize="#dimen/text_size18sp" />
</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:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/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="match_parent"
android:background="#efeded"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/past_appointments_recycle_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
I have used AppBarLayout.setExpanded(false). It initially shows collapsed, but when I expand back it expands.
I have also used
CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) mAppBarLayout.getLayoutParams();
lp.height = (int) getResources().getDimension(R.dimen.collapsing_height);
This doesnot stick toolbar to the top. it scrolls up with nested scroll view. Please help.
Thanks in advance

Android CollapsingToolbarLayout issue without ImageView

Above screenshot you can see there is two images blue and pink
Blue is single image it's a ImageView
Pink is slider of images its FrameLayout with ViewPager
The problem is when i use ImageView then toolbar become transparent and Image set to background of toolbar for example blue image.
when I remove ImageView then it become gray and FrameLayout will not attached to background of toolbar like blue image find the screenshot below
here is my xml 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"
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.design.widget.AppBarLayout
android:fitsSystemWindows="true"
android:stateListAnimator="#anim/appbar_always_elevated"
android:id="#+id/appBarLayout"
app:elevation="0dp"
app:borderWidth="0dp"
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/collapse_toolbar"
android:layout_width="match_parent"
app:titleEnabled="false"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/test"
app:layout_collapseMode="parallax" />
<FrameLayout
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/layout_slider" />
</FrameLayout>
<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.AppBarOverlay"
app:titleMarginTop="15dp" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
layout_slider.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/view_slider_layout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
app:layout_collapseMode="parallax"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/slider_view_pager"
android:layout_width="match_parent"
android:layout_height="#dimen/slider_height">
</android.support.v4.view.ViewPager>
<LinearLayout
android:orientation="vertical"
android:layout_gravity="bottom|center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:visibility="gone"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:padding="5dip"
android:background="#drawable/rounded_rect_gray"
android:textColor="#color/white"
android:textSize="#dimen/text_very_small"
android:text="Published Apps and Courses"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_gravity="center|center"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<me.relex.circleindicator.CircleIndicator
android:id="#+id/indicator"
android:layout_width="match_parent"
android:layout_height="38dp"/>
</LinearLayout>
</LinearLayout>
</FrameLayout>
</LinearLayout>
I don't want blue image. I showed you just for example if I use ImageView then it's attaching to background of toolbar when I use other view it's not
Please help

if RecyclerView cant cover a full screen, the CoordinatorLayout will not work?

<?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:background="#color/fragment.background">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/fragment.background"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/fragment.background"
android:orientation="vertical"
app:layout_scrollFlags="scroll|enterAlways">
<TextView
style="#style/merchantHintText"
android:id="#+id/contract_template_title"
android:layout_width="match_parent"
android:background="#color/white"
android:padding="15dp"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="1dp"
android:src="#color/fragment.background" />
<com.tqmall.salestool.merchant.task.UploadImgLayout
android:id="#+id/contract_template_imglayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:background="#color/white"
android:orientation="vertical"
android:padding="15dp" />
<TextView
android:id="#+id/contract_template_info"
style="#style/merchantHintText"
android:layout_width="match_parent"
android:background="#color/white"
android:padding="15dp"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="1dp"
android:src="#color/fragment.background" />
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<com.tqmall.salestool.view.ListRecyclerView
android:id="#+id/contract_template_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:paddingBottom="40dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<TextView
android:id="#+id/contract_template_sure_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/text.red"
android:gravity="center"
android:padding="10dp"
android:textColor="#color/white"
android:textSize="20sp" />
</RelativeLayout>
When my adapter have enough number of data (which inflating a much higher view than screen), the LinearLayout in AppBarLayout will collapse correctly. However, if there are few data, it will not collapse. I read the source code of AppBarLayout, but not find the code cause that.
Why it acts like that?

Just put you Linear layout into CollapsingToolbarLayout 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: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: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:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- views -->
</LinearLayout>
<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>
<android.support.v7.widget.RecyclerView
android:id="#+id/scrollableView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Try this. It should work.

Can't see the entire text with a nestedscrollview and cardview

I use a coordinator layout, with a collapsing toolbar and a nestedscrollview.
Putting Lorem Ipsum code, I can't see the end of the text, because I can scroll, but not until the end.
And when I put more text, I can scroll further, but still not until the end.
Here is my example :
The last line isn't the last in my code.
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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="fr.djey.secretapp.MainActivity">
<android.support.design.widget.AppBarLayout
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"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:scaleType="centerCrop"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
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:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/lorem_ipsum"
android:textColor="#android:color/black"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</android.support.v4.widget.NestedScrollView>
<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>
Maybe that's because of the emulator?
EDIT :
Reply for the Madhur answer :
I've tested to put a frame instead of the nestedscrollview and replace with java this frame on navigationview item click. It replaces the frame here :
<?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="fr.djey.secretapp.MainActivity">
<android.support.design.widget.AppBarLayout
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"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="#+id/collapsing_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:scaleType="centerCrop"
android:src="#drawable/welcome"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
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">
</FrameLayout>
<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>
by this fragment :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="fr.djey.secretapp.MainActivity">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="BIENVENUE"
android:textColor="#android:color/black"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</android.support.v4.widget.NestedScrollView>
But as you can see, the nestedscrollview doesn't work doing like that :

Finally I've done like that :
putting the nestedscrollview in the main and a frame inside:
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/content_frame">
</FrameLayout>
</android.support.v4.widget.NestedScrollView>
Like that I can see more text, but not until the end. So I put a margin in the cardview inside the fragment : android:layout_marginBottom="80dp"

use this in for eg main.xml layout
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/lorem_ipsum"
android:textColor="#android:color/black"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</android.support.v4.widget.NestedScrollView>
and atlast inlcude this in your xml
<include layout="#layout/main"/>