add custom attributes and collapsible header

Author: solygambas

15-milky-way/.idea/deploymentTargetDropDown.xml

@@ -2,9 +2,9 @@
 
 An app to learn how to finely customize an animation, using MotionLayout.
 
-<!-- <p align="center">
+<p align="center">
 <img src="screenshot.png" style="width:528px;max-width: 100%;">
-</p> -->
+</p>
 
 ## Features
 

15-milky-way/README.md

@@ -33,7 +33,13 @@ class Step8Activity : AppCompatActivity() {
     }
 
     private fun coordinateMotion() {
-        // TODO: set progress of MotionLayout based on an AppBarLayout.OnOffsetChangedListener
-
+        // set progress of MotionLayout based on an AppBarLayout.OnOffsetChangedListener
+        val appBarLayout: AppBarLayout = findViewById(R.id.appbar_layout)
+        val motionLayout: MotionLayout = findViewById(R.id.motion_layout)
+        val listener = AppBarLayout.OnOffsetChangedListener { _, verticalOffset ->
+            val seekPosition = -verticalOffset / appBarLayout.totalScrollRange.toFloat()
+            motionLayout.progress = seekPosition
+        }
+        appBarLayout.addOnOffsetChangedListener(listener)
     }
 }

15-milky-way/app/src/main/java/com/google/samples/motionlayoutcodelab/Step8Activity.kt

@@ -28,37 +28,39 @@
             android:id="@+id/motion_layout"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
+            android:minHeight="80dp"
             app:layoutDescription="@xml/step8"
+            app:layout_scrollFlags="scroll|enterAlways|snap|exitUntilCollapsed"
             app:motionDebug="SHOW_PATH">
 
             <ImageView
                 android:id="@+id/background"
                 android:layout_width="0dp"
                 android:layout_height="1000dp"
-                app:layout_constraintTop_toTopOf="parent"
+                android:scaleType="centerCrop"
                 app:layout_constraintBottom_toBottomOf="parent"
-                app:layout_constraintStart_toStartOf="parent"
                 app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
                 app:srcCompat="@drawable/background"
-                android:scaleType="centerCrop"
                 tools:ignore="ContentDescription" />
 
 
             <ImageView
                 android:id="@+id/moon"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
+                android:contentDescription="@string/moon"
                 app:srcCompat="@drawable/ic_moon"
-                app:tint="?colorOnPrimary"
-                android:contentDescription="@string/moon" />
+                app:tint="?colorOnPrimary" />
 
             <TextView
                 android:id="@+id/credits"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="@string/credits"
-                android:textSize="24sp"
-                android:textColor="?colorOnPrimary" />
+                android:textColor="?colorOnPrimary"
+                android:textSize="24sp" />
         </androidx.constraintlayout.motion.widget.MotionLayout>
     </com.google.android.material.appbar.AppBarLayout>
 

15-milky-way/app/src/main/res/layout/activity_step8.xml

@@ -48,10 +48,26 @@
                     motion:percentY="0.6"
             />
 
-            <!-- TODO: Add KeyAttributes to rotate and resize @id/moon -->
+            <!-- rotate and resize @id/moon -->
+            <KeyAttribute
+                motion:framePosition="50"
+                motion:motionTarget="@id/moon"
+                android:scaleY="2.0"
+                android:scaleX="2.0"
+                android:rotation="-360"
+                />
+            <KeyAttribute
+                motion:framePosition="100"
+                motion:motionTarget="@id/moon"
+                android:rotation="-720"
+                />
 
-
-            <!-- TODO: Add KeyAttribute to delay the appearance of @id/credits -->
+            <!-- delay the appearance of @id/credits -->
+            <KeyAttribute
+                motion:framePosition="85"
+                motion:motionTarget="@id/credits"
+                android:alpha="0.0"
+                />
 
         </KeyFrameSet>
     </Transition>

15-milky-way/app/src/main/res/xml/step5.xml

@@ -65,7 +65,28 @@
                     android:alpha="0.0"
             />
 
-            <!-- TODO Add Custom attributes here -->
+            <!-- Custom attributes -->
+            <KeyAttribute
+                motion:framePosition="0"
+                motion:motionTarget="@id/moon">
+                <CustomAttribute
+                    motion:attributeName="colorFilter"
+                    motion:customColorValue="#FFFFFF" />
+            </KeyAttribute>
+            <KeyAttribute
+                motion:framePosition="50"
+                motion:motionTarget="@id/moon">
+                <CustomAttribute
+                    motion:attributeName="colorFilter"
+                    motion:customColorValue="#FFB612" />
+            </KeyAttribute>
+            <KeyAttribute
+                motion:framePosition="100"
+                motion:motionTarget="@id/moon">
+                <CustomAttribute
+                    motion:attributeName="colorFilter"
+                    motion:customColorValue="#FFFFFF" />
+            </KeyAttribute>
 
         </KeyFrameSet>
     </Transition>

15-milky-way/app/src/main/res/xml/step6.xml

@@ -28,6 +28,7 @@
         <OnSwipe
                 motion:touchAnchorId="@id/moon"
                 motion:touchAnchorSide="bottom"
+                motion:dragDirection="dragRight"
         />