Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android AppCompat-v21 Toolbar Animation

I want to use new Android Toolbar pattern instead of ActionBar. I add a Toolbar as SupportActionBar from appCompat v21 and now, I want to hide/show it with animation while scrolling listView items. before, I use methods: actionBar.show() and actionBar.hide() and it animate automatically. but now, in Toolbar it hide and show without any animation. What should I do???

Activity Layout:

<include
    layout="@layout/toolbar_actionbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/actionbar_margin" />

Toolbar Layout:

<android.support.v7.widget.Toolbar   
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/toolbarActionbar_T_actionToolbar"

android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"

android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

Activity Java:

actionToolbar = (Toolbar) findViewById(R.id.toolbarActionbar_T_actionToolbar);
setSupportActionBar(actionToolbar);

ScreenShot:

enter image description here

like image 420
Hamidreza Hosseinkhani Avatar asked Dec 06 '14 06:12

Hamidreza Hosseinkhani


1 Answers

What you need is a scroll listener. It detects whether you scroll up or down and hides or shows the Toolbar accordingly. Also known as the 'Quick Return' pattern.

Apart from just using the hide() and show() methods, for the animation, you must do it like this:

For hiding:

toolbarContainer.animate().translationY(-toolbarHeight).setInterpolator(new AccelerateInterpolator(2)).start();

For showing the Toolbar:

 toolbarContainer.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2)).start();

For further reading, you can refer this tutorial.It talks about a Floating Action Button, but its the same animation for a Toolbar. Or find its code at GitHub.

You can do this quite simply without any external library. :-)

UPDATE

You no longer need to manually maintain any listener. The Design Support library by Android enables you to do this with pure XML.

Here's the XML Snippet to enable a Quick Return:

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

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_scrollFlags="scroll|enterAlways" />

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

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

The key lies in this line:

app:layout_scrollFlags="scroll|enterAlways"

You can read more about implementing Quick Return with the Design Support library, here.

like image 174
Suleiman19 Avatar answered Sep 28 '22 13:09

Suleiman19