Develop Reference

Prevent a child in ScrollView from being scrolled out of the screen

Somehow I came across Reddit app, and wondered how their Scrolling mechanism works. As you can see from the gif, there is a Menubar (Up/Downvote-comment-share bar) that always locates within the screen and can’t be scrolled out of the screen when scrolled up/down. When scrolling up, it will be located underneath the Toolbar (the grey bar at the top). When scrolling down, it will be located above the EditTextView (the Add-a-comment bar at the bottom).
Relative layout
|-->Toolbar (android:id="#+id/toolbar")
|-->ScrollView (android:layout_below="#id/toolbar")
|-->Child (This child is located underneath the Toolbar when scrolling up)
|-->Child
|-->Child
If I wanted to write this page, what dependencies, widgets or concepts
would I need to use or look into?
Note: You can give me snippets of codes if you prefer :)

you can use the CoordinatorLayout layout to realize that function. the layout like that. for details, you can see this blog in the medium.
<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/behavior_demo_coordinatorLayout"
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"
app:layout_scrollFlags="scroll|enterAlways|snap"
android:background="?attr/colorPrimary" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/behavior_demo_swipe_refresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/behavior_demo_recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>

The toolbar (containing the menu) is outside of the ScrollView in the XML.
Or it may not even be a ScrollView at all.
It may just be view recycling- but even so the toolbar is outside of that XML layout used for displaying the content.

For hiding the TopBar and bottomBar (comment box) I recommend you use Animation
Simply call animation like
//on scrollUp
topLayout.animate().translationY(-300).alpha(0.0f).setDuration(300);
// this will make the layout go up and fade to invisible
//on scrollDown
topLayout.animate().translationY(0).alpha(1.0f).setDuration(300);
// this will make the layout come down and fade to be visible
Implement this will both Views using addOnScrollListener() or I suggest you to have a look at this answer for implementing scroll Up/Down using CoordinateLayout
Hope this will help!

How to let only specific fragments scroll inside a ViewPager of CoordinatorLayout?

Background
I have a viewPager, with 3 fragments and tabs for them. Each fragment has an intro phase (of its own) that doesn't have any scrollable content.
After leaving the intro phase, there is a recyclerView that the user can scroll in.
The problem
I need to use the new design library, so that when scrolling (only via recyclerView), it will hide the actionBar and let the tabs still be shown.
When the user goes to a fragment that doesn't have a scrollable content yet, the actionBar should re-appear, similar to what "Google Play Newsstand" has. In fact, I would even be happy to have what they have: as soon as you start swiping left/right, re-show the action bar.
Thing is, if I follow the guidelines and samples, I have 2 issues:
The non-scrollable phase for fragments gets truncated at the bottom, as if it can get scrolled.
I can't find how to re-show the actionBar, and make it stuck there till I switch to a scrollable content (either by switching to another fragment, or when the content of the current fragment changes to a scrollable content).
What I've tried
Here's a short snippet of the current layout XML file of the activity:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/activity_main__coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/activity_main__appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="?attr/actionBarTheme">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:layoutDirection="ltr"
android:theme="?attr/actionBarTheme"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
tools:ignore="UnusedAttribute"/>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:tabGravity="fill"
app:tabIndicatorColor="#FFffffff"
app:tabIndicatorHeight="3dp"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<include layout="#layout/fabs"/>
</android.support.design.widget.CoordinatorLayout>
<include
layout="#layout/sliding_menu"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="left"/>
</android.support.v4.widget.DrawerLayout>
The fragments have a layout of a ViewAnimator that just switches between phases, while one of them is the non-scrollable content, and the other is the RecyclerView.
I've tried to add a NestedScrollView/ScrollView the non-scrollable content , and force it to fill itself, using android:fillViewport="true" , but it didn't work. For ScrollView it didn't even allow to scroll.
EDIT: Another thing I've tried is to use addOnPageChangeListener on the viewPager, so that in onPageSelected I could set the flags for the toolbar :
AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) mToolbar.getLayoutParams();
params.setScrollFlags(!needScrolling? 0 : LayoutParams.SCROLL_FLAG_SNAP | LayoutParams.SCROLL_FLAG_ENTER_ALWAYS | LayoutParams.SCROLL_FLAG_SCROLL);
It works, but it has a issues too:
while scrolling horizontally, I can see the content of the non-scrollable fragment being truncated, and when going to the new fragment (stop touching the screen, to let it snap to the fragment), only then it shrinks its size to fit the correct space.
The toolbar doesn't get re-shown.
If the toolbar is hidden due to scrolling on another fragment, and I'm now on the non-scrollable fragment, it actually gets less space to fill than it's supposed to, so it has empty space at the bottom.
EDIT: one solution is to add an empty view of the same height of actionbar (layout_height="?actionBarSize") at the bottom of the non-scrollable fragments's content. However, when the action bar is hidden, I can see the view, so there is empty space. I still need to know how to re-show the actionbar on this case.
The question
How do I set a different behavior for the toolbar, so that it will re-show and stuck on certain states, yet be scrollable only when there is a RecyclerView shown on the current fragment?

Collapsingtoolbarbar issue with no scrolling content inside fragment

