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.

Answer 1

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>