Develop Reference

I have a Collapsing toolbar and nested scroll view, I cant make it work

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.RestaurantMenuActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:elevation="0dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolMenuBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/red"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark" />
</com.google.android.material.appbar.AppBarLayout>
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="50dp"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
>
<ImageView
android:id="#+id/rest_image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="#drawable/restaurant_image"
/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="250dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="450dp">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerViewRestaurantMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:nestedScrollingEnabled="false"
/>
<RelativeLayout
android:id="#+id/relativeLayoutProceedToCart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
android:visibility="invisible">
<Button
android:id="#+id/btnProceedToCart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/red"
android:text="Proceed to Cart"
android:textColor="#color/white" />
</RelativeLayout>
</RelativeLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<RelativeLayout
android:id="#+id/progressMenu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<ProgressBar
android:theme="#style/CircularProgress"
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
</androidx.drawerlayout.widget.DrawerLayout>
This is the Xml file, and I have a collapsing toolbar and a nested scroll view, but it isn't working, when I scroll the page the collapsing toolbar isn't working.
I have an image in the collapsing toolbar and a recycler view in the nested scroll view, when I scroll the recycle view the image view should collapse. But that isn't happening and is acting like a normal thing.

Having a recycler view as only child of nested scroll view is a bad practice since you are essentially taking away the one powerful aspect of recyclerview this way. Instead make the rest of the layout a part of nested layout as well and make recycler view android:nestedScrollingEnabled=false
After that add app:layout_behavior="#string/appbar_scrolling_view_behavior" to nested scroll view.
Edit:-
Try adding toolbar inside collapsingToolbar with
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
Since collapsing toolbar is a frame layout you may have to adjust some margins to make it look like what you have right now

how to put scroll view in collapsing toolbar layout in android?

I want something similar to below asked question where instead of 'view 1' ,it's going to be a scroll view :
android: Create layout which collapse on scrolling
<?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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:background="#456342"
android:layout_height="match_parent"
android:layout_marginBottom="50dp"
android:clickable="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:theme="#style/AppTheme.AppBarOverlay"
app:contentScrim="?attr/colorPrimary">
<android.support.v7.widget.Toolbar
android:id="#+id/activity_subcard_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_collapseMode="pin"/>
<include layout="#layout/activity_sub_card_content1"
android:layout_height="200dp"
android:layout_width="match_parent"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/activity_sub_card_content2" />
</android.support.design.widget.CoordinatorLayout>
Given below xml code is my layout 'activity_sub_card_content1' that i have included in my CollapsingToolbarLayout. i want something similar to this:
How to place a layout below toolbar in collapsing toolbar layout?
but it has a relative layout that is not too long. Mine will be long,so i want to put my layout in scroll view.
The code i have tried shows my scrollview,but it does not scroll it,instead it collapses the toolbar.
<ScrollView android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/trial"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:clickable="true"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_margin="20dp"
android:layout_width="match_parent"
android:layout_height="200dp">
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_margin="20dp"
android:layout_width="match_parent"
android:layout_height="200dp">
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_margin="20dp"
android:layout_width="match_parent"
android:layout_height="200dp">
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_margin="20dp"
android:layout_width="match_parent"
android:layout_height="200dp">
</android.support.v7.widget.CardView>
</LinearLayout>
</ScrollView>

You could try adding these two lines in your code:
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<Your code here with
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.widget.NestedScrollView>

Can you try to add this tag
app:layout_behavior="#string/appbar_scrolling_view_behavior"
<ScrollView android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/trial"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
xmlns:android="http://schemas.android.com/apk/res/android">
----- your code
</ScrollView>
AppBarLayout also requires a separate scrolling sibling in order to know when to scroll. The binding is done through the AppBarLayout.ScrollingViewBehavior class, meaning that you should set your scrolling view's behavior to be an instance of AppBarLayout.ScrollingViewBehavior. A string resource containing the full class name is available.
Check this link: https://developer.android.com/reference/android/support/design/widget/AppBarLayout.html

Fragment from View Pager hiding behind Tab Bar

