Add snippets for focus management in Compose

compose/snippets/src/main/java/com/example/compose/snippets/SnippetsActivity.kt

@@ -22,9 +22,11 @@ import android.os.StrictMode
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
@@ -60,7 +62,15 @@ import com.example.compose.snippets.images.ImageExamplesScreen
 import com.example.compose.snippets.landing.LandingScreen
 import com.example.compose.snippets.layouts.PagerExamples
 import com.example.compose.snippets.navigation.Destination
+import com.example.compose.snippets.navigation.FocusExamplesDestination
 import com.example.compose.snippets.navigation.TopComponentsDestination
+import com.example.compose.snippets.touchinput.focus.FocusExamples
+import com.example.compose.snippets.touchinput.focus.FocusTargetExamples
+import com.example.compose.snippets.touchinput.focus.FocusedStateExamples
+import com.example.compose.snippets.touchinput.focus.MoveFocusExamples
+import com.example.compose.snippets.touchinput.focus.OneDimensionalFocusTraversalExamples
+import com.example.compose.snippets.touchinput.focus.RequestFocusExamples
+import com.example.compose.snippets.touchinput.focus.TwoDimensionalFocusTraversalExamples
 import com.example.compose.snippets.ui.theme.SnippetsTheme
 
 class SnippetsActivity : ComponentActivity() {
@@ -94,6 +104,9 @@ class SnippetsActivity : ComponentActivity() {
                                     Destination.ShapesExamples -> ApplyPolygonAsClipImage()
                                     Destination.SharedElementExamples -> PlaceholderSizeAnimated_Demo()
                                     Destination.PagerExamples -> PagerExamples()
+                                    Destination.FocusExamples -> FocusExamples() {
+                                        navController.navigate(it.route)
+                                    }
                                 }
                             }
                         }
@@ -128,6 +141,34 @@ class SnippetsActivity : ComponentActivity() {
                                 }
                             }
                         }
+                        FocusExamplesDestination.entries.forEach { destination ->
+                            composable(destination.route) {
+                                when (destination) {
+                                    FocusExamplesDestination.FocusTarget -> {
+                                        FocusTargetExamples(modifier = Modifier.padding(32.dp))
+                                    }
+                                    FocusExamplesDestination.OneDimensionalFocusTraversal -> {
+                                        OneDimensionalFocusTraversalExamples(
+                                            modifier = Modifier.padding(32.dp)
+                                        )
+                                    }
+                                    FocusExamplesDestination.TwoDimensionalFocusTraversal -> {
+                                        TwoDimensionalFocusTraversalExamples(
+                                            modifier = Modifier.padding(32.dp)
+                                        )
+                                    }
+                                    FocusExamplesDestination.RequestFocus -> {
+                                        RequestFocusExamples(modifier = Modifier.padding(32.dp))
+                                    }
+                                    FocusExamplesDestination.FocusedState -> {
+                                        FocusedStateExamples(modifier = Modifier.padding(32.dp))
+                                    }
+                                    FocusExamplesDestination.MoveFocus -> {
+                                        MoveFocusExamples(modifier = Modifier.padding(32.dp))
+                                    }
+                                }
+                            }
+                        }
                     }
                 }
             }

compose/snippets/src/main/java/com/example/compose/snippets/navigation/Destination.kt

@@ -24,7 +24,8 @@ enum class Destination(val route: String, val title: String) {
     ScreenshotExample("screenshotExample", "Screenshot Examples"),
     ShapesExamples("shapesExamples", "Shapes Examples"),
     SharedElementExamples("sharedElement", "Shared elements"),
-    PagerExamples("pagerExamples", "Pager examples")
+    PagerExamples("pagerExamples", "Pager examples"),
+    FocusExamples("focusExamples", "Focus Examples")
 }
 
 // Enum class for compose components navigation screen.
@@ -53,3 +54,13 @@ enum class TopComponentsDestination(val route: String, val title: String) {
     SwipeToDismissBoxExamples("swipeToDismissBoxExamples", "Swipe to dismiss box examples"),
     SearchBarExamples("searchBarExamples", "Search bar")
 }
+
+// Enum class for focus examples navigation screen.
+enum class FocusExamplesDestination(val route: String, val title: String) {
+    FocusTarget("focusTarget", "Focus target"),
+    OneDimensionalFocusTraversal("focusTraversal", "Focus traversal: 1D"),
+    TwoDimensionalFocusTraversal("focusTraversal2D", "Focus traversal 2D"),
+    RequestFocus("requestFocus", "Request focus"),
+    FocusedState("focusableState", "Focusable state"),
+    MoveFocus("moveFocus", "Move focus"),
+}

compose/snippets/src/main/java/com/example/compose/snippets/touchinput/focus/FocusSnippets.kt

