Add YouTube like animiation.

Submit the PR as of now because the animation works similarly as
the YouTube app.
But ideally only the height of the animated image should change first
until the image moves close to the bottom of the screen, then the
width shrinks after that.

But looks like it's not supported to interpolate the size of an view
using KeyAttribute or KeyPosition.

I think if MotionLayout allows an intermediate ConstraintSet, the
animation becomes possible.

Author: thagikura

.gitignore

@@ -7,3 +7,4 @@ local.properties
 /build
 /captures
 .externalNativeBuild
+.idea/

build.gradle

@@ -17,13 +17,13 @@
 // Top-level build file where you can add configuration options common to all sub-projects/modules.
 
 buildscript {
-    ext.kotlin_version = '1.2.41'
+    ext.kotlin_version = '1.3.0'
     repositories {
         google()
         jcenter()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:3.2.0-beta01'
+        classpath 'com.android.tools.build:gradle:3.2.1'
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
 
         // NOTE: Do not place your application dependencies here; they belong

constraintlayout/build.gradle

@@ -17,11 +17,11 @@
 apply plugin: 'com.android.application'
 
 android {
-    compileSdkVersion 27
+    compileSdkVersion 28
     defaultConfig {
         applicationId "com.example.android.constraintlayoutexamples"
         minSdkVersion 19
-        targetSdkVersion 27
+        targetSdkVersion 28
         versionCode 1
         versionName "1.0"
         testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
@@ -34,7 +34,8 @@ dependencies {
     androidTestImplementation('com.android.support.test.espresso:espresso-core:2.2.2', {
         exclude group: 'com.android.support', module: 'support-annotations'
     })
-    implementation 'com.android.support:appcompat-v7:27.1.1'
+    implementation 'com.android.support:design:28.0.0'
+    implementation 'com.android.support:appcompat-v7:28.0.0'
     testImplementation 'junit:junit:4.12'
-    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
+    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
 }

gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
-#Fri Feb 10 14:44:40 PST 2017
+#Fri Nov 16 15:14:01 JST 2018
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-4.6-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.2-all.zip

motionlayout/build.gradle

@@ -47,6 +47,8 @@ dependencies {
     implementation 'android.arch.lifecycle:extensions:1.1.1'
     implementation 'com.android.support:design:27.1.1'
     implementation 'com.airbnb.android:lottie:2.5.1'
+    implementation 'com.github.bumptech.glide:glide:4.8.0'
+    annotationProcessor 'com.github.bumptech.glide:compiler:4.8.0'
     testImplementation 'junit:junit:4.12'
     androidTestImplementation 'com.android.support.test:runner:1.0.2'
     androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

motionlayout/src/main/AndroidManifest.xml

@@ -35,6 +35,7 @@
         <activity android:name=".viewpagerdemo.ViewPagerActivity2"/>
         <activity android:name=".fragmentsdemo.FragmentExampleActivity"/>
         <activity android:name=".fragmentsdemo.FragmentExample2Activity"/>
+        <activity android:name=".youtubedemo.YouTubeDemoActivity" />
     </application>
 
 </manifest>

motionlayout/src/main/java/com/google/androidstudio/motionlayoutexample/MainActivity.kt

@@ -10,6 +10,7 @@ import com.google.androidstudio.motionlayoutexample.fragmentsdemo.FragmentExampl
 import com.google.androidstudio.motionlayoutexample.fragmentsdemo.FragmentExampleActivity
 import com.google.androidstudio.motionlayoutexample.viewpagerdemo.ViewPagerActivity
 import com.google.androidstudio.motionlayoutexample.viewpagerdemo.ViewPagerActivity2
+import com.google.androidstudio.motionlayoutexample.youtubedemo.YouTubeDemoActivity
 import kotlinx.android.synthetic.main.activity_main.*
 
 class MainActivity : AppCompatActivity(), CompoundButton.OnCheckedChangeListener {
@@ -41,7 +42,9 @@ class MainActivity : AppCompatActivity(), CompoundButton.OnCheckedChangeListener
             DemosAdapter.Demo("Complex Motion Example (3/4)", "Advanced CoordinatorLayout-like behavior (adding a FAB). Implemented with MotionLayout only, using direct resizing of the view.", R.layout.motion_19_coordination),
             DemosAdapter.Demo("Complex Motion Example (4/4)", "Advanced Synchronized reval motion + helper (bounce). Implemented with MotionLayout only.", R.layout.motion_20_reveal),
             DemosAdapter.Demo("Fragment Transition Example (1/2)", "Example showing transitioning fragments within MotionLayout", FragmentExampleActivity::class.java),
-            DemosAdapter.Demo("Fragment Transition Example (2/2)", "Example showing transitioning fragments within MotionLayout", FragmentExample2Activity::class.java)
+            DemosAdapter.Demo("Fragment Transition Example (2/2)", "Example showing transitioning fragments within MotionLayout", FragmentExample2Activity::class.java),
+            DemosAdapter.Demo("Fragment Transition Example (2/2)", "Example showing transitioning fragments within MotionLayout", FragmentExample2Activity::class.java),
+            DemosAdapter.Demo("YouTube like motion Example", "Example showing a transition like YouTube", YouTubeDemoActivity::class.java)
     )
 
     override fun onCreate(savedInstanceState: Bundle?) {

motionlayout/src/main/java/com/google/androidstudio/motionlayoutexample/youtubedemo/Cats.kt

@@ -0,0 +1,44 @@
+/*
+ * Copyright 2018 Google LLC
+ *
+ * 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
+ *
+ *     https://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.
+ */
+
+package com.google.androidstudio.motionlayoutexample.youtubedemo
+
+import com.google.androidstudio.motionlayoutexample.R
+
+object Cats {
+
+    val catImages = intArrayOf(
+        R.drawable.cat_1,
+        R.drawable.cat_2,
+        R.drawable.cat_3,
+        R.drawable.cat_4,
+        R.drawable.cat_5,
+        R.drawable.cat_6,
+        R.drawable.cat_7,
+        R.drawable.cat_8,
+        R.drawable.cat_9,
+        R.drawable.cat_10,
+        R.drawable.cat_11,
+        R.drawable.cat_12,
+        R.drawable.cat_13,
+        R.drawable.cat_14,
+        R.drawable.cat_15,
+        R.drawable.cat_16,
+        R.drawable.cat_17,
+        R.drawable.cat_18,
+        R.drawable.cat_19
+    )
+}

motionlayout/src/main/java/com/google/androidstudio/motionlayoutexample/youtubedemo/PhotosAdapter.kt

@@ -0,0 +1,89 @@
+/*
+ * Copyright 2018 Google LLC
+ *
+ * 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
+ *
+ *     https://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.
+ */
+
+package com.google.androidstudio.motionlayoutexample.youtubedemo
+
+import android.support.v7.widget.RecyclerView
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import android.widget.ImageView
+import android.widget.TextView
+import com.bumptech.glide.Glide
+import com.google.androidstudio.motionlayoutexample.youtubedemo.YouTubeDemoViewHolder.CatRowViewHolder
+import com.google.androidstudio.motionlayoutexample.youtubedemo.YouTubeDemoViewHolder.TextDescriptionViewHolder
+import com.google.androidstudio.motionlayoutexample.youtubedemo.YouTubeDemoViewHolder.TextHeaderViewHolder
+import com.google.androidstudio.motionlayoutexample.R
+
+class FrontPhotosAdapter : RecyclerView.Adapter<YouTubeDemoViewHolder>() {
+
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): YouTubeDemoViewHolder {
+        val inflater = LayoutInflater.from(parent.context)
+        val itemView = inflater.inflate(viewType, parent, false)
+        return when (viewType) {
+            R.layout.motion_24_recyclerview_expanded_text_header -> TextHeaderViewHolder (itemView)
+            R.layout.motion_24_recyclerview_expanded_text_description -> TextDescriptionViewHolder (itemView)
+            R.layout.motion_24_recyclerview_expanded_row -> CatRowViewHolder(itemView)
+            else -> throw IllegalStateException("Unknown viewType $viewType")
+        }
+    }
+
+    override fun onBindViewHolder(holder: YouTubeDemoViewHolder, position: Int) {
+        when (holder) {
+            is TextHeaderViewHolder -> {}
+            is TextDescriptionViewHolder -> {}
+            is CatRowViewHolder -> {
+                val imagePosition = position - 2
+                holder.textView.text = holder.textView.resources.getString(R.string.cat_n, imagePosition)
+                Glide.with(holder.imageView)
+                    .load(Cats.catImages[imagePosition])
+                    .into(holder.imageView)
+            }
+        }
+    }
+
+    override fun getItemViewType(position: Int): Int {
+
+        return when (position) {
+            0 -> R.layout.motion_24_recyclerview_expanded_text_header
+            1 -> R.layout.motion_24_recyclerview_expanded_text_description
+            else -> R.layout.motion_24_recyclerview_expanded_row
+        }
+    }
+
+    override fun getItemCount() = Cats.catImages.size + 2 // For text header and text description
+}
+
+/**
+ * [RecyclerView.ViewHolder] types used by this adapter.
+ */
+sealed class YouTubeDemoViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
+
+    class TextHeaderViewHolder(
+        itemView: View
+    ) : YouTubeDemoViewHolder(itemView)
+
+    class TextDescriptionViewHolder(
+        itemView: View
+    ) : YouTubeDemoViewHolder(itemView)
+
+    class CatRowViewHolder(
+        itemView: View
+    ) : YouTubeDemoViewHolder(itemView) {
+        val imageView = itemView.findViewById(R.id.image_row) as ImageView
+        val textView = itemView.findViewById(R.id.text_row) as TextView
+    }
+}

motionlayout/src/main/java/com/google/androidstudio/motionlayoutexample/youtubedemo/YouTubeDemoActivity.kt

@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2018 The Android Open Source Project
+ *
+ * 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.
+ */
+
+package com.google.androidstudio.motionlayoutexample.youtubedemo
+
+import android.os.Bundle
+import android.support.constraint.motion.MotionLayout
+import android.support.v7.app.AppCompatActivity
+import android.support.v7.widget.LinearLayoutManager
+import android.support.v7.widget.RecyclerView
+import com.google.androidstudio.motionlayoutexample.R
+
+class YouTubeDemoActivity : AppCompatActivity() {
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContentView(R.layout.motion_24_youtube)
+        val motionLayout = findViewById<MotionLayout>(R.id.motionLayout).apply {
+            savedInstanceState
+        }
+        findViewById<RecyclerView>(R.id.recyclerview_front).apply {
+            adapter = FrontPhotosAdapter()
+            isNestedScrollingEnabled = false
+            layoutManager = LinearLayoutManager(this@YouTubeDemoActivity)
+        }
+        val doShowPaths = intent.getBooleanExtra("showPaths", false)
+        motionLayout.setShowPaths(doShowPaths)
+    }
+}