Tweaked transitions into dribbble player profile screen

- Got rid of the text transtion as it wasn't amazing
- Added shared enter on the background from some places
- Worked around overlay issue :|

app/src/main/java/io/plaidapp/ui/DribbbleShot.java

@@ -292,10 +292,7 @@ public void onClick(View v) {
                     }
                     ActivityOptions options =
                             ActivityOptions.makeSceneTransitionAnimation(DribbbleShot.this,
-                                    Pair.create((View) playerAvatar,
-                                            getString(R.string.transition_player_avatar)),
-                                    Pair.create((View) playerName,
-                                            getString(R.string.transition_player_name)));
+                                    playerAvatar, getString(R.string.transition_player_avatar));
                     startActivity(player, options.toBundle());
                 }
             };
@@ -893,8 +890,8 @@ public void onClick(View v) {
                             ActivityOptions.makeSceneTransitionAnimation(DribbbleShot.this,
                                     Pair.create((View) avatar,
                                             getString(R.string.transition_player_avatar)),
-                                    Pair.create((View) author,
-                                            getString(R.string.transition_player_name)));
+                                    Pair.create(view,
+                                            getString(R.string.transition_player_background)));
                     startActivity(player, options.toBundle());
                 }
             });

app/src/main/java/io/plaidapp/ui/PlayerActivity.java

@@ -18,7 +18,6 @@
 
 import android.app.Activity;
 import android.app.ActivityOptions;
-import android.app.SharedElementCallback;
 import android.content.Intent;
 import android.content.res.Resources;
 import android.graphics.drawable.AnimatedVectorDrawable;
@@ -28,7 +27,6 @@
 import android.support.v7.widget.RecyclerView;
 import android.text.TextUtils;
 import android.transition.TransitionManager;
-import android.util.TypedValue;
 import android.view.MotionEvent;
 import android.view.View;
 import android.view.ViewGroup;