@@ -25,15 +25,20 @@ import androidx.compose.foundation.focusable
 import androidx.compose.foundation.interaction.FocusInteraction
 import androidx.compose.foundation.interaction.InteractionSource
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.GridItemSpan
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.Button
 import androidx.compose.material3.Card
+import androidx.compose.material3.ListItem
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Switch
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
@@ -52,10 +57,13 @@ import androidx.compose.ui.focus.FocusDirection.Companion.Right
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.FocusRequester.Companion.Cancel
 import androidx.compose.ui.focus.FocusRequester.Companion.Default
+import androidx.compose.ui.focus.FocusRequester.Companion.FocusRequesterFactory.component1
+import androidx.compose.ui.focus.FocusRequester.Companion.FocusRequesterFactory.component2
+import androidx.compose.ui.focus.FocusRequester.Companion.FocusRequesterFactory.component3
+import androidx.compose.ui.focus.FocusRequester.Companion.FocusRequesterFactory.component4
 import androidx.compose.ui.focus.focusProperties
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.focus.onFocusChanged
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Color.Companion.Blue
 import androidx.compose.ui.graphics.Color.Companion.Green
 import androidx.compose.ui.graphics.Color.Companion.Red
@@ -70,10 +78,68 @@ import androidx.compose.ui.node.DelegatableNode
 import androidx.compose.ui.node.DrawModifierNode
 import androidx.compose.ui.node.invalidateDraw
 import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.example.compose.snippets.navigation.FocusExamplesDestination
 import kotlinx.coroutines.launch
 
+@Composable
+fun FocusExamples(
+    modifier: Modifier = Modifier,
+    onNavigation: (FocusExamplesDestination) -> Unit = {}
+) {
+    LazyColumn(
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+        modifier = modifier
+    ) {
+        items(FocusExamplesDestination.entries.toList()) {
+            ListItem(
+                modifier = Modifier.clickable(onClick = {
+                    onNavigation(it)
+                }),
+                headlineContent = {
+                    Text(it.title)
+                }
+            )
+        }
+    }
+}
+
+@Composable
+internal fun Section(
+    title: String,
+    modifier: Modifier = Modifier,
+    verticalArrangement: Arrangement.Vertical = Arrangement.spacedBy(16.dp),
+    style: TextStyle = MaterialTheme.typography.headlineMedium,
+    content: @Composable () -> Unit = {}
+) {
+    Column(
+        modifier = modifier.focusGroup(),
+        verticalArrangement = verticalArrangement
+    ) {
+        Text(title, style = style)
+        content()
+    }
+}
+
+@Composable
+internal fun SubSection(
+    title: String,
+    modifier: Modifier = Modifier,
+    verticalArrangement: Arrangement.Vertical = Arrangement.spacedBy(8.dp),
+    style: TextStyle = MaterialTheme.typography.headlineSmall,
+    content: @Composable () -> Unit = {}
+) {
+    Section(
+        title = title,
+        modifier = modifier,
+        verticalArrangement = verticalArrangement,
+        style = style,
+        content = content,
+    )
+}
+
 @Preview
 @Composable
 private fun BasicSample() {
@@ -276,7 +342,7 @@ private fun RequestFocus() {
 }
 
 @Composable
-private fun RequestFocus2() {
+internal fun RequestFocus2() {
     // [START android_compose_touchinput_focus_request2]
     val focusRequester = remember { FocusRequester() }
     var text by remember { mutableStateOf("") }
@@ -382,7 +448,7 @@ private fun ModifierOrder2() {
 
 @OptIn(ExperimentalComposeUiApi::class)
 @Composable
-private fun RedirectFocus() {
+private fun FocusRedirection() {
     // [START android_compose_touchinput_focus_redirect]
     val otherComposable = remember { FocusRequester() }
 
@@ -399,7 +465,7 @@ private fun RedirectFocus() {
 }
 
 @Composable
-private fun FocusAdvancing() {
+internal fun FocusAdvancing() {
     // [START android_compose_touchinput_focus_advancing]
     val focusManager = LocalFocusManager.current
     var text by remember { mutableStateOf("") }
@@ -424,7 +490,7 @@ private fun FocusAdvancing() {
 @Composable
 private fun ReactToFocus() {
     // [START android_compose_touchinput_focus_react]
-    var color by remember { mutableStateOf(Color.White) }
+    var color by remember { mutableStateOf(White) }
     Card(
         modifier = Modifier
             .onFocusChanged {
@@ -460,7 +526,7 @@ private class MyHighlightIndicationNode(private val interactionSource: Interacti
     override fun ContentDrawScope.draw() {
         drawContent()
         if (isFocused) {
-            drawRect(size = size, color = Color.White, alpha = 0.2f)
+            drawRect(size = size, color = White, alpha = 0.2f)
         }
     }
 }