Demonstrate usage of Transitions API

Introduce custom windowSharedElementEnterTransition to showcase usage of a custom transitionSet.
android · Jul 9, 2015 · d36848d · d36848d
1 parent cd465dd
commit d36848d
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 18 deletions.
diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
@@ -36,11 +36,12 @@
             </intent-filter>
         </activity>
 
-        <activity android:name=".activity.CategorySelectionActivity" />
+        <activity
+            android:name=".activity.CategorySelectionActivity"
+            android:theme="@style/Topeka.CategorySelectionActivity" />
 
         <activity
             android:name=".activity.QuizActivity"
-            android:parentActivityName=".activity.CategorySelectionActivity"
             android:windowSoftInputMode="adjustPan" />
 
     </application>

diff --git a/app/src/main/java/com/google/samples/apps/topeka/activity/QuizActivity.java b/app/src/main/java/com/google/samples/apps/topeka/activity/QuizActivity.java
@@ -23,6 +23,8 @@
 import android.content.Intent;
 import android.os.Bundle;
 import android.support.annotation.NonNull;
+import android.transition.Transition;
+import android.transition.TransitionInflater;
 import android.util.Log;
 import android.view.View;
 import android.view.ViewAnimationUtils;
@@ -91,6 +93,11 @@ public static Intent getStartIntent(Context context, Category category) {
 
     @Override
     protected void onCreate(Bundle savedInstanceState) {
+        // Inflate and set the enter transition for this activity.
+        final Transition sharedElementEnterTransition = TransitionInflater.from(this)
+                .inflateTransition(R.transition.quiz_enter);
+        getWindow().setSharedElementEnterTransition(sharedElementEnterTransition);
+
         mCategoryId = getIntent().getStringExtra(Category.TAG);
         mInterpolator = AnimationUtils.loadInterpolator(this,
                 android.R.interpolator.fast_out_slow_in);
@@ -127,7 +134,11 @@ public void onBackPressed() {
         }
 
         // Scale the icon to 0 size before calling onBackPressed if it exists.
-        iconView.animate().scaleX(0).scaleY(0).setStartDelay(0)
+        iconView.animate()
+                .scaleX(.7f)
+                .scaleY(.7f)
+                .alphaBy(-1f)
+                .setStartDelay(0)
                 .setInterpolator(mInterpolator).setListener(
                 new AnimatorListenerAdapter() {
                     @Override
@@ -138,7 +149,8 @@ public void onAnimationEnd(Animator animation) {
                         QuizActivity.super.onBackPressed();
                         super.onAnimationEnd(animation);
                     }
-                });
+                })
+                .start();
     }
 
     private void startQuizFromClickOn(final View view) {
@@ -207,9 +219,12 @@ private void showQuizFabWithDoneIcon() {
                         mQuizFab.setVisibility(View.VISIBLE);
                         mQuizFab.setScaleX(0);
                         mQuizFab.setScaleY(0);
-                        mQuizFab.animate().scaleX(1).scaleY(1).
-                                setInterpolator(mInterpolator)
-                                .setListener(null);
+                        mQuizFab.animate()
+                                .scaleX(1)
+                                .scaleY(1)
+                                .setInterpolator(mInterpolator)
+                                .setListener(null)
+                                .start();
                     }
                 });
         // the toolbar should not have more elevation than the content while playing
