diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml index 58a4faa20b..29d772e45e 100644 --- a/gradle/libs.versions.toml +++ b/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" } diff --git a/sample/kotlin/build.gradle.kts b/sample/kotlin/build.gradle.kts index 0d3d40ca37..7499060e99 100644 --- a/sample/kotlin/build.gradle.kts +++ b/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) diff --git a/sample/kotlin/src/main/kotlin/com/datadog/android/sample/compose/ImageSample.kt b/sample/kotlin/src/main/kotlin/com/datadog/android/sample/compose/ImageSample.kt new file mode 100644 index 0000000000..81ac78b6a7 --- /dev/null +++ b/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() +} diff --git a/sample/kotlin/src/main/kotlin/com/datadog/android/sample/compose/SampleSelectionScreen.kt b/sample/kotlin/src/main/kotlin/com/datadog/android/sample/compose/SampleSelectionScreen.kt index 2ad77229f2..aa82f8b516 100644 --- a/sample/kotlin/src/main/kotlin/com/datadog/android/sample/compose/SampleSelectionScreen.kt +++ b/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 = { } )