@@ -116,7 +114,6 @@ public void onDragDismissed() {
         if (intent.hasExtra(EXTRA_PLAYER)) {
             player = intent.getParcelableExtra(EXTRA_PLAYER);
             bindPlayer();
-            setupSharedEnter();
         } else if (intent.hasExtra(EXTRA_PLAYER_NAME)) {
             String name = intent.getStringExtra(EXTRA_PLAYER_NAME);
             playerName.setText(name);
@@ -259,43 +256,6 @@ public void failure(RetrofitError error) {
         }
     }
 
-    private void setupSharedEnter() {
-        setEnterSharedElementCallback(new SharedElementCallback() {
-            private float finalSize;
-            private int finalPaddingStart;
-
-            @Override
-            public void onSharedElementStart(List<String> sharedElementNames, List<View>
-                    sharedElements, List<View> sharedElementSnapshots) {
-                finalSize = playerName.getTextSize();
-                finalPaddingStart = playerName.getPaddingStart();
-                playerName.setTextSize(14);
-                ViewUtils.setPaddingStart(playerName, 0);
-                forceSharedElementLayout();
-            }
-
-            @Override
-            public void onSharedElementEnd(List<String> sharedElementNames, List<View>
-                    sharedElements, List<View> sharedElementSnapshots) {
-                playerName.setTextSize(TypedValue.COMPLEX_UNIT_PX, finalSize);
-                ViewUtils.setPaddingStart(playerName, finalPaddingStart);
-                forceSharedElementLayout();
-            }
-
-            private void forceSharedElementLayout() {
-                playerName.measure(
-                        View.MeasureSpec.makeMeasureSpec(playerName.getWidth(),
-                                View.MeasureSpec.EXACTLY),
-                        View.MeasureSpec.makeMeasureSpec(playerName.getHeight(),
-                                View.MeasureSpec.EXACTLY));
-                playerName.layout(playerName.getLeft(),
-                        playerName.getTop(),
-                        playerName.getRight(),
-                        playerName.getBottom());
-            }
-        });
-    }
-
     private void loadPlayer(long userId) {
         getDribbbleApi().getUser(userId, new Callback<User>() {
             @Override

app/src/main/java/io/plaidapp/ui/PlayerSheet.java

@@ -275,8 +275,8 @@ public void onClick(View v) {
                             ActivityOptions.makeSceneTransitionAnimation(PlayerSheet.this,
                                     Pair.create((View) holder.playerAvatar,
                                             getString(R.string.transition_player_avatar)),
-                                    Pair.create((View) holder.playerName,
-                                            getString(R.string.transition_player_name)));
+                                    Pair.create(holder.itemView,
+                                            getString(R.string.transition_player_background)));
                     startActivity(player, options.toBundle());
                 }
             });

app/src/main/res/layout/activity_dribbble_player.xml

@@ -32,35 +32,51 @@
         android:id="@+id/background"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="@color/background_light" />
+        android:background="@color/background_light"
+        android:elevation="@dimen/z_card"
+        android:transitionName="@string/transition_player_background" />
+
+    <!-- the below avatar view *should* be in the linear layout below but this causes clipping
+         issues during the shared element transition. This could be resolved by using the overlay
+         during the transition but this does not work when we also transition the background as a
+         shared element (i.e. background in the overlay == draw over everything). Work around this
+         by pulling the avatar up into the root view (to prevent clipping) and adding a spacer
+         in the below. -->
+
+    <ImageView
+        android:id="@+id/avatar"
+        android:layout_width="@dimen/large_avatar_size"
+        android:layout_height="@dimen/large_avatar_size"
+        android:layout_gravity="center_horizontal"
+        android:layout_marginTop="@dimen/large_avatar_margin"
+        android:layout_marginBottom="@dimen/avatar_margin"
+        android:elevation="@dimen/z_card"
+        android:padding="@dimen/avatar_padding"
+        android:transitionName="@string/transition_player_avatar"
+        android:src="@drawable/avatar_placeholder" />
 
     <LinearLayout
         android:id="@+id/player_description"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="vertical"
+        android:transitionGroup="false"
+        android:elevation="@dimen/z_card"
         android:background="@android:color/transparent"> <!-- background needed for ripples -->
 
-        <ImageView
-            android:id="@+id/avatar"
-            android:layout_width="@dimen/large_avatar_size"
-            android:layout_height="@dimen/large_avatar_size"
-            android:layout_gravity="center_horizontal"
-            android:layout_marginTop="@dimen/large_avatar_margin"
-            android:layout_marginBottom="@dimen/avatar_margin"
-            android:padding="@dimen/avatar_padding"
-            android:transitionName="@string/transition_player_avatar"
-            android:src="@drawable/avatar_placeholder" />
+        <!-- spacer for avatar, see above -->
+        <Space
+            android:layout_width="0dp"
+            android:layout_height="@dimen/large_avatar_height" />
 
         <io.plaidapp.ui.widget.BaselineGridTextView
             android:id="@+id/player_name"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
+            android:gravity="center_horizontal"
             android:paddingBottom="@dimen/spacing_normal"
             android:paddingStart="@dimen/padding_normal"
             android:paddingEnd="@dimen/padding_normal"
-            android:gravity="center_horizontal"
-            android:transitionName="@string/transition_player_name"
             tools:text="Nick Butcher"
             style="@style/Widget.Plaid.PlayerTitle" />
 
@@ -100,7 +116,8 @@
             android:paddingStart="@dimen/padding_normal"
             android:paddingTop="@dimen/spacing_normal"
             android:paddingEnd="@dimen/padding_normal"
-            android:paddingBottom="@dimen/padding_normal">
+            android:paddingBottom="@dimen/padding_normal"
+            android:clipToPadding="false">
 
             <io.plaidapp.ui.widget.BaselineGridTextView
                 android:id="@+id/shot_count"
@@ -147,6 +164,7 @@
         android:id="@+id/player_shots"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
+        android:elevation="@dimen/z_card"
         android:scrollbars="vertical"
         android:scrollbarStyle="outsideOverlay"
         android:clipToPadding="false"

app/src/main/res/layout/player_item.xml

@@ -70,6 +70,7 @@
         android:layout_alignParentEnd="true"
         android:layout_marginTop="@dimen/spacing_micro"
         android:maxLines="2"
+        android:ellipsize="end"
         android:textColorLink="@color/dribbble_links"
         android:textColorHighlight="@color/dribbble_link_highlight"
         tools:text="Blah blah blah blah blah blah blah blah blah blah blah blah blah"

app/src/main/res/transition/dribbble_player_enter.xml

@@ -22,10 +22,12 @@
 
     <slide
         android:slideEdge="bottom"
-        android:duration="200">
+        android:startDelay="100"
+        android:duration="300">
         <targets>
             <target android:excludeId="@android:id/navigationBarBackground" />
             <target android:excludeId="@android:id/statusBarBackground" />
+            <target android:excludeId="@id/background" />
         </targets>
     </slide>
 
@@ -35,7 +37,7 @@
         </targets>
     </fade>
 
-    <fade android:duration="300">
+    <fade android:duration="400">
         <targets>
             <target android:targetId="@android:id/navigationBarBackground" />
             <target android:targetId="@android:id/statusBarBackground" />

app/src/main/res/transition/dribbble_player_shared_enter.xml

@@ -21,13 +21,6 @@
     android:transitionOrdering="together">
 
     <changeBounds />
-
     <arcMotion android:maximumAngle="50" />
 
-    <transition class="io.plaidapp.ui.transitions.TextResizeTransition">
-        <targets>
-            <target android:targetId="@id/player_name" />
-        </targets>
-    </transition>
-
 </transitionSet>

app/src/main/res/transition/dribbble_player_sheet_enter.xml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Copyright 2016 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"
+    android:transitionOrdering="together"
+    android:interpolator="@android:interpolator/linear_out_slow_in">
+
+    <slide
+        android:slideEdge="bottom"
+        android:duration="200">
+        <targets>
+            <target android:excludeId="@android:id/navigationBarBackground" />
+            <target android:excludeId="@android:id/statusBarBackground" />
+        </targets>
+    </slide>
+
+    <fade android:duration="300">
+        <targets>
+            <target android:targetId="@android:id/navigationBarBackground" />
+            <target android:targetId="@android:id/statusBarBackground" />
+        </targets>
+    </fade>
+
+</transitionSet>

app/src/main/res/transition/dribbble_player_sheet_return.xml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Copyright 2016 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"
+    android:transitionOrdering="together"
+    android:interpolator="@android:interpolator/fast_out_linear_in">
+
+    <slide
+        android:slideEdge="bottom"
+        android:duration="200">
+        <targets>
+            <target android:excludeId="@android:id/navigationBarBackground" />
+            <target android:excludeId="@android:id/statusBarBackground" />
+        </targets>
+    </slide>
+
+    <fade android:duration="300">
+        <targets>
+            <target android:targetId="@android:id/navigationBarBackground" />
+            <target android:targetId="@android:id/statusBarBackground" />
+        </targets>
+    </fade>
+
+</transitionSet>

app/src/main/res/values/dimens.xml

@@ -68,6 +68,7 @@
     <!-- dribbble player -->
     <dimen name="large_avatar_size">120dp</dimen> <!-- 2 * actionBarSize - 2 * avatar_padding -->
     <dimen name="large_avatar_margin">28dp</dimen> <!-- spacing_large - avatar_padding -->
+    <dimen name="large_avatar_height">176dp</dimen> <!-- large_avatar_margin + large_avatar_size + large_avatar_margin -->
 
     <!-- bottom sheet -->
     <dimen name="bottom_sheet_width">@dimen/match_parent</dimen>