Hide Bottom Toolbar On Scroll

08:31 16 Comments

Google plus uses nice animation to hide bottom toolbar on scroll down to make space to view posts in full screen. So that user can easily view posts on scroll down, and the toolbar quickly returns when user scrolls up. We can achieve this by   CoordinatorLayout . The views can interact with other views inside CoordinatorLayout. Using Layout   behaviours  we can change the particular view by another view's state. By using custom layout behaviour we can do our own behaviour. In this post i will show you the example of custom layout behaviour to smoothly hide bottom toolbar on RecyclerView scroll. We can also do this behaviour with   NestedScrollView .


1.Star with creating new android studio project with empty activity
2.To get CoordinatorLayout you must import suppor design dependency

dependencies {
    compile 'com.android.support:design:24.0.0'
}

3.Remove default ActionBar by modifying styles.xml.

styles.xml<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
</resources>

4.For custom CoordinatorLayout.Behaviour create class ScrollingToolbarBehavior.java

ScrollingToolbarBehavior.javapackage info.androidramp.googleplusbottomtoolbar;

import android.content.Context;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CoordinatorLayout;
import android.support.v7.widget.Toolbar;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by Thanvandh on 09/07/2016.
 */
class ScrollingToolbarBehavior extends CoordinatorLayout.Behavior<Toolbar> {

    public ScrollingToolbarBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, Toolbar child, View dependency) {
        return dependency instanceof AppBarLayout;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, Toolbar child, View dependency) {
        if (dependency instanceof AppBarLayout) {

            int distanceToScroll = child.getHeight();

            int bottomToolbarHeight = child.getHeight();//TODO replace this with bottom toolbar height.

            float ratio = dependency.getY() / (float) bottomToolbarHeight;
            child.setTranslationY(-distanceToScroll * ratio);
        }
        return true;
    }
}

5.In your activity layout add CoordinatorLayout and Toolbar.

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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="info.androidramp.googleplusbottomtoolbar.MainActivity">

    <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:layout_width="match_parent"
            android:layout_height="?android:actionBarSize"
            app:layout_scrollFlags="scroll|snap|enterAlways"
            app:title="@string/app_name" />

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layoutManager="android.support.v7.widget.LinearLayoutManager"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?android:actionBarSize"
        android:layout_gravity="bottom"
        android:background="@color/colorAccent"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:contentInsetEnd="0dp"
        app:contentInsetLeft="0dp"
        app:contentInsetRight="0dp"
        app:contentInsetStart="0dp"
        app:layout_behavior="info.androidramp.googleplusbottomtoolbar.ScrollingToolbarBehavior">
        <!--TODO REPLACE PREVIOUS LINE WITH YOUR OWN BEHAVIOUR -->

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="Action1" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="Action2" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="Action3" />

        </LinearLayout>

    </android.support.v7.widget.Toolbar>

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

5.Then set adapter to your RecyclerView.

MainActivity.javapackage info.androidramp.googleplusbottomtoolbar;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.RecyclerView;
import android.view.ViewGroup;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    class ViewHolder extends RecyclerView.ViewHolder {
        public ViewHolder() {
            super(new TextView(getApplicationContext()));
        }
    }

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

        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        recyclerView.invalidate();
        recyclerView.setAdapter(new RecyclerView.Adapter<ViewHolder>() {


            @Override
            public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
                return new ViewHolder();
            }

            @Override
            public void onBindViewHolder(ViewHolder holder, int position) {
                ((TextView) holder.itemView).setText("item: " + position);
                holder.itemView.setPadding(10,10,10,10);
            }

            @Override
            public int getItemCount() {
                return 50;
            }
        });
    }

}

Now run and test your application.