Add loading and error images

.idea/misc.xml

 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="DesignSurface">
+    <option name="filePathToZoomLevelMap">
+      <map>
+        <entry key="..\:/Users/Fair/Desktop/android-basics-kotlin-mars-photos-app-starter/app/src/main/res/drawable/ic_broken_image.xml" value="0.226" />
+        <entry key="..\:/Users/Fair/Desktop/android-basics-kotlin-mars-photos-app-starter/app/src/main/res/layout/grid_view_item.xml" value="0.24048913043478262" />
+      </map>
+    </option>
+  </component>
   <component name="ProjectRootManager" version="2" languageLevel="JDK_11" default="true" project-jdk-name="Android Studio default JDK" project-jdk-type="JavaSDK">
     <output url="file://$PROJECT_DIR$/build/classes" />
   </component>

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

@@ -4,12 +4,16 @@ import android.widget.ImageView
 import androidx.core.net.toUri
 import androidx.databinding.BindingAdapter
 import coil.load
+import com.example.android.marsphotos.R
 
 @BindingAdapter("imageUrl")
 fun bindImage(imgView: ImageView, imgUrl: String?) {
     imgUrl?.let {
         val imgUri = imgUrl.toUri().buildUpon().scheme("https").build()
-        imgView.load(imgUri)
+        imgView.load(imgUri) {
+            placeholder(R.drawable.loading_animation)
+            error(R.drawable.ic_broken_image)
+        }
     }
 }
 

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

@@ -23,6 +23,7 @@ import android.view.ViewGroup
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.viewModels
 import com.example.android.marsphotos.databinding.FragmentOverviewBinding
+import com.example.android.marsphotos.databinding.GridViewItemBinding
 
 /**
  * This fragment shows the the status of the Mars photos web services transaction.
@@ -40,6 +41,7 @@ class OverviewFragment : Fragment() {
         savedInstanceState: Bundle?
     ): View? {
         val binding = FragmentOverviewBinding.inflate(inflater)
+        // val binding = GridViewItemBinding.inflate(inflater)
 
         // Allows Data Binding to Observe LiveData with the lifecycle of this Fragment
         binding.lifecycleOwner = this

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

@@ -19,6 +19,11 @@
 <layout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools">
+    <data>
+        <variable
+            name="viewModel"
+            type="com.example.android.marsphotos.overview.OverviewViewModel" />
+    </data>
     <ImageView
         android:id="@+id/mars_image"
         android:layout_width="wrap_content"
@@ -26,5 +31,6 @@
         android:scaleType="fitXY"
         android:adjustViewBounds="true"
         android:padding="2dp"
+        app:imageUrl="@{viewModel.photos.imgSrcUrl}"
         tools:src="@tools:sample/backgrounds/scenic"/>
 </layout>