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

Question

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 :)

score 0 · Answer 1 · answered Jan 23 '20 at 05:11

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>

How about if I want to lock the ***Menubar (Up/Downvote-comment-share bar)*** within the screen, and when scrolling up it will be located underneath the ***Toolbar (the grey bar at the top)***, please? — hbtpoprock, Jan 23 '20 at 05:28
yes, it can, set it in the toolbar. you can read the blog, it has some same example — Lenoarod, Jan 23 '20 at 05:30
I thought it was only about to minimise the Toolbar. I’m looking into it now. Thank you :) — hbtpoprock, Jan 23 '20 at 05:42

score 0 · Answer 2 · answered Jan 23 '20 at 05:43

0

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.

answered Jan 23 '20 at 05:43

BecauseWes

19
1
7

score 0 · Answer 3 · answered Jan 23 '20 at 06:06

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!

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

3 Answers3