Develop Reference

How to make one of child view of nestedscrollview to sticky header? - android

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" />

Related

I am trying to develop an android app which has an ActionBarDrawerToggle hamburger icon. Everything works fine but the hamburger icon is not displayed properly. Its clipped off from the top as you can see in the image. I have tried to adjust the height of the toolbar but no use. Is it something wrong with my layout file, kindly suggest. Below is my main activity file and the image file
<android.support.v4.widget.DrawerLayout
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:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:openDrawer="start"
tools:context="com.example.xxx.zzz.MainActivity">
<!--<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
</LinearLayout>-->
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/navView"
app:menu="#menu/drawer_menu"
app:headerLayout="#layout/header_layout"
android:layout_gravity="start"
>
</android.support.design.widget.NavigationView>
<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:background="#android:color/white"
android:fitsSystemWindows="true"
>
<android.support.v7.widget.Toolbar
android:id="#+id/mtoolbar"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:background="#color/colorPrimary"
android:layout_height="60dp"
app:layout_collapseMode="pin"
android:elevation="5dp"
android:minHeight="?attr/actionBarSize"
app:theme="?actionBarTheme"
/>
<!-- android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" -->
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
android:background="?attr/colorPrimary"
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:titleEnabled="false"
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="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/tea2"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
/>
<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/text_view_products"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Our Products"
android:textColor="#android:color/black"
android:textSize="#dimen/backdrop_title" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Buy online!"
android:textStyle="italic"
android:textColor="#android:color/black"
android:textSize="#dimen/backdrop_subtitle" />
</LinearLayout>
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/card_view" />
</android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.DrawerLayout>
enter image description here

There was a small mistake on my part. I needed to put the navigation view part after the coordinator layout part. On doing that it works fine. Modified code follows:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
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:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:openDrawer="start"
tools:context="com.example.himangshugogoi.bcd.MainActivity">
<!--<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
</LinearLayout>-->
<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:background="#android:color/white"
android:fitsSystemWindows="true"
>
<android.support.v7.widget.Toolbar
android:id="#+id/mtoolbar"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:background="#color/colorPrimary"
android:layout_height="60dp"
app:layout_collapseMode="pin"
android:elevation="5dp"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#layout/toolbar_layout"
app:theme="?actionBarTheme"
/>
<!-- android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" -->
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
android:background="?attr/colorPrimary"
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:titleEnabled="false"
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="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/tea2"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
/>
<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/text_view_products"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Our Products"
android:textColor="#android:color/black"
android:textSize="#dimen/backdrop_title" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Buy online!"
android:textStyle="italic"
android:textColor="#android:color/black"
android:textSize="#dimen/backdrop_subtitle" />
</LinearLayout>
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/card_view" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/navView"
app:menu="#menu/drawer_menu"
app:headerLayout="#layout/header_layout"
android:layout_gravity="start"
/>
</android.support.v4.widget.DrawerLayout>

I am creating an CollapsingToolbarLayout and it should look like this:
But it has this ugly blue "thing" under it:
And here is the XML (It's in a coordinatorlayout, but it gets cut away.):
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="false"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="#+id/post_view_photo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:transitionName="#string/transition_image"
app:layout_collapseMode="parallax" />
<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"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/card_margin">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Info"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="test" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#android:drawable/stat_notify_chat"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:layout_margin="#dimen/fab_margin"
android:clickable="true"/>
What could be the error? I also tried a vertical image. Thank you!

I have a layout like you, can you try with this layout structure , I think adding android:layout_below="#+id/profileactivity_appbar" was fixed my problem
Also you have no scroll flags in your Toolbar
Another thing I see; make sure your transition transforms image correctly:
<?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/apk/res-auto"
android:id="#+id/profileCoordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/profileactivity_appbar"
android:layout_width="match_parent"
android:layout_height="360dp"
android:theme="#style/AppTheme3.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/profileactivity_collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways|snap|enterAlwaysCollapsed"
app:statusBarScrim="#color/ColorPrimaryDark"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="#+id/profileactivity_fullimage"
android:layout_width="match_parent"
android:layout_height="match_parent"
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_scrollFlags="scroll|enterAlways|snap|enterAlwaysCollapsed"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/profile_recyclerview"
android:layout_below="#+id/profileactivity_appbar"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

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"

Hi I am experincing a kind of lag when NestedScrollView is scrolled and this scroll lag is observed until view does collapse once view is collapsed scroll is working fine.
Is there any solution not this.
Following is xml code
<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/app_bar_layout"
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:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<com.antonioleiva.materializeyourapp.widgets.SquareImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
app:cardElevation="#dimen/spacing_medium"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/spacing_large"
android:layout_marginRight="#dimen/spacing_large"
android:layout_marginTop="#dimen/spacing_large"
android:textAppearance="#style/TextAppearance.AppCompat.Headline" />
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/spacing_large"
android:text="#string/lorem_ipsum"
android:textAppearance="#style/TextAppearance.AppCompat.Body1" />
</LinearLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
style="#style/FabStyle"
app:layout_anchor="#id/app_bar_layout"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>

It seems you need to use this library. I think it will solve your problem.
For sake of completeness, I am posting the code taken from the above libraries' example
<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.support.v7.widget.RecyclerView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<me.henrytao.smoothappbarlayout.SmoothAppBarLayout
android:id="#+id/smooth_app_bar_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:layout_collapseMode="pin"
app:navigationIcon="#drawable/ic_toolbar_arrow_back"
style="#style/AppStyle.MdToolbar" />
</android.support.design.widget.CollapsingToolbarLayout>
</me.henrytao.smoothappbarlayout.SmoothAppBarLayout>
</android.support.design.widget.CoordinatorLayout>

I'm trying to make CollapsingToolbarLayout work with NestedScrollView, but it doesn't follow the scrolling of NestedScrollView correctly. It moves a little bit when the NestedScrollView reaches the top or bottom end, but that's clearly not the intended behavior.
Oh, and the contentScrim covers the ImageView immediately as well.
Here's a video of what happens: https://youtu.be/1GlTJq5fd0U
And here's 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:tools="http://schemas.android.com/tools"
android:id="#+id/articleLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.gmail.senokt16.bosphoruschronicle.ArticleActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/articleAppBarLayout"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/articleCollapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#color/primaryColor"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/article_app_bar">
<ImageView
android:id="#+id/articleActivityImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<include
android:id="#+id/article_app_bar"
layout="#layout/article_app_bar" />
</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"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_scrollFlags="scroll|enterAlways">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<TextView
android:id="#+id/articleActivityContents"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="30dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="5dp" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/articleFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#android:drawable/ic_menu_share"
app:layout_anchor="#id/articleAppBarLayout"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>

I ended up playing around with a bunch of xml tags and don't know which one fixed the problem, but here's the last version of 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:tools="http://schemas.android.com/tools"
android:id="#+id/articleLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.gmail.senokt16.bosphoruschronicle.ArticleActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/articleAppBarLayout"
android:layout_width="match_parent"
android:layout_height="280dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/articleCollapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#color/primaryColor"
app:expandedTitleMarginEnd="96dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<View
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="match_parent"
android:background="#drawable/gradient"
/>
<ImageView
android:id="#+id/articleActivityImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:scaleType="centerCrop"/>
<android.support.v7.widget.Toolbar
android:id="#+id/article_app_bar"
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<TextView
android:id="#+id/articleActivityContents"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="30dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="5dp" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/articleFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#android:drawable/ic_menu_share"
app:layout_anchor="#id/articleAppBarLayout"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>