I have,in my code, only one activity and many fragments.
The structure is this one :
<android.support.v4.widget.DrawerLayout>
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout>
<android.support.design.widget.CollapsingToolbarLayout>
<ImageView/>
<android.support.v7.widget.Toolbar/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout/>
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView/>
</android.support.v4.widget.DrawerLayout>
and
compile 'com.android.support:appcompat-v7:23.1.0'
compile 'com.android.support:design:23.1.0'
I don't need the collapsing toolbar in all fragments but I prefered to do that instead of putting a appbarlayout in each fragment.
The problem is when I launch my app :
1) I am on a fragment where the collapsing toolbar is not usefull( I don't have scrolling content) BUT I can still expand the collapsing toolbar if I scroll on the toolbar (This is the issue...).
2) Now,I go in a fragment with scrolling content and I expand the collapsing toolbar with a recyclerview , the collapsing toolbar works normally.
3) I want to repeat the bug of 1), the bug is not present anymore.
Like scrolling with a recyclerview has solved the bug?
The collapsing toolbar does not expand if I scroll on the toolbar. And I would like it to be like till the launch of the app.
I don't won't to go on a fragment scrolling content to disable this bug.
You can see this gif which represent what I'm talking about via GIPHY
Can you help me? :)

If you want to change the scroll behavior you can do that programmatically by changing the Scroll Flags on the AppBarLayout.LayoutParams of the CollapsingToolbarLayout.
CollapsingToolbarLayout ctl= (CollapsingToolbarLayout) findViewById(R.id.collapsing_appbar);
AppBarLayout.LayoutParams params = ctl.getLayoutParams();
params.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS);//or a combination of flags
ctl.setLayoutParams(params);
Another trick to make the CollapsingToolbarLayout scroll 'with no scrolling content' is to put
'your layout' in a NestedScrollView and set a *1000dp min height value
to the child of the NestedScrollView ('your layout').
android:minHeight="1000dp"
Layout:
<android.support.v4.widget.NestedScrollView
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!--your layout-->
<FrameLayout android:minHeight="1000dp"/>
</android.support.v4.widget.NestedScrollView>
*SupportDesignDemos example here: https://github.com/android/platform_development/blob/master/samples/SupportDesignDemos/res/layout/include_appbar_scrollview.xml

What is layout_collapseParallaxMultiplier used in CollapsingToolbarLayout?

What is layout_collapseParallaxMultiplier used in CollapsingToolbarLayout ?
I have seen the android developer doc, but I didn't understand.
please explain this parameter & it's effect when it used with layout_collapseMode with example.
Below is a simple example of xml.
<android.support.design.widget.CollapsingToolbarLayout ... >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:src="#drawable/random_pattern"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.75"/>
</android.support.design.widget.CollapsingToolbarLayout>

In very simple words:
When scrolling we see the following - appbar image starts hiding under the content and beyond the top edge of the screen.
Parameter layout_collapseParallaxMultiplier determines what part of the image (in percent) will be hidden under the bottom content.
So, for example, setting this parameter to value 1.0 means that top boundary of appbar's image is bound to the top edge of the screen and doesn't move when scrolling. And main content is moving up the top of the image.
When the parameter is not set this corresponds to the value 0.5 and image will be overlapped above and below synchronously.

This was explained on Android Design Support Library:
In addition to pinning a view, you can use app:layout_collapseMode="parallax" (and optionally app:layout_collapseParallaxMultiplier="0.7" to set the parallax multiplier) to implement parallax scrolling (say of a sibling ImageView within the CollapsingToolbarLayout). This use case pairs nicely with the app:contentScrim="?attr/colorPrimary" attribute for CollapsingToolbarLayout, adding a full bleed scrim when the view is collapsed.
This is a behavior example when you use app:layout_collapseMode="parallax".

How to keep the toolbar fixed at the top when AppBar collapses/expands?

Overview
I am trying to implement one of the Scrolling Techniques, Flexible space with overlapping content, described in Material Design.
Flexible space with overlapping content
Content can overlap the app bar.
Behavior:
The app bar’s starting position should be located behind the content.
Upon upward scroll, the app bar should scroll faster than the content,
until the content no longer overlaps it. Once anchored in place, the
app bar lifts up to allow content to scroll underneath.
https://www.google.co.in/design/spec/patterns/scrolling-techniques.html#scrolling-techniques-scrolling
Problem
However, the problem is,
the title in my AppBar scrolls down when expanded and hides below the overlapping content.
Here, my toolbar is hidden below the overlapping CardView.
When the appbar is collapsed, the toolbar and hence the Title slides up from below.
Code
Here's my Code:
activity-main.xml
<android.support.design.widget.CoordinatorLayout
...
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
...
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:background="?attr/colorPrimary"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</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"
...
I have also added these in my MainActivity's onCreate function
setSupportActionBar(toolbar);
collapsingToolbarLayout.setTitle("App Name");
I want the toolbar(with the tile and the other contents, which I will add later) to stay at the top irrespective of the appbar being expanded or collapsed.
I have read the documentations, gone through many posts and tutorials, watched a lot of videos but failed to find a working solution or any related solutions at all.
If anyone has some idea on how to fix this, please suggest. Thanks for helping.

I was looking for a solution myself when I found the answer in the comments on a similar issue report.
Basically you call setTitleEnabled() on your CollapsingToolbarLayout like this:
CollapsingToolbarLayout.setTitleEnabled(false);
You can do this in xml as well, by adding this to your CollapsingToolbarLayout:
app:titleEnabled="false"
By setting it to false, you'll get the desired behaviour. The title stays fixed to the top of the screen.
The Toolbar itself was actually already at the top, but this makes the title stay there as well, instead of translating between the bottom of the CollapsingToolbarLayout and the Toolbar.

I have acheived this by adding below code inside Toolbar tag.
app:layout_collapseMode="pin"

In my case I needed to add app:titleEnabled="false" to the CollapsingToolbarLayout AND app:layout_collapseMode="pin" to the android.support.v7.widget.Toolbar
Now the toolbar stays pinned to the top of the screen, irrespective of whether the user scrolls up or down.

To keep title at top, simple put this attribute to your CollapsingToolbarLayout:
app:expandedTitleGravity="top"