Add transition into course details screen.

Change-Id: Icea1622f1c4951ece903de6e65d59f7b285e29ec

Author: nickbutcher

app/build.gradle

@@ -19,7 +19,6 @@ apply plugin: "androidx.navigation.safeargs.kotlin"
 
 android {
     compileSdkVersion 29
-    buildToolsVersion "29.0.0"
     defaultConfig {
         applicationId "com.materialstudies.owl"
         minSdkVersion 23
@@ -41,14 +40,17 @@ android {
         sourceCompatibility JavaVersion.VERSION_1_8
         targetCompatibility JavaVersion.VERSION_1_8
     }
+    kotlinOptions {
+        jvmTarget = "1.8"
+    }
 }
 
 dependencies {
     implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
     implementation 'androidx.fragment:fragment:1.2.0-alpha01'
     implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
     implementation 'androidx.core:core-ktx:1.0.2'
-    implementation 'com.google.android.material:material:1.1.0-alpha08'
+    implementation 'com.google.android.material:material:1.1.0-alpha09'
     implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
 
     implementation "androidx.navigation:navigation-runtime-ktx:$nav_version"

app/src/main/java/com/materialstudies/owl/model/Course.kt

@@ -18,8 +18,10 @@ package com.materialstudies.owl.model
 
 import androidx.recyclerview.widget.DiffUtil
 
+typealias CourseId = Long
+
 data class Course(
-    val id: Long,
+    val id: CourseId,
     val name: String,
     val subject: String,
     val thumbUrl: String,
@@ -35,6 +37,10 @@ object CourseDiff : DiffUtil.ItemCallback<Course>() {
     override fun areContentsTheSame(oldItem: Course, newItem: Course) = oldItem == newItem
 }
 
+object CourseRepo {
+    fun getCourse(id: CourseId) = courses.find { it.id == id } ?: courses.last()
+}
+
 val courses = listOf(
     Course(
         id = 0,
@@ -150,8 +156,6 @@ val courses = listOf(
         subject = "Photography",
         thumbUrl = "https://source.unsplash.com/KxCJXXGsv9I",
         thumbContentDesc = "",
-        description = "This video course introduces the photography of structures, including " +
-                "urban and rural buildings, monuments, and less traditional structures. Instruction includes the handling of equipment and methods used to capture building interiors and exteriors. The discussion will be about the handling of distortion, varied light sources, and perspective.",
         steps = 4,
         step = 1
     )

app/src/main/java/com/materialstudies/owl/ui/MainActivity.kt

@@ -25,6 +25,8 @@ import androidx.navigation.ui.setupWithNavController
 import com.materialstudies.owl.R
 import com.materialstudies.owl.databinding.ActivityMainBinding
 import com.materialstudies.owl.util.contentView
+import com.materialstudies.owl.util.hide
+import com.materialstudies.owl.util.show
 
 class MainActivity : AppCompatActivity() {
 
@@ -38,9 +40,9 @@ class MainActivity : AppCompatActivity() {
 
             // Hide bottom nav on screens which don't require it
             navController.addOnDestinationChangedListener { _, destination, _ ->
-                bottomNav.visibility = when (destination.id) {
-                    R.id.myCourses, R.id.featured, R.id.search -> VISIBLE
-                    else -> GONE
+                when (destination.id) {
+                    R.id.myCourses, R.id.featured, R.id.search -> bottomNav.show()
+                    else -> bottomNav.hide()
                 }
             }
         }

app/src/main/java/com/materialstudies/owl/ui/featured/FeaturedAdapter.kt

@@ -17,47 +17,47 @@
 package com.materialstudies.owl.ui.featured
 
 import android.view.LayoutInflater
+import android.view.View
 import android.view.ViewGroup
-import androidx.navigation.Navigation.findNavController
-import androidx.navigation.fragment.findNavController
 import androidx.recyclerview.widget.ListAdapter
 import androidx.recyclerview.widget.RecyclerView
-import com.bumptech.glide.Glide
-import com.materialstudies.owl.R
 import com.materialstudies.owl.databinding.FeaturedItemBinding
 import com.materialstudies.owl.model.Course
 import com.materialstudies.owl.model.CourseDiff
+import com.materialstudies.owl.model.CourseId
 
-class FeaturedAdapter : ListAdapter<Course, FeaturedViewHolder>(CourseDiff) {
+class FeaturedAdapter(
+    private val onClick: CourseViewClick
+) : ListAdapter<Course, FeaturedViewHolder>(CourseDiff) {
 
     override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): FeaturedViewHolder {
-        val binding = FeaturedItemBinding.inflate(
-            LayoutInflater.from(parent.context),
-            parent,
-            false
-        ).apply {
-            root.setOnClickListener {
-                findNavController(it).navigate(R.id.learn)
-            }
-        }
-        return FeaturedViewHolder(binding)
+        return FeaturedViewHolder(
+            FeaturedItemBinding.inflate(
+                LayoutInflater.from(parent.context),
+                parent,
+                false
+            )
+        )
     }
 
     override fun onBindViewHolder(holder: FeaturedViewHolder, position: Int) {
-        holder.bind(getItem(position))
+        holder.bind(getItem(position), onClick)
     }
+}
 
+interface CourseViewClick {
+    fun onClick(view: View, courseId: CourseId)
 }
 
 class FeaturedViewHolder(
     private val binding: FeaturedItemBinding
 ) : RecyclerView.ViewHolder(binding.root) {
 
-    fun bind(course: Course) {
+    fun bind(course: Course, onClick: CourseViewClick) {
         binding.run {
             this.course = course
+            clickHandler = onClick
             executePendingBindings()
         }
     }
-
 }

app/src/main/java/com/materialstudies/owl/ui/featured/FeaturedFragment.kt

@@ -20,12 +20,19 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
-import androidx.core.view.postDelayed
+import androidx.core.view.doOnNextLayout
 import androidx.fragment.app.Fragment
+import androidx.navigation.findNavController
+import androidx.navigation.fragment.FragmentNavigatorExtras
 import com.materialstudies.owl.databinding.FragmentFeaturedBinding
+import com.materialstudies.owl.model.CourseId
 import com.materialstudies.owl.model.courses
 import com.materialstudies.owl.util.SpringAddItemAnimator
+import java.util.concurrent.TimeUnit
 
+/**
+ * A [Fragment] displaying featured courses.
+ */
 class FeaturedFragment : Fragment() {
 
     override fun onCreateView(
@@ -34,17 +41,35 @@ class FeaturedFragment : Fragment() {
         savedInstanceState: Bundle?
     ): View? {
         val binding = FragmentFeaturedBinding.inflate(inflater, container, false).apply {
+            val onClick: CourseViewClick = object : CourseViewClick {
+                override fun onClick(view: View, courseId: CourseId) {
+                    val extras = FragmentNavigatorExtras(
+                        view to "shared_element"
+                    )
+                    val action = FeaturedFragmentDirections.actionFeaturedToLearn(courseId)
+                    /* awaiting aosp/987385 in fragment 1.2.0-alpha02
+                    exitTransition = Recede().apply {
+                        addTarget(root)
+                        excludeTarget(view, true)
+                    duration = 300L
+                    }*/
+                    view.findNavController().navigate(action, extras)
+                }
+            }
             featuredGrid.apply {
                 itemAnimator = SpringAddItemAnimator()
-                adapter = FeaturedAdapter().apply {
-                    // Add animations not running without this delay
-                    // TODO(nickbutcher) work out why
-                    postDelayed(100L) {
+                adapter = FeaturedAdapter(onClick).apply {
+                    // add data after layout so that animations run
+                    doOnNextLayout {
                         submitList(courses)
+                        doOnNextLayout {
+                            startPostponedEnterTransition()
+                        }
                     }
                 }
             }
         }
+        postponeEnterTransition(1000L, TimeUnit.MILLISECONDS)
         return binding.root
     }
 }

app/src/main/java/com/materialstudies/owl/ui/learn/LearnFragment.kt

@@ -20,30 +20,72 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import android.view.animation.AnimationUtils
 import androidx.fragment.app.Fragment
 import androidx.navigation.fragment.findNavController
+import androidx.navigation.fragment.navArgs
+import com.materialstudies.owl.R
 import com.materialstudies.owl.databinding.FragmentLearnBinding
+import com.materialstudies.owl.model.CourseRepo
 import com.materialstudies.owl.model.courses
+import com.materialstudies.owl.ui.lessons.LessonsSheetFragment
+import com.materialstudies.owl.util.transition.DiagonalSlide
+import com.materialstudies.owl.util.transition.MaterialContainerTransition
+import com.materialstudies.owl.util.loadListener
+import java.util.concurrent.TimeUnit
 
 /**
  * A [Fragment] displaying the learn screen.
  */
 class LearnFragment : Fragment() {
 
+    private val args: LearnFragmentArgs by navArgs()
+
     override fun onCreateView(
         inflater: LayoutInflater,
         container: ViewGroup?,
         savedInstanceState: Bundle?
     ): View? {
+        val course = CourseRepo.getCourse(args.courseId)
         val binding = FragmentLearnBinding.inflate(inflater, container, false).apply {
-            course = courses.last()
+            this.course = course
+            imageLoadListener = loadListener {
+                startPostponedEnterTransition()
+            }
             toolbar.setNavigationOnClickListener {
-                findNavController().popBackStack()
+                findNavController().navigateUp()
             }
             alsoLikeList.adapter = RelatedAdapter().apply {
                 submitList(courses)
             }
         }
+        (childFragmentManager.findFragmentById(R.id.lessons_sheet) as? LessonsSheetFragment)?.let {
+            it.course = course
+        }
+        postponeEnterTransition(1000L, TimeUnit.MILLISECONDS)
+        val interp = AnimationUtils.loadInterpolator(
+            context,
+            android.R.interpolator.fast_out_slow_in
+        )
+        sharedElementEnterTransition = MaterialContainerTransition(R.id.scroll).apply {
+            duration = 400L
+            interpolator = interp
+        }
+        enterTransition = DiagonalSlide().apply {
+            addTarget(R.id.lessons_sheet)
+            startDelay = 200L
+            duration = 200L
+            interpolator = interp
+        }
+        sharedElementReturnTransition = MaterialContainerTransition().apply {
+            duration = 300L
+            interpolator = interp
+        }
+        returnTransition = DiagonalSlide().apply {
+            addTarget(R.id.lessons_sheet)
+            duration = 100L
+            interpolator = interp
+        }
         return binding.root
     }
 }

app/src/main/java/com/materialstudies/owl/ui/lessons/LessonAdapter.kt

@@ -17,35 +17,29 @@
 package com.materialstudies.owl.ui.lessons
 
 import android.view.LayoutInflater
-import android.view.View
 import android.view.ViewGroup
-import androidx.navigation.Navigation
-import androidx.navigation.findNavController
 import androidx.recyclerview.widget.ListAdapter
 import androidx.recyclerview.widget.RecyclerView
-import com.materialstudies.owl.R
 import com.materialstudies.owl.databinding.LessonItemBinding
 import com.materialstudies.owl.model.Lesson
 import com.materialstudies.owl.model.LessonDiff
 
-class LessonAdapter : ListAdapter<Lesson, LessonViewHolder>(LessonDiff) {
+class LessonAdapter(
+    private val onClick: (Int) -> Unit
+) : ListAdapter<Lesson, LessonViewHolder>(LessonDiff) {
 
     override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): LessonViewHolder {
-        val binding = LessonItemBinding.inflate(
-            LayoutInflater.from(parent.context), parent,
-            false
-        ).apply {
-            root.setOnClickListener {
-                it.findNavController().navigate(R.id.lesson)
-            }
+        val binding = LessonItemBinding.inflate(LayoutInflater.from(parent.context), parent, false)
+        val holder = LessonViewHolder(binding)
+        binding.root.setOnClickListener {
+            onClick(holder.adapterPosition)
         }
-        return LessonViewHolder(binding)
+        return holder
     }
 
     override fun onBindViewHolder(holder: LessonViewHolder, position: Int) {
         holder.bind(getItem(position))
     }
-
 }
 
 class LessonViewHolder(

app/src/main/java/com/materialstudies/owl/ui/lessons/LessonFragment.kt

@@ -17,21 +17,27 @@
 package com.materialstudies.owl.ui.lessons
 
 import android.os.Bundle
-import androidx.fragment.app.Fragment
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import androidx.core.view.doOnLayout
+import androidx.fragment.app.Fragment
 import androidx.navigation.findNavController
-
+import androidx.navigation.fragment.navArgs
+import androidx.transition.TransitionInflater
 import com.materialstudies.owl.R
 import com.materialstudies.owl.databinding.FragmentLessonBinding
+import com.materialstudies.owl.model.CourseRepo
 import com.materialstudies.owl.model.lessons
+import java.util.concurrent.TimeUnit
 
 /**
  * A [Fragment] displaying a lesson.
  */
 class LessonFragment : Fragment() {
 
+    private val args: LessonFragmentArgs by navArgs()
+
     override fun onCreateView(
         inflater: LayoutInflater,
         container: ViewGroup?,
@@ -41,11 +47,15 @@ class LessonFragment : Fragment() {
             lesson = lessons.first()
             steps.apply {
                 adapter = StepsAdapter(lessons, context)
+                smoothScrollToPosition(args.stepNumber)
             }
             collapse.setOnClickListener {
                 it.findNavController().popBackStack()
             }
         }
+        (childFragmentManager.findFragmentById(R.id.lessons_sheet) as? LessonsSheetFragment)?.let {
+            it.course = CourseRepo.getCourse(args.courseId)
+        }
         return binding.root
     }
 }