I am having an issue with a Tab bar and ViewPager in my android project. What the app does it has an activity which hosts a tab layout and then has 2 fragment which represents each of the tabs.
When the activity is opened it posts to an API to get some data and puts the data into a data adapter for a Recycler View and Card layout in each of the fragments.
The recycler view will contain 3 items but only 2 are being shown as the first is being hidden under the toolbar and/or the tab bar as shown in the screenshot below.
Below is the layout file of my activity
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.BoardiesITSolution.CritiMonApp.AppsActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<include layout="#layout/toolbar" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill" />
</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_behaviour="#string/appbar_scrolling_view_behaviour" />-->
</android.support.design.widget.CoordinatorLayout>
Below is the layout of the fragment
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<view
android:id="#+id/recycler_view"
class="android.support.v7.widget.RecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true" />
</LinearLayout>
Below is the layout for card layout
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cardview="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_margin="8dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:elevation="5dp">
<TextView
android:id="#+id/txtApplicationName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:maxLines="3"
android:padding="8dp"
android:textColor="#222"
android:textSize="15dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
Below is the screenshot as mentioned above which shows the problem. I've pixelated some of the text but it should you what I mean, there should be 3 items but the first item is hiding underneath the tab bar.

Edit: As suggested below by #smeet and #hardik, adding the scroll behavior app:layout_behavior="#string/appbar_scrolling_view_behavior" should fix the problem while preserving the scroll behavior. Scroll behaviors only work if the view is a direct child of the coordinator layout.
Old Answer
Just Wrap your appbar layout and viewpager in a vertical LinearLayout
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.BoardiesITSolution.CritiMonApp.AppsActivity">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
//appbar layout
//viewpager
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
From the docs, CoordinatorLayout is a super-powered FrameLayout. So you can expect the typical "lay views on top of other views" FrameLayout behavior.

Adding :
app:layout_behavior="#string/appbar_scrolling_view_behavior"
in ViewPager resolved issue in my case.

if we will wrap app bar layout with linear layout than toolbar will not hide when you scroll so accepted answer might not help you if you want to hide toolbar when you scroll.
Smeet did it right way but not explained! here is full example with explanation.
add app namspace to CoordinatorLayout
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
......
>
and just add below line in your ViewPager
app:layout_behavior="#string/appbar_scrolling_view_behavior"
complete xml will be as below
<?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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>

ViewPager with Coordinator Layout

I have an activity layout that looks like the following:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent" />
The viewpager has two fragments, one with a RecyclerView and one with a LinearLayout.
The fragment with RecyclerView works as expected and the action bar scrolls off screen when the RecyclerView is scrolled.
The other fragment with the LinearLayout isn't displaying as I would like it to however. The LinearLayout is drawn below the TabLayout and extends offscreen. I would like it to be resize to fill the space available below the TabLayout without extending offscreen. The LinearLayout looks like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/station_detail_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
layout="#layout/station_detail_title"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3" />
<include
layout="#layout/station_detail_body"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2" />
</LinearLayout>
<TextView
android:id="#+id/text_view_station_detail_empty"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal|center_vertical"
android:text="#string/text_view_station_detail_empty"
android:visibility="gone" />
</LinearLayout>
Thanks for any help, much appreciated!

I think you need to add nested scroll view to your linearlayout.

Alex I thing you have to use two CoordinatorLayout in two fragment and you can include your linear layout inside it .

How to wrap Coordinator Layout in a LinearLayout?

I´m attempting to use the new Android Design Library´s CoordinatorLayout inside of another layout. The CoordinatorLayout contains a RecyclerView. What I´m attempting to do is to place a simple LinearLayout below the CoordinatorLayout. This layout should be placed below the CoordinatorLayout. This is XML I´m using:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="fill_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/conversation_recyclerview"
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>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:orientation="horizontal">
<EditText
android:layout_width="fill_parent"
android:layout_height="match_parent" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_send_white_36dp" />
</LinearLayout>
</LinearLayout>
As you can see, I´m attempting to wrap the CoordinatorLayout inside another LinearLayout. However, on-screen the second part of the layout doesn´t even render.

That is because the CoordinatorLayout has layout_height="match_parent". That means it takes the whole size of the screen and your LinearLayout is rendered but it is below the CoordinatorLayout and off-screen.
An easy way to fix this would be setting the weight of the CoordinatorLayout to fill the parent layout but leave space necesseary to display the footer LinearLayout. This would be
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
But this is not ideal way so I would suggest leaving the CoordinatorLayout as the root element and place your LinearLayout just bellow the RecyclerView where it belongs. Since your footer LinearLayout has fixed height this can be done easily
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.AppBarLayout>
<android.support.v7.widget.Toolbar />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:paddingBottom="150dp" />
<LinearLayout
android:layout_height="150dp"
android:layout_gravity="bottom">
<EditText />
<ImageButton />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>