Develop Reference

How to scroll a layout on top of another only when user scrolls

I want to scroll a layout on top of another layout. Example there is an Image inn the top, below image (bottom 10% overllaped) I have a relative layout which contains data. When user starts scrolling up, this relative layout has to over the top image and attach to toolbar, top image should be in the same state (no change in height). When user scrolls down it should come back to original place. I searched a lot but ended up with nothing.
For example :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/testIv"
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="#mipmap/ic_launcher"/>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/testIv"
android:background="#color/red">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello World"
android:textColor="#color/white"
android:textSize="30sp"/>
</androidx.core.widget.NestedScrollView>
</RelativeLayout>
In this example I have an Imageview and below that a scrollview, when user try to scroll, the scroll should over the imageview and reach the top toolbar.
Updated :
<androidx.coordinatorlayout.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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
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/toolbarImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#mipmap/ic_launcher"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="parallax"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="28sp"
android:lineSpacingExtra="8dp"
android:text="#string/large_text" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
In this example, when we scroll, it will collapse the image also, tried with different avlues for scrollFlags and collapseMode.
Expected UI :

Achieving this with BottomSheet behavior on ScrollView keeping image collapseMode inside CoordinateLayout to none. I have created sample demo check it here and added comments for your better understanding.
Demo screenshot here

AppBar Layout Expands Automatically when View visibility is changed from Gone to Visible on runtime

As we can see from the below sample, on changing the visibility of the view from gone to visible and vice versa, the appbar automatically expands and scrim drawn is shown as well.
<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/crl_parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:fillViewport="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/abl_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="#drawable/shape_rectangle_grdient_red_yellow"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax">
<FrameLayout
android:id="#+id/fl_class"
android:layout_width="match_parent"
android:layout_height="#dimen/d_280dp"
android:background="#color/colorPlaceholderBg">
<ImageView
android:id="#+id/iv_class"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#color/colorPlaceholderBg" />
<ProgressBar
android:id="#+id/pb_dp_progress"
android:layout_width="#dimen/d_20dp"
android:layout_height="#dimen/d_20dp"
android:layout_gravity="center"
android:visibility="visible" />
</FrameLayout>
<RelativeLayout
android:id="#+id/rl_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_default_height"
android:background="#drawable/shape_rectangle_transparent_grey_gradient">
<ImageView
android:id="#+id/iv_back"
... />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/tl_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:minHeight="#dimen/toolbar_default_height"
android:visibility="visible"
app:contentInsetStart="#dimen/d_0dp"
app:layout_collapseMode="pin">
<include layout="#layout/view_toolbar" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/fragment_class_details_content" />
</android.support.design.widget.CoordinatorLayout>
This the code for the outer layout. As can be seen from the above layout that the pattern is mostly standard. I have tried replicating the bug in new sample but of no use. The initial problem seem to be changing the height of nested scroll view on runtime seems to be the problem but that is not the case. I tried to setExpand(false) on the click of the button but that is not working as well.
<img src="https://i.imgur.com/YGTT3oL.gif" title="source: imgur.com" />
Link to demo gif is here: https://i.imgur.com/YGTT3oL.gif

I bet the problem is caused by app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
You have to define the behavior you want when scrolling, check out this article: https://medium.com/martinomburajr/android-design-collapsing-toolbar-scrollflags-e1d8a05dcb02
Since I dont know what behaviour do you want, read the article and choose yourself. Hiding and showing the view is triggering those flags.

In your #layout/fragment_class_details_content check if
app:layout_behavior="#string/appbar_scrolling_view_behavior"
is present in the parent layout.
Also change app:layout_scrollFlags="scroll|exitUntilCollapsed|snap" to
app:layout_scrollFlags="scroll|exitUntilCollapsed"
Add this attribute to the CollapsingToolbarLayout
app:toolbarId="#+id/tl_toolbar"
Add this attribute to Toolbar:
app:popupTheme="#style/AppTheme.PopupOverlay"

