add navigation structure

app/build.gradle

@@ -73,6 +73,7 @@ dependencies {
     implementation "androidx.compose.material:material-icons-extended:$compose_version"
     implementation "androidx.compose.ui:ui-tooling:$compose_version"
     implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.3.0"
+    implementation "androidx.navigation:navigation-compose:1.0.0-alpha08"
 
     implementation 'com.github.javafaker:javafaker:1.0.2'
 

app/src/main/java/com/example/androiddevchallenge/MainActivity.kt

@@ -19,18 +19,13 @@ import android.os.Bundle
 import androidx.activity.compose.setContent
 import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.foundation.isSystemInDarkTheme
-import com.example.androiddevchallenge.data.CHAMELEONS
-import com.example.androiddevchallenge.ui.home.Home
-import com.example.androiddevchallenge.ui.theme.MyTheme
+import com.example.androiddevchallenge.ui.ChameleonAdoptionApp
 
 class MainActivity : AppCompatActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
-            val darkTheme = isSystemInDarkTheme()
-            MyTheme(darkTheme) {
-                Home(darkTheme, CHAMELEONS.values.toList())
-            }
+            ChameleonAdoptionApp(darkTheme = isSystemInDarkTheme())
         }
     }
 }

app/src/main/java/com/example/androiddevchallenge/Navigation.kt

@@ -0,0 +1,24 @@
+package com.example.androiddevchallenge
+
+import androidx.navigation.NavController
+import androidx.navigation.compose.navigate
+import java.util.*
+
+sealed class Route(val path: String) {
+    object Home : Route("home")
+    object Detail : Route("detail/{id}") {
+        val idArgument = "id"
+        fun pathWithId(id: UUID) = path.replace("{id}", id.toString())
+    }
+}
+
+
+class NavigationActions(navController: NavController) {
+    val openDetail: (UUID) -> Unit = { id ->
+        navController.navigate(Route.Detail.pathWithId(id))
+    }
+
+    val navigateUp: () -> Unit = {
+        navController.popBackStack()
+    }
+}

app/src/main/java/com/example/androiddevchallenge/ui/ChameleonAdoptionApp.kt

@@ -0,0 +1,49 @@
+package com.example.androiddevchallenge.ui
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.navigation.NavType
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.navArgument
+import androidx.navigation.compose.rememberNavController
+import com.example.androiddevchallenge.NavigationActions
+import com.example.androiddevchallenge.Route
+import com.example.androiddevchallenge.data.CHAMELEONS
+import com.example.androiddevchallenge.ui.detail.Detail
+import com.example.androiddevchallenge.ui.home.Home
+import com.example.androiddevchallenge.ui.theme.MyTheme
+import java.util.*
+
+@Composable
+fun ChameleonAdoptionApp(darkTheme: Boolean) {
+    val navController = rememberNavController()
+    val navActions = remember(navController) { NavigationActions(navController) }
+
+    MyTheme(darkTheme = darkTheme) {
+        NavHost(navController, startDestination = Route.Home.path) {
+            composable(Route.Home.path) {
+                Home(
+                    darkTheme,
+                    CHAMELEONS.values.toList(),
+                    openDetail = navActions.openDetail,
+                )
+            }
+            composable(
+                Route.Detail.path,
+                arguments = listOf(
+                    navArgument(Route.Detail.idArgument) { type = NavType.StringType },
+                )
+            ) { backStackEntry ->
+                val id = backStackEntry.arguments?.getString(Route.Detail.idArgument)
+                requireNotNull(id)
+                val chameleon = CHAMELEONS.getValue(UUID.fromString(id))
+
+                Detail(
+                    chameleon = chameleon,
+                    navActions.navigateUp
+                )
+            }
+        }
+    }
+}

app/src/main/java/com/example/androiddevchallenge/ui/detail/Detail.kt

