Nie wiem, czy dokładnie tak robi aplikacja kalendarza, ale jest wystarczająco blisko dla mnie.

Caveats

• metoda wykorzystuje metodę ViewAnimationUtils.createCircularReveal wprowadzoną w Lollipop.
• wymaga znajomości wysokości paska stanu i paska akcji paska narzędzi. Nadal możesz użyć ?attr/actionBarSize dla paska akcji i uzyskać oba dynamicznie, ale dla uproszczenia przyjęłam 56dp dla wysokości paska akcji i 24dp dla wysokości paska stanu.

Ogólne Idea

Ogólna idea polega na ustawieniu paska akcji i paska stanu na przezroczysty. Spowoduje to przesunięcie paska akcji w górę pod paskiem stanu, więc musisz dostosować rozmiar i wypełnienie paska akcji, aby to skompensować. Następnie używasz widoku za nim i ViewAnimationUtils.createCircularReveal, aby odsłonić nowy kolor tła. Potrzebujesz jeszcze jednego widoku, aby pokazać stary kolor tła, ponieważ Widok środkowy ujawnia nowy.

Animacja

Animacja wymaga:

• przezroczysty pasek narzędzi Pasek czynności , który obejmuje przestrzeń zwykłego paska czynności i paska stanu. Hard-coded wysokość, w tym przypadku, jest 56dp (actionbar) + 24dp (statusbar) = 80dp. Musisz również ustawić górne wypełnienie na 24dp, aby zawartość paska actionbar our znajdowała się pod paskiem stanu.
• widok środkowy (nazwę Go reveal view ) jest tego samego rozmiaru (wysokość 80dp), ale tuż za paskiem akcji. To będzie Widok ViewAnimationUtils.createCircularReveal działa na.
• widok z dołu (nazwę Go reveal background view), który jest tego samego rozmiaru co Widok reveal, ale za nim. Ten widok Służy do pokazania starego koloru tła, podczas gdy Widok odsłaniania ujawnia nowy kolor na wierzchu.

Kod

Oto kluczowe fragmenty kodu, których użyłem. Zobacz przykładowy projekt na https://github.com/shaun-blake-experiments/example-toolbar-animation .

Activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <View
        android:id="@+id/revealBackground"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:paddingTop="24dp"
        android:background="@color/primary"
        android:elevation="4dp">
    </View>

    <View
        android:id="@+id/reveal"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:paddingTop="24dp"
        android:background="@color/primary"
        android:elevation="4dp">
    </View>

    <Toolbar
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:paddingTop="24dp"
        android:background="@android:color/transparent"
        android:elevation="4dp"
        android:theme="@style/TranslucentActionBar">
        </Toolbar>

    <ToggleButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Invert Toolbar Colors"
        android:textOn="Invert Toolbar Colors On"
        android:textOff="Invert Toolbar Colors Off"
        android:id="@+id/toggleButton"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

Style.xml

<resources>
    <style name="AppTheme" parent="@android:style/Theme.Material.Light.NoActionBar">
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

    <style name="TranslucentActionBar" parent="@android:style/Widget.Material.ActionBar">
        <item name="android:textColorPrimary">@color/primary_text_dark_background</item>
    </style>
</resources>

Colors=xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">#2196F3</color>
    <color name="primary_dark">#1976D2</color>
    <color name="primary_light">#BBDEFB</color>
    <color name="accent">#009688</color>
    <color name="primary_text">#DD000000</color>
    <color name="primary_text_dark_background">#FFFFFF</color>
    <color name="secondary_text">#89000000</color>
    <color name="icons">#FFFFFF</color>
    <color name="divider">#30000000</color>
</resources>

Główna aktywność.java

package com.example.android.toolbaranimation;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewAnimationUtils;
import android.widget.ToggleButton;
import android.widget.Toolbar;


public class MainActivity extends Activity {

    private View mRevealView;
    private View mRevealBackgroundView;
    private Toolbar mToolbar;

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

        mToolbar = (Toolbar) findViewById(R.id.appbar);
        mToolbar.setTitle(getString(R.string.app_name));

        mRevealView = findViewById(R.id.reveal);
        mRevealBackgroundView = findViewById(R.id.revealBackground);

        ToggleButton toggleButton = (ToggleButton) findViewById(R.id.toggleButton);
        toggleButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                boolean on = ((ToggleButton) v).isChecked();

                if (on) {
                    animateAppAndStatusBar(R.color.primary, R.color.accent);
                } else {
                    animateAppAndStatusBar(R.color.accent, R.color.primary);
                }
            }
        });

        setActionBar(mToolbar);
    }

    private void animateAppAndStatusBar(int fromColor, final int toColor) {
        Animator animator = ViewAnimationUtils.createCircularReveal(
                mRevealView,
                mToolbar.getWidth() / 2,
                mToolbar.getHeight() / 2, 0,
                mToolbar.getWidth() / 2);

        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                mRevealView.setBackgroundColor(getResources().getColor(toColor));
            }
        });

        mRevealBackgroundView.setBackgroundColor(getResources().getColor(fromColor));
        animator.setStartDelay(200);
        animator.setDuration(125);
        animator.start();
        mRevealView.setVisibility(View.VISIBLE);
    }
}

Uwagi

• uważaj na właściwości android:elevation na pasku narzędzi, reveal i reveal widoki tła. Jeśli elewacja jest niższa na pasku narzędzi, Pozostałe zakryją przyciski i tekst.