Clean up landing screens, using Scaffold and list items.

Author: riggaroo

compose/snippets/src/main/java/com/example/compose/snippets/components/ComponentsScreen.kt

@@ -16,45 +16,63 @@
 
 package com.example.compose.snippets.components
 
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.Button
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.ListItem
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import com.example.compose.snippets.navigation.TopComponentsDestination
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ComponentsScreen(
     navigate: (TopComponentsDestination) -> Unit
 ) {
-    LazyColumn(
-        modifier = Modifier
-            .padding(16.dp)
-            .fillMaxSize(),
-        verticalArrangement = Arrangement.spacedBy(8.dp),
-        horizontalAlignment = Alignment.CenterHorizontally,
-    ) {
-        items(TopComponentsDestination.entries) { destination ->
-            NavigationItem(destination) {
-                navigate(
-                    destination
-                )
+    Scaffold(topBar = {
+        TopAppBar(title = {
+            Text("Common Components")
+        })
+    }, content = { padding ->
+        LazyColumn(
+            modifier = Modifier
+                .padding(padding)
+                .fillMaxSize(),
+            verticalArrangement = Arrangement.spacedBy(8.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            items(TopComponentsDestination.entries) { destination ->
+                NavigationItem(destination) {
+                    navigate(
+                        destination
+                    )
+                }
             }
         }
-    }
+    })
+
 }
 
 @Composable
 fun NavigationItem(destination: TopComponentsDestination, onClick: () -> Unit) {
-    Button(
-        onClick = { onClick() }
-    ) {
-        Text(destination.title)
-    }
+    ListItem(
+        headlineContent = {
+           Text(destination.title)
+        },
+        modifier = Modifier.clickable {
+            onClick()
+        }
+    )
 }

compose/snippets/src/main/java/com/example/compose/snippets/landing/LandingScreen.kt

@@ -26,8 +26,12 @@ import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.ListItem
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -38,36 +42,29 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.example.compose.snippets.navigation.Destination
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun LandingScreen(
     navigate: (Destination) -> Unit
 ) {
-    Column(
-        modifier = Modifier
-            .padding(16.dp)
-            .fillMaxSize(),
-        verticalArrangement = Arrangement.spacedBy(24.dp),
-    ) {
-        Text(
-            modifier = Modifier.fillMaxWidth(),
-            style = TextStyle(
-                fontSize = 24.sp,
-                fontWeight = FontWeight.Bold,
-                textAlign = TextAlign.Center,
-            ),
-            text = "Android snippets",
-        )
-        Text(
-            text = "Use the following buttons to view a selection of the snippets used in the Android documentation."
-        )
-        NavigationItems { navigate(it) }
+    Scaffold(
+        topBar = {
+            TopAppBar(title = {
+                Text(text = "Android snippets",)
+            })
+        }
+    ) { padding ->
+        NavigationItems(modifier = Modifier.padding(padding)) { navigate(it) }
     }
 }
 
 @Composable
-fun NavigationItems(navigate: (Destination) -> Unit) {
+fun NavigationItems(
+    modifier: Modifier = Modifier,
+    navigate: (Destination) -> Unit
+) {
     LazyColumn(
-        modifier = Modifier
+        modifier = modifier
             .fillMaxSize(),
         verticalArrangement = Arrangement.spacedBy(8.dp),
         horizontalAlignment = Alignment.CenterHorizontally,
@@ -84,14 +81,14 @@ fun NavigationItems(navigate: (Destination) -> Unit) {
 
 @Composable
 fun NavigationItem(destination: Destination, onClick: () -> Unit) {
-    Box(
+    ListItem(
+        headlineContent = {
+            Text(destination.title)
+        },
         modifier = Modifier
             .heightIn(min = 48.dp)
             .clickable {
                 onClick()
             }
-    ) {
-        Text(destination.title)
-        HorizontalDivider(modifier = Modifier.align(Alignment.BottomCenter))
-    }
+    )
 }