@@ -253,11 +268,14 @@ private void initLayout(String categoryId) {
         mQuizFab.setImageResource(R.drawable.ic_play);
         mQuizFab.setVisibility(mSavedStateIsPlaying ? View.GONE : View.VISIBLE);
         mQuizFab.setOnClickListener(mOnClickListener);
-        mIcon.setScaleX(0);
-        mIcon.setScaleY(0);
         mIcon.setImageResource(resId);
-        mIcon.animate().scaleX(1).scaleY(1).setInterpolator(mInterpolator)
-                .setStartDelay(300);
+        mIcon.animate()
+                .scaleX(1)
+                .scaleY(1)
+                .alpha(1)
+                .setInterpolator(mInterpolator)
+                .setStartDelay(300)
+                .start();
     }
 
     private void initToolbar(Category category) {

diff --git a/app/src/main/java/com/google/samples/apps/topeka/fragment/SignInFragment.java b/app/src/main/java/com/google/samples/apps/topeka/fragment/SignInFragment.java
@@ -21,6 +21,7 @@
 import android.app.Fragment;
 import android.os.Bundle;
 import android.support.annotation.Nullable;
+import android.support.v4.view.animation.FastOutSlowInInterpolator;
 import android.text.Editable;
 import android.text.TextWatcher;
 import android.util.Pair;
@@ -157,12 +158,17 @@ public void onClick(View v) {
                 switch (v.getId()) {
                     case R.id.done:
                         savePlayer(getActivity());
-                        if (null == mSelectedAvatarView) {
-                            performSignInWithTransition(mAvatarGrid.getChildAt(
-                                    mSelectedAvatar.ordinal()));
-                        } else {
-                            performSignInWithTransition(mSelectedAvatarView);
-                        }
+                        removeDoneFab(new Runnable() {
+                            @Override
+                            public void run() {
+                                if (null == mSelectedAvatarView) {
+                                    performSignInWithTransition(mAvatarGrid.getChildAt(
+                                            mSelectedAvatar.ordinal()));
+                                } else {
+                                    performSignInWithTransition(mSelectedAvatarView);
+                                }
+                            }
+                        });
                         break;
                     default:
                         throw new UnsupportedOperationException(
@@ -173,6 +179,15 @@ public void onClick(View v) {
         });
     }
 
+    private void removeDoneFab(@Nullable Runnable endAction) {
+        mDoneFab.animate()
+                .scaleX(0)
+                .scaleY(0)
+                .setInterpolator(new FastOutSlowInInterpolator())
+                .withEndAction(endAction)
+                .start();
+    }
+
     private void setUpGridView(View container) {
         mAvatarGrid = (GridView) container.findViewById(R.id.avatars);
         mAvatarGrid.setAdapter(new AvatarAdapter(getActivity()));

diff --git a/app/src/main/res/layout/activity_quiz.xml b/app/src/main/res/layout/activity_quiz.xml
@@ -55,6 +55,7 @@
             android:layout_gravity="center"
             android:transitionName="@string/transition_background">
 
+            <!-- Alpha and scales are being used during entry animation -->
             <ImageView
                 android:id="@+id/icon"
                 android:layout_width="wrap_content"
@@ -63,7 +64,10 @@
                 android:layout_margin="@dimen/spacing_double"
                 android:contentDescription="@null"
                 android:padding="@dimen/spacing_double"
-                android:scaleType="centerInside" />
+                android:scaleType="centerInside"
+                android:alpha="0"
+                android:scaleX="0.7"
+                android:scaleY="0.7"/>
 
             <FrameLayout
                 android:id="@+id/quiz_fragment_container"

diff --git a/app/src/main/res/transition/category_enter.xml b/app/src/main/res/transition/category_enter.xml
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright 2015 Google Inc.
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
+    <changeBounds />
+    <changeTransform />
+    <changeClipBounds />
+    <changeImageTransform />
+    <arcMotion android:minimumHorizontalAngle="45" />
+</transitionSet>
diff --git a/app/src/main/res/transition/quiz_enter.xml b/app/src/main/res/transition/quiz_enter.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright 2015 Google Inc.
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <changeBounds />
+    <changeTransform />
+    <changeClipBounds />
+    <changeImageTransform />
+    <arcMotion android:maximumAngle="50"/>
+</transitionSet>
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
@@ -31,6 +31,11 @@
         <item name="android:windowBackground">@color/light_grey</item>
     </style>
 
+    <!-- Contains the enter transition for CategorySelectionActivity. -->
+    <style name="Topeka.CategorySelectionActivity">
+        <item name="android:windowSharedElementEnterTransition">@transition/category_enter</item>
+    </style>
+
     <style name="Topeka.Blue" parent="Topeka">
         <item name="android:colorPrimary">@color/theme_blue_primary</item>
         <item name="android:colorPrimaryDark">@color/theme_blue_primary</item>