.png)
Hide Bottom Toolbar On Scroll
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'
}
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.javaScrollingToolbarBehavior.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.
