Display images

app/build.gradle.kts

@@ -66,6 +66,7 @@ dependencies {
     debugImplementation(libs.androidx.ui.test.manifest)
     implementation("androidx.navigation:navigation-compose:$nav_version")
     implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1")
-    implementation("com.squareup.retrofit2:retrofit:2.9.0")
+    implementation("com.squareup.retrofit2:retrofit:2.11.0")
-    implementation("com.squareup.retrofit2:converter-gson:2.9.0")
+    implementation("com.squareup.retrofit2:converter-gson:2.11.0")
+    implementation("io.coil-kt:coil-compose:2.6.0")
 }

app/src/main/java/com/ti/mobpo/ui/screens/PokeSearch.kt

@@ -1,24 +1,40 @@
 package com.ti.mobpo.ui.screens
 
+import androidx.compose.foundation.Image
 import com.ti.mobpo.ui.PokeSearchViewModel
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.items
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.ti.mobpo.R
 import com.ti.mobpo.ui.SearchBar
 import androidx.lifecycle.viewmodel.compose.viewModel
+import com.ti.mobpo.model.PokemonDetails
+import coil.compose.AsyncImage
+import coil.request.ImageRequest
+import com.ti.mobpo.ui.theme.MobileSecurityTheme
 
 @Composable
 fun PokeSearchScreen(pokeSearchViewModel: PokeSearchViewModel) {
@@ -44,8 +60,12 @@ fun PokeSearch(pokeSearchViewModel: PokeSearchViewModel) {
 
         searchResults?.let { results ->
             if (results.isNotEmpty()) {
-                results.forEach { pokemon ->
+                LazyVerticalGrid(
-                    Text(text = pokemon.name)
+                    columns = GridCells.Adaptive(150.dp),
+                ) {
+                    items(items = results, key = { pokemon -> pokemon.id }) { pokemon ->
+                        PokemonCard(pokemon)
+                    }
                 }
             } else {
                 Text("No results found")
@@ -54,9 +74,38 @@ fun PokeSearch(pokeSearchViewModel: PokeSearchViewModel) {
     }
 }
 
+
+@Composable
+fun PokemonCard(pokemon: PokemonDetails) {
+    Card(
+        shape = MaterialTheme.shapes.medium,
+        elevation = CardDefaults.cardElevation(defaultElevation = 8.dp),
+        modifier = Modifier
+            .padding(4.dp)
+            .fillMaxWidth()
+            .aspectRatio(1f)
+    ) {
+        AsyncImage(
+            model = ImageRequest.Builder(context = LocalContext.current).data(pokemon.sprites.other.officialArtwork.frontDefault)
+                .crossfade(true).build(),
+            contentDescription = pokemon.name,
+            contentScale = ContentScale.Crop,
+            modifier = Modifier.fillMaxWidth()
+        )
+    }
+}
+
+
 @Preview(showBackground = true)
 @Composable
 fun PokeSearchApp(){
     val pokeSearchViewModel: PokeSearchViewModel = viewModel()
     PokeSearchScreen(pokeSearchViewModel)
+}
+
+@Preview(showBackground = true)
+@Composable
+fun PhotosGridScreenPreview() {
+    MobileSecurityTheme {
+    }
 }