Putting background in front of all images

app/src/main/java/com/ericampire/android/androidstudycase/presentation/screen/explore/ui/LottieFileItem.kt

@@ -49,12 +49,22 @@ fun LottieFileItemView(
             horizontalArrangement = Arrangement.spacedBy(12.dp),
             verticalAlignment = Alignment.CenterVertically,
             content = {
-              CustomImageView(
+              Box(
                 modifier = Modifier
                   .size(44.dp)
                   .clip(CircleShape),
+                content = {
+                  CustomImageView(
+                    modifier = Modifier.matchParentSize(),
                     data = lottiefile.createdBy?.avatarUrl ?: "null",
                   )
+                  Box(
+                    modifier = Modifier
+                      .matchParentSize()
+                      .background(color = AppColor.BlackOverlay001)
+                  )
+                }
+              )
 
               Column(
                 verticalArrangement = Arrangement.spacedBy(4.dp),

app/src/main/java/com/ericampire/android/androidstudycase/presentation/screen/home/ui/BlogItemView.kt

@@ -1,5 +1,6 @@
 package com.ericampire.android.androidstudycase.presentation.screen.home.ui
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
@@ -18,6 +19,7 @@ import com.ericampire.android.androidstudycase.domain.entity.Blog
 import com.ericampire.android.androidstudycase.domain.entity.Lottiefile
 import com.ericampire.android.androidstudycase.presentation.custom.CustomImageView
 import com.ericampire.android.androidstudycase.presentation.theme.AndroidStudyCaseTheme
+import com.ericampire.android.androidstudycase.presentation.theme.AppColor
 import com.ericampire.android.androidstudycase.util.BlogProvider
 import com.ericampire.android.androidstudycase.util.LottieFileProvider
 
@@ -36,13 +38,24 @@ fun BlogItemView(
     horizontalArrangement = Arrangement.spacedBy(12.dp),
     verticalAlignment = Alignment.CenterVertically,
     content = {
-      CustomImageView(
+      Box(
         modifier = Modifier
           .height(80.dp)
           .width(130.dp)
           .clip(MaterialTheme.shapes.medium),
+        content = {
+          CustomImageView(
+            modifier = Modifier.matchParentSize(),
             data = blog.imageUrl,
           )
+          Box(
+            modifier = Modifier
+              .matchParentSize()
+              .background(color = AppColor.BlackOverlay)
+          )
+        }
+      )
+
 
       Text(
         maxLines = 3,

app/src/main/java/com/ericampire/android/androidstudycase/presentation/theme/Color.kt

@@ -10,4 +10,6 @@ object AppColor {
   val Purple700 = Color(0xFF3700B3)
   val Teal200 = Color(0xFF03DAC5)
   val Black001 = Color(0xFF222222)
+  val BlackOverlay = Color(0x4D000000)
+  val BlackOverlay001 = Color(0x1A000000)
 }