How to implement an ActionBar scroll animation like in Google Search?

Question

I want to implement an ActionBar scroll animation like in Google Search app. An example is shown below:

I would be grateful for any tips or existing libraries that implement a similar effect.

Thanks!

P.S. I quote a comment of Eugene H to make it clear that this question is not a duplicate of existing ones (How to make a ActionBar like Google Play that fades in when scrolling ):

They are two completely different different questions. If you used either app they do two completely different things. There is no fading at all in the search app. The title also scrolls up and takes the place of the toolbar title. It should be a completely different question for that reason.

Possible duplicate of [How to make a ActionBar like Google Play that fades in when scrolling](http://stackoverflow.com/questions/25424818/how-to-make-a-actionbar-like-google-play-that-fades-in-when-scrolling) — Jorel Amthor, Jan 29 '16 at 17:04
@JorelLokiAmthor Please look carefully at a providing screenshot. The text that should move smoothly into the ActionBar, originally located in a specific part of the screen. And it moves to the ActionBar only when the user scrolls the screen to the specified part. — Mark Korzhov, Jan 29 '16 at 17:10
The minor difference you're talking about doesn't justify a totally new question when you could have simply search SO before asking. Such as [this](http://stackoverflow.com/questions/25424818/how-to-make-a-actionbar-like-google-play-that-fades-in-when-scrolling) or [this](http://stackoverflow.com/questions/27685847/how-overlay-an-image-on-scrolling-android) ( i wont list every SO link i find about this ) — Jorel Amthor, Jan 29 '16 at 17:14
They are two completely different different questions. If you used either app they do two completely different things. There is no fading at all in the search app. The title also scrolls up and takes the place of the toolbar title. It should be a completely different question for that reason. — Eugene H, Jan 29 '16 at 17:20
@JorelAmthor you have not tried both apps didn't you? It's obvious and its NOT A MINOR difference. I had same problem here. — MiguelHincapieC, May 19 '16 at 21:42

Eugene H · Accepted Answer · 2016-01-29T18:40:50.503

I created a simple example of how it can be done. I did not optimize anything just threw some things together to see if it would work. You may need to play around with somethings to get it the way you want it. Although this is not optimized, it seems to perform better than the current search app.

Here is a GIF of what it looks like

Here is the code:

public class ScrollingActivity extends AppCompatActivity implements AppBarLayout.OnOffsetChangedListener {

    LinearLayout titleContainer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_scrolling);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        toolbar.setNavigationIcon(R.drawable.ic_arrow_back_24dp);
        final AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.app_bar);
        titleContainer = (LinearLayout) findViewById(R.id.titleContainer);
        appBarLayout.addOnOffsetChangedListener(this);
    }

    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        int maxScroll = appBarLayout.getTotalScrollRange();
        float percentage = (float) Math.abs(verticalOffset) / (float) maxScroll;
        float holderAlpha = 1f - percentage;
        titleContainer.setAlpha(holderAlpha);
    }
}

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"
    android:fitsSystemWindows="true"
    tools:context="h.eugene.com.testingtoolbar.ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="230dp"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:elevation="0dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:expandedTitleMarginBottom="16dp"
            app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Headline"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/images"
                app:layout_collapseMode="parallax" />

            <View
                android:layout_width="match_parent"
                android:layout_height="56dp"
                android:layout_gravity="end|bottom"
                android:background="?attr/colorPrimary" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/content_scrolling" />

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

Next Part of xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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"
    app:behavior_overlapTop="8dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="h.eugene.com.testingtoolbar.ScrollingActivity"
    tools:showIn="@layout/activity_scrolling">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="?attr/colorPrimary"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/titleContainer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:orientation="vertical"
            android:paddingBottom="16dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="32dp"
                android:text="Testing Pt1"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="32dp"
                android:text="Testing Pt2"
                android:textColor="@android:color/white" />
        </LinearLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#eee"
            android:padding="@dimen/text_margin"
            android:text="@string/large_text" />

    </LinearLayout>


</android.support.v4.widget.NestedScrollView>

The perfect solution! There is one problem: the `titleContainer` doesn't disappear, but becomes transparent. As a result, it remains an empty space. — Mark Korzhov, Feb 02 '16 at 15:13

How to implement an ActionBar scroll animation like in Google Search?

1 Answers1