CODEWITHSUNDEEP
androidandroid-viewpagerandroid-animationandroid-transitions
Jakob Harteg
Jakob Harteg

Reputation: 9747

ViewPager transition like Google Play Music "Player"

I am looking to mimic the ViewPager transition animation you see in the Play Music app's player interface. Looks like this.

Animation screens

Now, that scale-up/fade-in animation can easily be done with a custom PageTransformer described here, the hard part is just the top bar with song info and stuff. This one just slides in as a regular ViewPager would do.

To me it thereby looks like Google is somehow combining two PageTransformers for different parts of the layout (1. The top bar, 2. the cover art). This I have no Idea on how to do, and if it is even possible. Another way I could imagine the devs did it, is to have two ViewPagers. One for the song info bar and one for the covert art, which would then share the touch event to slide/animate simultaneously. That to me, however, sounds kind of inconvenient and like something that would use a lot of CPU.

Any suggestions?

Upvotes: 3

Views: 1675

Answers (1)

Xaver Kapeller
Xaver Kapeller

Reputation: 49817

A PageTransformer doesn't have to affect the whole View, afterall it is you who defines what happens. Consider that the layout of the Fragments inside the ViewPager looks something like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"    
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/top_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        ...

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        ...

    </RelativeLayout>

</LinearLayout>

As you can see there are two different RelativeLayouts they both have a id. With that you can just call findViewById() on the View inside the PageTransformer and transform different parts of the layout differently!

public class ExampleTransformer implements ViewPager.PageTransformer {

    public void transformPage(View view, float position) {

        View topBar = view.findViewById(R.id.top_bar);
        View content = view.findViewById(R.id.content);

        if (position < -1) {
            content.setAlpha(0);    
        } else if (position <= 1) {
            // Now you can fade the content without affecting the topBar
            content.setAlpha(...);

            // And by setting the translation on the root view you 
            // can move everything at the same time
            view.setTranslationX(...);
        } else {
            content.setAlpha(0);
        }
    }
}

I hope I could help you and if you have any further question feel free to ask!

Upvotes: 4

Related Questions