Add the binding adapter and connect the parts

app/src/main/java/com/example/android/marsphotos/overview/BindingAdapters.kt

@@ -3,8 +3,10 @@ package com.example.android.marsphotos.overview
 import android.widget.ImageView
 import androidx.core.net.toUri
 import androidx.databinding.BindingAdapter
+import androidx.recyclerview.widget.RecyclerView
 import coil.load
 import com.example.android.marsphotos.R
+import com.example.android.marsphotos.network.MarsPhoto
 
 @BindingAdapter("imageUrl")
 fun bindImage(imgView: ImageView, imgUrl: String?) {
@@ -17,6 +19,13 @@ fun bindImage(imgView: ImageView, imgUrl: String?) {
     }
 }
 
+@BindingAdapter("listData")
+fun bindRecyclerView(recyclerView: RecyclerView,
+                     data: List<MarsPhoto>?) {
+    val adapter = recyclerView.adapter as PhotoGridAdapter
+    adapter.submitList(data)
+}
+
 class BindingAdapters {
 
 }

app/src/main/java/com/example/android/marsphotos/overview/OverviewFragment.kt

@@ -37,9 +37,11 @@ class OverviewFragment : Fragment() {
      * to enable Data Binding to observe LiveData, and sets up the RecyclerView with an adapter.
      */
     override fun onCreateView(
+
         inflater: LayoutInflater, container: ViewGroup?,
         savedInstanceState: Bundle?
     ): View? {
+
         val binding = FragmentOverviewBinding.inflate(inflater)
         // val binding = GridViewItemBinding.inflate(inflater)
 
@@ -48,7 +50,7 @@ class OverviewFragment : Fragment() {
 
         // Giving the binding access to the OverviewViewModel
         binding.viewModel = viewModel
-
+        binding.photosGrid.adapter = PhotoGridAdapter()
         return binding.root
     }
 }

app/src/main/java/com/example/android/marsphotos/overview/PhotoGridAdapter.kt

@@ -8,28 +8,32 @@ import androidx.recyclerview.widget.RecyclerView
 import com.example.android.marsphotos.databinding.GridViewItemBinding
 import com.example.android.marsphotos.network.MarsPhoto
 
-class PhotoGridAdapter : ListAdapter<MarsPhoto,
-        PhotoGridAdapter.MarsPhotoViewHolder>(MarsPhotoViewHolder) {
-    class MarsPhotoViewHolder(private var binding:
-                              GridViewItemBinding
-    ):
-        RecyclerView.ViewHolder(binding.root) {
-        fun bind(MarsPhoto: MarsPhoto) {
-            binding.photo = MarsPhoto
-            binding.executePendingBindings()
-        }
-    }
+/**
+ * This class implements a [RecyclerView] [ListAdapter] which uses Data Binding to present [List]
+ * data, including computing diffs between lists.
+ */
+class PhotoGridAdapter :
+    ListAdapter<MarsPhoto, PhotoGridAdapter.MarsPhotosViewHolder>(DiffCallback) {
 
-    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PhotoGridAdapter.MarsPhotoViewHolder {
-        return MarsPhotoViewHolder(GridViewItemBinding.inflate(
-            LayoutInflater.from(parent.context)))
+    /**
+     * The MarsPhotosViewHolder constructor takes the binding variable from the associated
+     * GridViewItem, which nicely gives it access to the full [MarsPhoto] information.
+     */
+    class MarsPhotosViewHolder(
+        private var binding: GridViewItemBinding
+    ) : RecyclerView.ViewHolder(binding.root) {
+        fun bind(marsPhoto: MarsPhoto) {
+            binding.photo = marsPhoto
+            // This is important, because it forces the data binding to execute immediately,
+            // which allows the RecyclerView to make the correct view size measurements
+            binding.executePendingBindings()
         }
-
-    override fun onBindViewHolder(holder: PhotoGridAdapter.MarsPhotoViewHolder, position: Int) {
-        val marsPhoto = getItem(position)
-        holder.bind(marsPhoto)
     }
 
+    /**
+     * Allows the RecyclerView to determine which items have changed when the [List] of
+     * [MarsPhoto] has been updated.
+     */
     companion object DiffCallback : DiffUtil.ItemCallback<MarsPhoto>() {
         override fun areItemsTheSame(oldItem: MarsPhoto, newItem: MarsPhoto): Boolean {
             return oldItem.id == newItem.id
@@ -39,4 +43,24 @@ class PhotoGridAdapter : ListAdapter<MarsPhoto,
             return oldItem.imgSrcUrl == newItem.imgSrcUrl
         }
     }
+
+    /**
+     * Create new [RecyclerView] item views (invoked by the layout manager)
+     */
+    override fun onCreateViewHolder(
+        parent: ViewGroup,
+        viewType: Int
+    ): MarsPhotosViewHolder {
+        return MarsPhotosViewHolder(
+            GridViewItemBinding.inflate(LayoutInflater.from(parent.context))
+        )
+    }
+
+    /**
+     * Replaces the contents of a view (invoked by the layout manager)
+     */
+    override fun onBindViewHolder(holder: MarsPhotosViewHolder, position: Int) {
+        val marsPhoto = getItem(position)
+        holder.bind(marsPhoto)
+    }
 }
\ No newline at end of file

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

@@ -35,6 +35,8 @@
             android:layout_width="0dp"
             android:layout_height="0dp"
             android:padding="6dp"
+            app:listData="@{viewModel.photos}"
+            android:clipToPadding="false"
             app:layoutManager=
                 "androidx.recyclerview.widget.GridLayoutManager"
             app:layout_constraintBottom_toBottomOf="parent"