I'm trying to add a floating action button in a CoordinatorLayout with a NestedScrollView which has 56dp of app:behavior_overlapTop.
my fab's layout_anchor is set on Appbar and it hides fine when CollapsingToolbarLayout collapsed, But because of overlapTop set on NestedScrollView, it is in a bad position.. see image below:
Here is my XML:
<com.google.android.material.appbar.AppBarLayout
android:paddingTop="#dimen/status_margin_top"
android:id="#+id/app_bar"
android:clipToPadding="false"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--app:contentScrim="#color/red"-->
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolBar"
android:layout_width="match_parent"
android:layout_marginTop="#dimen/behind_status_margin_top"
android:clipToPadding="false"
android:layout_height="match_parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:expandedTitleGravity="right|bottom"
app:expandedTitleMargin="16dp"
app:expandedTitleMarginBottom="112dp"
app:collapsedTitleGravity="center_vertical|right"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<androidx.constraintlayout.widget.ConstraintLayout
app:layout_collapseMode="parallax"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageView
app:layout_constraintDimensionRatio="H,11:8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:background="#drawable/appbar_gradient"
android:id="#+id/profile_pic"
app:srcCompat="#drawable/profile_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitStart"
android:adjustViewBounds="true" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.appcompat.widget.Toolbar
app:contentInsetRight="56dp"
android:id="#+id/toolbar"
app:titleMarginTop="#dimen/status_margin_top"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:minHeight="?actionBarSize"
app:layout_collapseMode="pin"/>
<ImageView
android:layout_marginTop="#dimen/status_margin_top"
app:layout_collapseMode="pin"
android:layout_gravity="right"
app:srcCompat="#drawable/back"
android:scaleType="center"
android:layout_width="56dp"
android:layout_height="56dp" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/nestedscrollview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:elevation="16dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:behavior_overlapTop="56dp">
<LinearLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:background="#color/light_white">
<!-- Content-->
</androidx.cardview.widget.CardView>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.floatingactionbutton.FloatingActionButton
app:layout_anchor="#id/nestedscrollview"
app:srcCompat="#drawable/camera"
app:elevation="24dp"
app:fabSize="normal"
android:layout_marginStart="24dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
try to trigger Appbar Collapse event using this and hide() fab when it Collapsed!
Related
I'm trying to collapse the AppBarLayout when I scroll up the RecyclerView. I'm trying this using Material Design Components.
So here's my code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.appbar.MaterialToolbar
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:id="#+id/toolbar"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<com.google.android.material.textview.MaterialTextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="18sp"
android:text="#string/app_name"/>
</com.google.android.material.appbar.MaterialToolbar>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/component_recycler_view"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="24dp"
android:layout_gravity="bottom|end"
android:contentDescription="#string/extended_fab_content_desc"
android:text="#string/extended_fab_label"
app:icon="#drawable/ic_plus_24dp"
app:layout_anchor="#id/component_recycler_view"
app:layout_anchorGravity="bottom|right|end"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="24dp"
android:layout_marginBottom="24dp"
app:layout_constraintBottom_toBottomOf="#id/component_recycler_view"/>
</androidx.constraintlayout.widget.ConstraintLayout>
When I scroll up on the recyclerview, it does scroll up but the appbarlayout does not hide itself. Moreover the topmost item of the RecyclerView is partially hidden behind the AppBarLayout.
You can use CoordinatorLayout to achieve a CollapsingToolbarLayout, something like this:
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/appbar"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleGravity="bottom"
app:expandedTitleMarginEnd="16dp"
app:expandedTitleMarginStart="16dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="#string/choose_hero">
<ImageView
android:id="#+id/toolbar_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:contentDescription="#null"
android:fitsSystemWindows="true"
android:scaleType="centerCrop" />
<androidx.appcompat.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" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I am using this type of layout and my app bar is collapsing/expanding without hiding any recyclerView items.
How to develop my custom header with Toolbar and AppBarLayout ?I want to add my own custom xml using this.
<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="?android:attr/actionBarSize"
android:supportsRtl="false"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
try something like this:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme">
<android.support.constraint.ConstraintLayout
android:id="#+id/ConstraintContainer"
android:layout_width="match_parent"
android:orientation="vertical"
android:background="#android:color/black"
android:gravity="center"
android:layout_height="wrap_content">
<!--Whatever textview/imageview you want to insert-->
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.Toolbar>
Here is the best way to modify header with AppBarLayout and Toolbar
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.activities.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.A360.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/white"
app:titleTextColor="#color/theme_primary_color"
app:popupTheme="#style/Theme.A360.PopupOverlay">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<TextView
android:id="#+id/tvPageTitle"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:fontFamily="#font/proxima_nova_semibold"
android:gravity="center_vertical"
android:textColor="#color/color_list_item_primary_text"
android:textSize="#dimen/_14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/tvCounts"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvCounts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_6dp"
android:background="#drawable/count_background"
android:fontFamily="#font/proxima_nova_semibold"
android:paddingStart="#dimen/_8dp"
android:paddingEnd="#dimen/_8dp"
android:textColor="#color/color_list_item_primary_text"
android:textSize="#dimen/_12sp"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/tvPageTitle"
app:layout_constraintTop_toTopOf="#id/tvPageTitle"
app:layout_constraintBottom_toBottomOf="#id/tvPageTitle"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_main" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginEnd="#dimen/fab_margin"
android:layout_marginBottom="16dp"
android:visibility="gone"
app:srcCompat="#drawable/ic_baseline_add" />
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="#+id/fabTotalAccount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:layout_marginEnd="#dimen/fab_margin"
android:layout_marginBottom="16dp"
android:visibility="gone"
android:textAllCaps="false"
android:paddingStart="#dimen/_20sp"
android:paddingEnd="#dimen/_20sp"
android:textSize="#dimen/_14sp"
android:fontFamily="#font/proxima_nova_regular"
android:textColor="#color/black_100_opac"
/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I'm programming in kotlin, I have problems with the collapsing toolbar, my main view is the following
Main View
When scrolling my logo appears behind the collapsing toolbar, as it appears in the following image
When Scrolling
<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="false">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:layout_marginBottom="56dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="120dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
style="#style/Widget.QueComer.CollapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<LinearLayout
style="#style/Widget.QueComer.CollapsingToolbarContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.65">
</LinearLayout>
<!-- Wrap this view: -->
<android.support.v7.widget.Toolbar
android:id="#+id/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.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/header_logo"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:contentDescription="#string/app_name"
android:cropToPadding="false"
android:scaleType="fitCenter"
android:src="#mipmap/ic_logo"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_logo" />
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#ffffff"
android:theme="#style/ThemeOverlay.QueComer.BottomNavigation"
app:menu="#menu/menu_quecomer">
</android.support.design.widget.BottomNavigationView>
</android.support.design.widget.CoordinatorLayout>
I need the logo to be in front of the bar, as the following image shows
result Image
The result image is edited with photoshop
Try to place ImageView inside your CollapsingToolbarLayout like this:
<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="false">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:layout_marginBottom="56dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="120dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
style="#style/Widget.QueComer.CollapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<LinearLayout
style="#style/Widget.QueComer.CollapsingToolbarContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.65">
<ImageView
android:id="#+id/header_logo"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:contentDescription="#string/app_name"
android:cropToPadding="false"
android:scaleType="fitCenter"
android:src="#mipmap/ic_logo"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_logo" />
</LinearLayout>
<!-- Wrap this view: -->
<android.support.v7.widget.Toolbar
android:id="#+id/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.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#ffffff"
android:theme="#style/ThemeOverlay.QueComer.BottomNavigation"
app:menu="#menu/menu_quecomer">
</android.support.design.widget.BottomNavigationView>
</android.support.design.widget.CoordinatorLayout>
I Have added Collapsing toolbar and I am using view pager which collapse the toolbar when I scroll up.
View pager have some fragments which contains recyclerview and some contains constraint layout with no recyclerview.
So the problem is fragment of viewpager which doesn't contain recyclerview having a problem of collapsing the toolbar whereas those fragments who contains recyclerview doesn't have any problem in collapsing the toolbar.
Now I am adding the code of my 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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
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/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<ImageView
android:id="#+id/posterbackdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="none" />
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/transparent"
android:scaleType="fitXY"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/posterbackdrop" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
style="#style/MyTabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:theme="#style/TabLayout_Theme"
app:layout_constraintRight_toRightOf="parent"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/TextColor"
app:tabTextColor="#color/white" />
<abcd.com.tmdb.Common.FontTypeFace
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="0dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="50dp"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold"
android:transitionName="moviename"
app:typeface="roboto_bold" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
I have found the solution for this problem by adding NestedScrollView on the constraint layout of the view pager fragment make the toolbar collapse.
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="500dp"
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
I am trying to make a layout like this where I am adding collapsing toolbar functionality I searched lots of solution to achive this kind of animation where the below layout slides up and with that it takes the image[portrait] also with the animation.
What I have achieved till now
I am able to slide the below layout.
I am able to collapse the toolbar.
I am able to show my Tab views into the toolbar
What I want to achieve
When I slide the below layout my image gets stuck in half way and it doesn't go completely up and hide.
Solution which I am not looking for
This thread tell how to hide and show the imageview when we slide the child layout but my requirement is not hiding the Imageview I just want to slide the view on the top.
Below is my XML layout
<?xml version="1.0" encoding="utf-8"?>
[![enter image description here][2]][2]<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">
<ImageView
android:id="#+id/posterbackdrop"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="none" />
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#color/transparent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarlayout"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp" />
<nseit.com.tmdb.Common.FontTypeFace
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="30dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="50dp"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold"
android:transitionName="moviename"
app:typeface="roboto_bold" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
style="#style/MyTabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:theme="#style/TabLayout_Theme"
app:layout_anchor="#+id/movieportrait"
app:layout_anchorGravity="bottom"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/white"
app:tabTextColor="#color/TextColor" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.CardView
android:id="#+id/movieportrait"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:adjustViewBounds="true"
app:cardElevation="15dp"
app:layout_anchor="#id/appbarlayout"
app:layout_anchorGravity="bottom|left|end">
<ImageView
android:id="#+id/imageView7"
android:layout_width="150dp"
android:layout_height="200dp"
android:adjustViewBounds="true"
android:background="#drawable/deadpoolpotrait"
android:fitsSystemWindows="true"
android:scaleType="fitCenter"
android:scaleY="1.2" />
</android.support.v7.widget.CardView>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
Attaching the screenshot