@@ -0,0 +1,53 @@
+package com.example.androiddevchallenge.ui.detail
+
+import androidx.compose.material.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import com.example.androiddevchallenge.R
+import com.example.androiddevchallenge.data.Chameleon
+import com.example.androiddevchallenge.data.Species
+import com.example.androiddevchallenge.ui.theme.MyTheme
+import java.util.*
+
+@Composable
+fun Detail(chameleon: Chameleon, navigateUp: () -> Unit) {
+    Surface {
+
+    }
+}
+
+// Previews
+
+@Preview("Light Theme", widthDp = 360, heightDp = 640)
+@Composable
+private fun LightPreview() {
+    MyTheme {
+        Detail(
+            chameleon = Chameleon(
+                id = UUID.randomUUID(),
+                name = "Frodo",
+                location = "Rivendell",
+                species = Species.PANTHER,
+                image = R.drawable.ic_chameleon_one,
+            ),
+            navigateUp = {}
+        )
+    }
+}
+
+@Preview("Dark Theme", widthDp = 360, heightDp = 640)
+@Composable
+private fun DarkPreview() {
+    MyTheme(darkTheme = true) {
+        Detail(
+            chameleon = Chameleon(
+                id = UUID.randomUUID(),
+                name = "Frodo",
+                location = "Rivendell",
+                species = Species.PANTHER,
+                image = R.drawable.ic_chameleon_one,
+            ),
+            navigateUp = {}
+        )
+    }
+}

app/src/main/java/com/example/androiddevchallenge/ui/home/Home.kt

@@ -1,7 +1,10 @@
 package com.example.androiddevchallenge.ui.home
 
+import android.util.Log
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.GridCells
 import androidx.compose.foundation.lazy.LazyVerticalGrid
@@ -10,6 +13,8 @@ import androidx.compose.material.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -29,36 +34,39 @@ import java.util.*
 
 @OptIn(ExperimentalFoundationApi::class)
 @Composable
-fun Home(darkTheme: Boolean, chameleons: List<Chameleon>) {
-    MaterialTheme {
-        Scaffold(
-            topBar = {
-                TopAppBar(
-                    title = { Text(text = stringResource(id = R.string.home_title)) },
-                    elevation = 4.dp,
-                )
-            },
-            content = {
-                LazyVerticalGrid(
-                    contentPadding = PaddingValues(
-                        start = 4.dp,
-                        top = 4.dp,
-                        end = 4.dp,
-                        bottom = 12.dp,
-                    ),
-                    cells = GridCells.Fixed(2),
-                ) {
-                    items(chameleons) { item: Chameleon ->
-                        Item(darkTheme, item)
-                    }
+fun Home(
+    darkTheme: Boolean,
+    chameleons: List<Chameleon>,
+    openDetail: (UUID) -> Unit
+) {
+    Scaffold(
+        topBar = {
+            TopAppBar(
+                title = { Text(text = stringResource(id = R.string.home_title)) },
+                elevation = 12.dp,
+            )
+        },
+        content = {
+            Log.d("Home", it.toString())
+            LazyVerticalGrid(
+                contentPadding = PaddingValues(
+                    start = 4.dp,
+                    top = 4.dp,
+                    end = 4.dp,
+                    bottom = 12.dp,
+                ),
+                cells = GridCells.Fixed(2),
+            ) {
+                items(chameleons) { item: Chameleon ->
+                    Item(darkTheme, item, openDetail)
                 }
             }
-        )
-    }
+        }
+    )
 }
 
 @Composable
-private fun Item(darkTheme: Boolean, item: Chameleon) {
+private fun Item(darkTheme: Boolean, item: Chameleon, openDetail: (UUID) -> Unit) {
     Card(
         modifier = Modifier
             .fillMaxWidth()
@@ -67,7 +75,8 @@ private fun Item(darkTheme: Boolean, item: Chameleon) {
                 end = 4.dp,
                 top = 4.dp,
                 bottom = 4.dp,
-            ),
+            )
+            .clickable { openDetail(item.id) },
     ) {
         Column {
             Image(
@@ -84,7 +93,7 @@ private fun Item(darkTheme: Boolean, item: Chameleon) {
 
             PrimaryText(
                 text = item.name,
-                modifier = Modifier.padding(start = 8.dp, top= 4.dp, end = 8.dp),
+                modifier = Modifier.padding(start = 8.dp, top = 4.dp, end = 8.dp),
                 style = TextStyle(fontWeight = FontWeight.Bold),
             )
 
@@ -115,15 +124,16 @@ private fun LightPreview() {
                     species = Species.PANTHER,
                     image = R.drawable.ic_chameleon_one,
                 )
-            )
+            ),
+            openDetail = {}
         )
     }
 }
 
 @Preview("Dark Theme", widthDp = 360, heightDp = 640)
 @Composable
 private fun DarkPreview() {
-    MyTheme(darkTheme = true) {
+    MyTheme {
         Home(
             darkTheme = true,
             chameleons = listOf(
@@ -134,7 +144,8 @@ private fun DarkPreview() {
                     species = Species.PANTHER,
                     image = R.drawable.ic_chameleon_one,
                 )
-            )
+            ),
+            openDetail = {}
         )
     }
 }