Add Monzo Card Selection Animation

app/src/main/AndroidManifest.xml

@@ -36,6 +36,7 @@
         <activity android:name=".CombinedScenePart2" />
         <activity android:name=".CombinedScenePart3" />
         <activity android:name=".CombinedSceneLol" />
+        <activity android:name=".MikezoActivity" />
         <activity android:name=".MotionQuickieOnTouchUp" />
     </application>
 

app/src/main/java/com/mikescamell/locomotionlayout/MainActivity.kt

@@ -11,6 +11,9 @@ class MainActivity : AppCompatActivity() {
         super.onCreate(savedInstanceState)
         setContentView(R.layout.activity_main)
 
+        monzoCardSelectionAnimationButton.setOnClickListener {
+            startActivity(Intent(this, MikezoActivity::class.java))
+        }
         motionQuickieOnTouchUp.setOnClickListener {
             startActivity(Intent(this, MotionQuickieOnTouchUp::class.java))
         }

app/src/main/java/com/mikescamell/locomotionlayout/MikezoActivity.kt

@@ -0,0 +1,129 @@
+package com.mikescamell.locomotionlayout
+
+import android.os.Bundle
+import android.util.Log
+import androidx.annotation.IdRes
+import androidx.appcompat.app.AppCompatActivity
+import androidx.constraintlayout.motion.widget.MotionLayout
+import androidx.constraintlayout.motion.widget.MotionScene
+import androidx.core.view.isGone
+import androidx.core.view.isVisible
+import kotlinx.android.synthetic.main.mikezo_cards.*
+
+class MikezoActivity : AppCompatActivity() {
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContentView(R.layout.mikezo_cards)
+
+        bottomCardButton.setOnClickListener {
+            when (root.currentState) {
+                R.id.fanOut -> {
+                    root.setTransition(R.id.fanOut, R.id.topCardOnTop)
+                    root.transitionToEnd()
+                    collapsedCardCompletedListener(R.id.bottomCardOnTop)
+                    midnightPieCheckBox.isVisible = true
+                }
+                R.id.bottomCardOnTop -> {
+                    Log.d("Mikezo", "Card 1 already on top")
+                }
+                R.id.middleCardOnTop -> {
+                    root.setTransition(R.id.middleCardOnTop, R.id.bottomCardOnTop)
+                    root.transitionToEnd()
+                    legumeBlueCheckBox.isGone = true
+                    midnightPieCheckBox.isVisible = true
+                }
+                R.id.topCardOnTop -> {
+                    root.setTransition(R.id.topCardOnTop, R.id.bottomCardOnTop)
+                    root.transitionToEnd()
+                    hotWaffleCheckBox.isGone = true
+                    midnightPieCheckBox.isVisible = true
+                }
+            }
+        }
+        middleCardButton.setOnClickListener {
+            when (root.currentState) {
+                R.id.fanOut -> {
+                    root.setTransition(R.id.fanOut, R.id.topCardOnTop)
+                    root.transitionToEnd()
+                    collapsedCardCompletedListener(R.id.middleCardOnTop)
+                    legumeBlueCheckBox.isVisible = true
+                }
+                R.id.bottomCardOnTop -> {
+                    root.setTransition(R.id.bottomCardOnTop, R.id.middleCardOnTop)
+                    root.transitionToEnd()
+                    midnightPieCheckBox.isGone = true
+                    legumeBlueCheckBox.isVisible = true
+                }
+                R.id.middleCardOnTop -> {
+                    Log.d("Mikezo", "Card 2 already on top")
+                }
+                R.id.topCardOnTop -> {
+                    root.setTransition(R.id.topCardOnTop, R.id.middleCardOnTop)
+                    root.transitionToEnd()
+                    hotWaffleCheckBox.isGone = true
+                    legumeBlueCheckBox.isVisible = true
+                }
+            }
+        }
+        topCardButton.setOnClickListener {
+            when (root.currentState) {
+                R.id.fanOut -> {
+                    root.setTransition(R.id.fanOut, R.id.topCardOnTop)
+                    root.transitionToEnd()
+                    hotWaffleCheckBox.isVisible = true
+                }
+                R.id.bottomCardOnTop -> {
+                    root.setTransition(R.id.bottomCardOnTop, R.id.topCardOnTop)
+                    root.transitionToEnd()
+                    midnightPieCheckBox.isGone = true
+                    hotWaffleCheckBox.isVisible = true
+                }
+                R.id.middleCardOnTop -> {
+                    root.setTransition(R.id.middleCardOnTop, R.id.topCardOnTop)
+                    root.transitionToEnd()
+                    legumeBlueCheckBox.isGone = true
+                    hotWaffleCheckBox.isVisible = true
+                }
+                R.id.topCardOnTop -> {
+                    Log.d("Mikezo", "Card 3 already on top")
+                }
+            }
+        }
+    }
+
+    private fun collapsedCardCompletedListener(@IdRes endStateId: Int) {
+        root.setTransitionListener(object : MotionLayout.TransitionListener {
+
+            override fun allowsTransition(transition: MotionScene.Transition): Boolean {
+                return true
+            }
+
+            override fun onTransitionTrigger(
+                motionLayout: MotionLayout, startId: Int, endId: Boolean, progress: Float
+            ) {
+            }
+
+            override fun onTransitionStarted(
+                motionLayout: MotionLayout, startId: Int, endId: Int
+            ) {
+            }
+
+            override fun onTransitionChange(
+                motionLayout: MotionLayout,
+                startId: Int,
+                endId: Int,
+                progress: Float
+            ) {
+            }
+
+            override fun onTransitionCompleted(motionLayout: MotionLayout, currentId: Int) {
+                if (currentId == R.id.topCardOnTop) {
+                    root.setTransition(R.id.topCardOnTop, endStateId)
+                    root.transitionToEnd()
+                }
+                root.setTransitionListener(null)
+            }
+        })
+    }
+}

app/src/main/res/anim/custom_overshoot.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<overshootInterpolator xmlns:android="http://schemas.android.com/apk/res/android" android:tension="3.0" />

app/src/main/res/drawable/colour_square.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
+    <corners android:radius="8dp" />
+</shape>

app/src/main/res/drawable/ic_check_circle_blue_24dp.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+        android:width="24dp"
+        android:height="24dp"
+        android:viewportWidth="24.0"
+        android:viewportHeight="24.0">
+    <path
+        android:fillColor="#01a4d9"
+        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM10,17l-5,-5 1.41,-1.41L10,14.17l7.59,-7.59L19,8l-9,9z"/>
+</vector>

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

@@ -9,6 +9,12 @@
         android:layout_height="wrap_content"
         android:orientation="vertical">
 
+        <com.google.android.material.button.MaterialButton
+            android:id="@+id/monzoCardSelectionAnimationButton"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:text="Monzo Card Selection Animation" />
+
         <com.google.android.material.button.MaterialButton
             android:id="@+id/motionQuickieOnTouchUp"
             android:layout_width="match_parent"