Merge pull request #2320 from DataDog/yl/compose/add-image-sample

Add image sample screen for jetpack compose session replay

gradle/libs.versions.toml

@@ -75,6 +75,7 @@ dependencyLicense = "0.3"
 realm = "1.11.0"
 sqlDelight = "1.5.5"
 coil = "1.0.0"
+coilCompose = "2.1.0"
 fresco = "2.3.0"
 glide = "4.11.0"
 picasso = "2.8"
@@ -209,6 +210,7 @@ jsonSchemaValidator = { module = "com.github.everit-org.json-schema:org.everit.j
 # Integrations
 sqlDelight = { module = "com.squareup.sqldelight:android-driver", version.ref = "sqlDelight" }
 coil = { module = "io.coil-kt:coil", version.ref = "coil" }
+coilCompose = { module = "io.coil-kt:coil-compose", version.ref = "coilCompose" }
 
 frescoCore = { module = "com.facebook.fresco:fresco", version.ref = "fresco" }
 frescoOkHttp3 = { module = "com.facebook.fresco:imagepipeline-okhttp3", version.ref = "fresco" }

sample/kotlin/build.gradle.kts

@@ -199,6 +199,7 @@ dependencies {
 
     // Image Loading Library
     implementation(libs.coil)
+    implementation(libs.coilCompose)
     implementation(libs.bundles.fresco)
     implementation(libs.bundles.glide)
     implementation(libs.picasso)

sample/kotlin/src/main/kotlin/com/datadog/android/sample/compose/ImageSample.kt

@@ -0,0 +1,106 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+package com.datadog.android.sample.compose
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import coil.compose.AsyncImage
+import com.datadog.android.sample.R
+private const val SMALL_IMAGE_URL = "https://picsum.photos/100/100"
+
+@Composable
+internal fun ImageSample() {
+    Column(modifier = Modifier.fillMaxSize()) {
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            Image(
+                modifier = Modifier.imageModifier(),
+                painter = painterResource(R.drawable.ic_dd_icon_rgb),
+                contentDescription = "purple dog"
+            )
+            DescriptionText("Image")
+        }
+
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            Icon(
+                modifier = Modifier.imageModifier().background(Color.DarkGray),
+                painter = painterResource(R.drawable.ic_dd_icon_red),
+                tint = Color.Red,
+                contentDescription = "red dog"
+            )
+            DescriptionText("Icon")
+        }
+
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            IconButton(
+                modifier = Modifier
+                    .padding(16.dp)
+                    .clip(RoundedCornerShape(4.dp))
+                    .background(Color.Black),
+                onClick = {}
+            ) {
+                Icon(
+                    modifier = Modifier
+                        .padding(16.dp)
+                        .width(64.dp).height(64.dp),
+                    painter = painterResource(R.drawable.ic_dd_icon_white),
+                    tint = Color.White,
+                    contentDescription = "white dog"
+                )
+            }
+            DescriptionText("Icon Button")
+        }
+
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            AsyncImage(
+                modifier = Modifier.imageModifier(),
+                model = SMALL_IMAGE_URL,
+                contentDescription = "Network Image"
+            )
+            DescriptionText("Network Image")
+        }
+    }
+}
+
+@Composable
+private fun DescriptionText(description: String) {
+    Text(
+        description,
+        fontSize = 20.sp
+    )
+}
+
+private fun Modifier.imageModifier(): Modifier {
+    return this
+        .padding(32.dp)
+        .width(64.dp).height(64.dp)
+}
+
+@Composable
+@Preview(showBackground = true)
+@Suppress("UnusedPrivateMember")
+private fun PreviewImageSample() {
+    ImageSample()
+}

sample/kotlin/src/main/kotlin/com/datadog/android/sample/compose/SampleSelectionScreen.kt

@@ -25,7 +25,8 @@ import androidx.navigation.compose.composable
 @Composable
 internal fun SampleSelectionScreen(
     onTypographyClicked: () -> Unit,
-    onLegacyClicked: () -> Unit
+    onLegacyClicked: () -> Unit,
+    onImageClicked: () -> Unit
 ) {
     Column(
         modifier = Modifier.fillMaxSize(),
@@ -40,6 +41,10 @@ internal fun SampleSelectionScreen(
             text = "Typography Sample",
             onClick = onTypographyClicked
         )
+        StyledButton(
+            text = "Image Sample",
+            onClick = onImageClicked
+        )
         StyledButton(
             text = "Legacy Sample",
             onClick = onLegacyClicked
@@ -68,6 +73,9 @@ internal fun NavGraphBuilder.selectionNavigation(navController: NavHostControlle
             onTypographyClicked = {
                 navController.navigate(SampleScreen.Typography.navigationRoute)
             },
+            onImageClicked = {
+                navController.navigate(SampleScreen.Image.navigationRoute)
+            },
             onLegacyClicked = {
                 navController.navigate(SampleScreen.Legacy.navigationRoute)
             }
@@ -78,6 +86,10 @@ internal fun NavGraphBuilder.selectionNavigation(navController: NavHostControlle
         TypographySample()
     }
 
+    composable(SampleScreen.Image.navigationRoute) {
+        ImageSample()
+    }
+
     activity(SampleScreen.Legacy.navigationRoute) {
         activityClass = LegacyComposeActivity::class
     }
@@ -89,6 +101,7 @@ internal sealed class SampleScreen(
 
     object Root : SampleScreen(COMPOSE_ROOT)
     object Typography : SampleScreen("$COMPOSE_ROOT/typography")
+    object Image : SampleScreen("$COMPOSE_ROOT/image")
     object Legacy : SampleScreen("$COMPOSE_ROOT/legacy")
 
     companion object {
@@ -103,6 +116,8 @@ private fun PreviewSampleSelectionScreen() {
     SampleSelectionScreen(
         onLegacyClicked = {
         },
+        onImageClicked = {
+        },
         onTypographyClicked = {
         }
     )