Weird scrolling behaviour in both ListView and RecyclerView on hiding Action Bar

Question

I am getting a very weird behaviour on scrolling the views. Fragment "A" uses the RecyclerView and Fragment "B" uses the listView.

For recycler view, I am using the following code:

list.setOnScrollListener(new RecyclerView.OnScrollListener() {
        int mLastFirstVisibleItem = 0;

        @Override
        public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
        }

        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
            super.onScrolled(recyclerView, dx, dy);
            final int currentFirstVisibleItem = linearLayoutManager.findFirstVisibleItemPosition();

            if (currentFirstVisibleItem > this.mLastFirstVisibleItem) {
                ((AppCompatActivity)getActivity()).getSupportActionBar().hide();
            } else if (currentFirstVisibleItem < this.mLastFirstVisibleItem) {
                ((AppCompatActivity)getActivity()).getSupportActionBar().show();
            }

            this.mLastFirstVisibleItem = currentFirstVisibleItem;
        }
    });

For ListView, I am using the following code:

list.setOnScrollListener(new AbsListView.OnScrollListener() {
        int mLastFirstVisibleItem = 0;

        @Override
        public void onScrollStateChanged(AbsListView view, int scrollState) {   }

        @Override
        public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
            if (view.getId() == list.getId()) {
                final int currentFirstVisibleItem = list.getFirstVisiblePosition();

                if (currentFirstVisibleItem > mLastFirstVisibleItem) {
                    // getSherlockActivity().getSupportActionBar().hide();
                    ((AppCompatActivity)getActivity()).getSupportActionBar().hide();
                } else if (currentFirstVisibleItem < mLastFirstVisibleItem) {
                    // getSherlockActivity().getSupportActionBar().show();
                    ((AppCompatActivity)getActivity()).getSupportActionBar().show();
                }

                mLastFirstVisibleItem = currentFirstVisibleItem;
            }
        }
    });

Following are the GIFs, So, basically, I scroll and hold it right there and don't release my finger and I get the following behaviour.

make sure nestedScrollingEnabled is enable in both list and recycleview. also make it free scroll, in onScroll condition change behavior of view. — Hemant Parmar, Feb 06 '18 at 09:57
Yes, I have nestedScrollingEnabled to true.Not working. But, What is free scroll? — Karanveer Singh, Feb 06 '18 at 10:27
whatever do in onScrool method and apply some if else condition its change the behavior of scroll. — Hemant Parmar, Feb 06 '18 at 10:28

BramH · Answer 1 · 2018-02-06T14:28:19.290

If the appBar behavior you are looking for is similar to for example WhatsApp, I think a better approach is to control the appBar behavior from your layout instead of from the Java. Here is an example of how to do this for both a fragment containing a RecyclerView and one containing a ListView:

activity_main.xml

<?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:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbarlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways|snap"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

fragmenta.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rec_fragmenta"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:splitMotionEvents="false"
        android:clipToPadding="false"/>

</android.support.design.widget.CoordinatorLayout>

fragmentb.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <ListView
        android:id="@+id/list_fragmentb"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:nestedScrollingEnabled="true"/>

</android.support.design.widget.CoordinatorLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        SectionsPagerAdapter mSectionsPagerAdapter = new 
        SectionsPagerAdapter(getSupportFragmentManager());
        ViewPager mViewPager = (ViewPager) findViewById(R.id.viewpager);
        tabLayout.setupWithViewPager(mViewPager);
        mViewPager.setAdapter(mSectionsPagerAdapter);
    }


    private class SectionsPagerAdapter extends FragmentPagerAdapter {

        private SectionsPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            switch (position) {
                case 0:
                    return new FragmentA();
                case 1:
                    return new FragmentB();
                case 2:
                    return new FragmentC();
            }
            return null;
        }

        @Override
        public int getCount() {
            return 3;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            switch (position) {
                case 0:
                    return "A";
                case 1:
                    return "B";
                case 2:
                    return "C";
            }
            return null;
        }
    }
}

FragmentA

public class FragmentA extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragmenta, container, false);
        LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());
        RecyclerView recyclerView = rootView.findViewById(R.id.rec_fragmenta);
        recyclerView.setLayoutManager(layoutManager);
        List<String> list = getList();
        MyListAdapter adapter = new MyListAdapter(list);
        recyclerView.setAdapter(adapter);
        return rootView;
    }
}

