Android RecyclerView ScrollDown Like In Whatsapp Chat

By | February 23, 2017

In Android WhatsApp application inside chat screen when you scroll up the messages you will see a down arrow icon floating on right bottom of the screen and when you click on that icon the list will be scrolled down smoothly . So  in this tutorial  we will create same kind of effect by using recyclerView and floating action bar button  widget .

androidrecyclerViewScrollDown

1. XML Layout

Create XML Layout (res/layout/fragment_main.xml) add recyclerView and FloatingActionButton Widget .

file : fragment_main.xml

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.tutorialsbuzz.scrolldownrecyclerview.MainActivityFragment"
    tools:showIn="@layout/activity_main">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/examplelist"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_marginBottom="30dp"
        android:src="@mipmap/down_arrow"
        android:visibility="visible"
        app:borderWidth="0dp"
        app:elevation="3dp"
        app:fabSize="mini" />

</RelativeLayout>

Create XML Layout (res/layout/list_items.xml) and TextView Widget to it.
This xml layout represents rows of recyclerView.

file : list_items.xml

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

    <TextView
        android:id="@+id/textview01"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="16dp"
        android:paddingEnd="8dp"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:paddingStart="8dp"
        android:paddingTop="16dp"
        android:textSize="18sp" />
</FrameLayout>

2. Custom RecyclerView Scroll Listener

Create a abstract class HideShowScrollListener and extend it to RecyclerView.OnScrollListener Override the onScrolled method , add abstract onHide() and onShow()

file : HideShowScrollListener.java

package com.tutorialsbuzz.scrolldownrecyclerview;

import android.support.v7.widget.RecyclerView;

public abstract class HideShowScrollListener extends RecyclerView.OnScrollListener {
    private static final int HIDE_THRESHOLD = 20;
    private int scrolledDistance = 0;
    private boolean controlsVisible = true;

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

        if (scrolledDistance > HIDE_THRESHOLD && controlsVisible) {
            onHide();
            controlsVisible = false;
            scrolledDistance = 0;
        } else if (scrolledDistance < -HIDE_THRESHOLD && !controlsVisible) {
            onShow();
            controlsVisible = true;
            scrolledDistance = 0;
        }

        if ((controlsVisible && dy > 0) || (!controlsVisible && dy < 0)) {
            scrolledDistance += dy;
        }
    }

    public abstract void onHide();

    public abstract void onShow();

}

3. RecyclerView Adapter

Create a class RVAdapter which RecyclerView.Adapter<RVAdapter.ViewHolder> and override the necessary method for creating and binding the recylerview rows.

file : RVAdapter.java

package com.tutorialsbuzz.scrolldownrecyclerview;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import java.util.List;

public class RVAdapter extends RecyclerView.Adapter<RVAdapter.ViewHolder> {

    List<String> stringList;
    Context mContext;

    public RVAdapter(Context context, List<String> stringList) {
        this.mContext = context;
        this.stringList = stringList;
    }

    @Override
    public RVAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater
                .from(mContext)
                .inflate(R.layout.list_items, parent, false);
        return new ViewHolder(v);
    }


    @Override
    public void onBindViewHolder(RVAdapter.ViewHolder holder, final int position) {
        holder.mTextView.setText(stringList.get(position));
    }

    @Override
    public int getItemCount() {
        return stringList.size();
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {

        public final TextView mTextView;

        public ViewHolder(View itemView) {
            super(itemView);
            mTextView = (TextView) itemView.findViewById(R.id.textview01);
        }
    }

}

4. MainFragment

  • Create a class MainActivityFragment which extends fragment and set the content of this fragment with above defined xml layout (fragment_main.xml)
  • Setup the recyclerView.
  • Add scroll listener to recyclerView by calling addOnScrollListener(…) method and passing HideScrollListener object. Now inisde onhide() and onshow() method call hide and show on floating action button button respectively .
  • Set onclick listener for floating action button and inside the onclick method call smoothScrollToPosition() on recyclerView object by passing itemcount of the recyclerAdapter.

file : MainActivityFragment.java

package com.tutorialsbuzz.scrolldownrecyclerview;

import android.support.design.widget.FloatingActionButton;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import java.util.ArrayList;
import java.util.List;

public class MainActivityFragment extends Fragment {

    private RecyclerView mRecyclerView = null;
    private FloatingActionButton fab = null;

    public MainActivityFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment_main, container, false);
        mRecyclerView = (RecyclerView) view.findViewById(R.id.examplelist);
        fab = (FloatingActionButton) view.findViewById(R.id.fab);

        setupRecylerView();

        return view;
    }


    private void setupRecylerView() {
        mRecyclerView.setHasFixedSize(true);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
        mRecyclerView.setAdapter(new RVAdapter(getActivity(), getData()));
    }


    @Override
    public void onResume() {
        super.onResume();

        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                mRecyclerView.smoothScrollToPosition(mRecyclerView.getAdapter().getItemCount());

            }
        });


        mRecyclerView.addOnScrollListener(
                new HideShowScrollListener() {
                          @Override
                          public void onHide() {
                            fab.hide();
                          }

                         @Override
                         public void onShow() {
                           fab.show();
                         }
                   });


    }

    private List<String> getData() {

        List<String> stringList = new ArrayList<>();
        for (int i = 0; i < 100; i++) {
            stringList.add("Data " + i);
        }
        return stringList;
    }


}

GitHub https://github.com/hdpavan/RecyclerViewScrollDown.

  • Minhaj Sayyad

    Thanks