Added a morphing animation of the Toolbar icon when opening ApplyFragment i.e. "back" icon to "clear" icon.

Author: Piotr Zawadzki

README.md

@@ -10,6 +10,7 @@ This is a sample project where I experimented with different aspects of the [And
 - passing arguments between Fragments via [Safe Args](https://developer.android.com/guide/navigation/navigation-pass-data#Safe-args)
 - starting Fragments for result and waiting for that result (similar to Activity's `startActivityForResult` and `onActivityResult`)
 - transitions between fragments with shared Toolbar
+- a simple Toolbar navigation icon morphing ("<-" -> "X")
 
 There's no MVP/MVVM/MVI here, no dependency injection - just the Navigation Component to make it simple.
 

app/src/main/java/com/github/zawadz88/navigationcomponentplayground/ApplyFragment.kt

@@ -4,6 +4,9 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import androidx.core.content.ContextCompat
+import androidx.vectordrawable.graphics.drawable.AnimatedVectorDrawableCompat
+import kotlinx.android.synthetic.main.appbar.toolbar
 
 class ApplyFragment : BaseFragment() {
 
@@ -14,4 +17,16 @@ class ApplyFragment : BaseFragment() {
         initEnterTransitions()
         return inflater.inflate(R.layout.fragment_apply, container, false)
     }
+
+    override fun onActivityCreated(savedInstanceState: Bundle?) {
+        super.onActivityCreated(savedInstanceState)
+        if (savedInstanceState != null) {
+            toolbar.setNavigationIcon(R.drawable.ic_clear)
+        } else {
+            val animatedIconDrawable = checkNotNull(AnimatedVectorDrawableCompat.create(requireContext(), R.drawable.avd_back_to_clear)) { "Could not create animated vector" }
+            animatedIconDrawable.setTint(ContextCompat.getColor(requireContext(), R.color.toolbarColorControlNormal))
+            animatedIconDrawable.start()
+            toolbar.navigationIcon = animatedIconDrawable
+        }
+    }
 }

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

@@ -0,0 +1,29 @@
+<animated-vector
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt">
+    <aapt:attr name="android:drawable">
+        <vector
+            android:name="vector"
+            android:width="24dp"
+            android:height="24dp"
+            android:viewportWidth="24"
+            android:viewportHeight="24">
+            <path
+                android:name="path"
+                android:pathData="M 20 11 L 7.8 11 L 13.4 5.4 L 12 4 L 4 12 L 12 20 L 13.4 18.6 L 7.8 13 L 20 13 L 20 11 Z"
+                android:fillColor="#000000"
+                android:strokeColor="#000000"/>
+        </vector>
+    </aapt:attr>
+    <target android:name="path">
+        <aapt:attr name="android:animation">
+            <objectAnimator
+                android:propertyName="pathData"
+                android:duration="300"
+                android:valueFrom="M 20 11 L 13.9 11 L 7.8 11 L 13.4 5.4 L 12 4 L 4 12 L 12 20 L 13.4 18.6 L 7.8 13 L 13.9 13 L 20 13 L 20 11 Z"
+                android:valueTo="M 19 6.41 L 17.59 5 L 12 10.59 L 6.41 5 L 5 6.41 L 10.59 12 L 5 17.59 L 6.41 19 L 12 13.41 L 17.59 19 L 19 17.59 L 13.41 12 Z"
+                android:valueType="pathType"
+                android:interpolator="@android:interpolator/fast_out_slow_in"/>
+        </aapt:attr>
+    </target>
+</animated-vector>

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

@@ -3,4 +3,5 @@
     <color name="colorPrimary">#008577</color>
     <color name="colorPrimaryDark">#00574B</color>
     <color name="colorAccent">#D81B60</color>
+    <color name="toolbarColorControlNormal">@android:color/white</color>
 </resources>

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

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <item name="ic_back" type="drawable" format="reference">@drawable/abc_ic_ab_back_material</item>
+    <item name="ic_clear" type="drawable" format="reference">@drawable/abc_ic_clear_material</item>
 
 </resources>

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

@@ -13,8 +13,12 @@
         <item name="windowNoTitle">true</item>
     </style>
 
-    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
+    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
+        <item name="colorControlNormal">@color/toolbarColorControlNormal</item>
+    </style>
 
     <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
 
+    <style name="ToolbarColoredBackArrow" parent="AppTheme">
+    </style>
 </resources>