FragmentB

public class FragmentB extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragmentb, container, false);
        ListView listView = rootView.findViewById(R.id.list_fragmentb);
        List<String> list = getList();
        ArrayAdapter<String> adapter = new ArrayAdapter<>(getActivity(),
                android.R.layout.simple_list_item_1, android.R.id.text1, list);
        listView.setAdapter(adapter);
        return rootView;
    }
}

Can't use Toolbar because I have to use Search View in Action Bar — Karanveer Singh, Feb 06 '18 at 10:24
But that is possible with Toolbar.. https://stackoverflow.com/questions/27378981/how-to-use-searchview-in-toolbar-android — BramH, Feb 06 '18 at 10:43
Correct me I am wrong, but It only appears as a button. It doesn't change to edittext. — Karanveer Singh, Feb 06 '18 at 10:49
Well I dont know what you are doing wrong concerning the searchview, but it is possible to get that part working using a Toolbar and there are many tutorials on that. However, concerning the appBar behavior, is that working the way you want now? — BramH, Feb 06 '18 at 10:53
No, It isn't working. Can you provide link to tutorial of expanding SearchView in Toolbar? — Karanveer Singh, Feb 06 '18 at 10:54
Is the behavior that you want to achieve similar to WhatsApp? Because if it is I can make a little example for you. — BramH, Feb 06 '18 at 10:57
Yes, In WhatsApp, SearchView and scrolling both work the same way I want. — Karanveer Singh, Feb 06 '18 at 10:58
I will make it for you when I have time (after a few hours), let me know if you got it working before that please! — BramH, Feb 06 '18 at 10:59
I edited my answer to a full example, that I tested and I think does what you want it to do. Just the search view is not included in there. Also the didnt include the MyListAdapter class and the getList() methods but they are very simple. — BramH, Feb 06 '18 at 14:30
If the answer does what you want it to do, then please accept it as the answer to your question. — BramH, Feb 07 '18 at 10:56
Sorry, for late reply, but, that's exactly what I did before. M problem was implementing SearchView in Toolbar. That's the reason I shifted to ActionBar — Karanveer Singh, Feb 08 '18 at 05:42
For that, you should watch this tutorial: https://www.youtube.com/watch?v=9OWmnYPX1uc — BramH, Feb 08 '18 at 09:57
That is the original problem I am having. It doesn't give that same collapse effect in Toolbar. I need to know how to do that. — Karanveer Singh, Feb 08 '18 at 10:32
hmm sorry but then Im afraid I dont know how to help you further — BramH, Feb 08 '18 at 10:47
If you did not solve it yet, you can use a second toolbar that contains the searchView and has it always expanded. You could animate this expanding of this toolbar with a circularreveal, that way you get the nice collapse effect. — BramH, Feb 13 '18 at 13:51

score 0 · Answer 2 · answered Feb 06 '18 at 10:07

When the Toolbar gets hidden, the viewport of the ListView & RecyclerView gets extended to top, showing again the 1st item and therefore showing the Toolbar again.

You should check if variable dy is positive or negative; if dy is positive then user is scrolling up, else down. If we take this the code becomes like this:

@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
    super.onScrolled(recyclerView, dx, dy);
    final int currentFirstVisibleItem = linearLayoutManager.findFirstVisibleItemPosition();

    if (currentFirstVisibleItem > this.mLastFirstVisibleItem && dy > 0) {
        ((AppCompatActivity)getActivity()).getSupportActionBar().hide();
    } else if (currentFirstVisibleItem < this.mLastFirstVisibleItem && dy < 0) {
        ((AppCompatActivity)getActivity()).getSupportActionBar().show();
    }

    this.mLastFirstVisibleItem = currentFirstVisibleItem;
}

or you can just ignore properties like firstVisibleItem and just use dy as well (if you don't really need to check for the 1st item is shown):

@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
    super.onScrolled(recyclerView, dx, dy);

    if (dy > 0) {
        ((AppCompatActivity)getActivity()).getSupportActionBar().hide();
    } else if (dy < 0) {
        ((AppCompatActivity)getActivity()).getSupportActionBar().show();
    }
}

Tried both of your solutions, still having the same problem. — Karanveer Singh, Feb 06 '18 at 10:25

Weird scrolling behaviour in both ListView and RecyclerView on hiding Action Bar

2 Answers2