Extract your gone/visible layout from android.support.design.widget.CollapsingToolbarLayout.
Too much nesting you did so avoid nesting and Use constraint layout

Floating Action Button Not In Bottom Right

My FAB for some reason won't go to the bottom right corner of the screen as usual. I'm inside a fragment and that fragment is a coordinator layout (I don't know if this is a good practice or not).
Here is the layout 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.gigstudios.polls.fragment.MyPollsFragment">
<LinearLayout
android:id="#+id/linear_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
<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="#drawable/ic_add_white_36dp"
app:fabSize="normal"
app:layout_anchor="#id/linear_layout"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
And for some reason the FAB ends up in the top right instead of the bottom right. Does anyone know what I'm doing wrong?
Btw the xml preview has always shown the fab button in the bottom right corner but when I run it on my phone it's in the top right instead.
Edit: Here's my main_activity xml to show where I'm putting the fragment (The "container" FrameLayout).
<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:background="#color/colorGrey">
<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"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorGrey"
android:layout_marginTop="?attr/actionBarSize">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/container">
</FrameLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

The issue is coming due to android.support.v4.widget.NestedScrollView add one more field android:fillViewport="true". Issue was coming as yourNestedScrollView` was not expanding to match parent or take available space. Working fine tested with my code
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
android:fillViewport="true"
android:layout_marginTop="?attr/actionBarSize">
</android.support.v4.widget.NestedScrollView>

Remove the lines
app:layout_anchor="#id/linear_layout"
app:layout_anchorGravity="bottom|right|end"
on your FloatingActionButton. They aren't doing anything (since you are anchoring to a view that fills the entire CoordinatorLayout). This will cause your layout_gravity to be respected and your FloatingActionButton will be placed in the bottom right corner of the CoordinatorLayout.

Remove the android:layout_gravity="bottom|end" from your floating action button xml code...it will work

Android parallax effect CollapsingToolbarLayout with ViewGroup Layout is not working

I am developing an Android app. In my app, I am using CollapsingToolbarLayout for parallax effect. Before I used AppbarLayout, CollapsingToolbarLayout together with ViewPager, I was working fine. But this time, I replaced view holder for content with RelativeLayout. So when I scroll up from the content, toolbar is not collapsed. I mean when I scroll up from the position I circled in the screenshot below.
But if I scroll up from the toolbar area, it is working. I mean the area in the screenshot.
This is my XML layout
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/ai_app_bar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
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"
>
<RelativeLayout
android:background="#drawable/item"
app:layout_collapseMode="parallax"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:background="#color/lightGray"
android:layout_width="match_parent"
android:layout_height="match_parent"></View>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/ai_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>
<RelativeLayout
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="This is testing"
android:textColor="#color/textColorPrimary"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/ai_review_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:src="#android:drawable/btn_star"
android:layout_margin="10dp"
android:visibility="gone"
app:layout_anchor="#id/ai_app_bar"
app:layout_anchorGravity="bottom|right|end"
/>
</android.support.design.widget.CoordinatorLayout>
Why toolbar is not collapsed when I scroll up from the relative layout area? How can I fix that to be the toolbar collapsed if I scroll up from the RelativeLayout area?

You should use RecyclerView instead of RelativeLayout outside of the AppBarLayout and add this view tag to it app:layout_behavior="#string/appbar_scrolling_view_behavior"
string/appbar_scrolling_view_behavior maps to
AppBarLayout.ScrollingViewBehavior, which is used to notify the
AppBarLayout when scroll events occur on this particular view.
From here Handling Scrolls with CoordinatorLayout
Edit
Also, a CollapsingToolbar needs RecyclerView or NestedListView to work.

inside relative layout put this one close after every tag close inside relative layout
<android.support.v4.widget.NestedScrollView 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:fillViewport="true"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_gravity="fill_vertical">

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>