Handling focus in 2024

AndroidMakers by droidcon 2024 - Day 2 (26/4/2024)
https://androidmakers.droidcon.com/tiphaine/

Video:
https://www.droidcon.com/2024/06/12/handling-focus-in-2024-supporting-different-navigation-ways-with-compose/

Transcript

1. Handling focus in 2024 Supporting different navigation ways with Compose Tiphaine (DeNA) AndroidMakers by droidcon 2024
2. 2 • Android developer @ DeNA (Pococha) • DroidKaigi volunteer staff • Accessibility & privacy 🔥 Hello! I am Tiphaine ɹ tahia910
3. 01 3 Introduction Checklist Focus with Compose 02 03
4. 01 4 Introduction
7. 7 Focus Navigation
8. 8 RefɿAkela NDE
9. 9 • Alternative way to interact with your phone without using the touch screen • Move through the UI one element at a time Focus Navigation
10. Focus Navigation 10 Focus • Current position in the UI • Can only interact with this element • Element will have some visual changes when focused
11. Focus in Android world 11 • Accessibility focus vs Navigation focus • Navigation focus is sometimes
 called Keyboard Navigation • Both focuses are Focus Navigation variants 😵💫 Focus
12. 12 Differences between focuses
13. Don’t touch the screen 👋 👀 Don’t see the screen 13 Navigation Focus Accessibility Focus
14. Accessibility Focus Only actionable elements All elements Navigation Focus Accessibility Focus 14
15. 15 Navigation Focus Accessibility Focus Only actionable elements All elements focusable attribute focusable and importantForAccessibility attributes
16. 16 Navigation Focus Accessibility Focus Only actionable elements All elements focusable attribute focusable and importantForAccessibility attributes Keyboard, d-pad, switch… Screen readers like TalkBack
17. 17 Devices used for navigating • Hardware keyboard (tablets, Chromebooks) • On-screen keyboard (soft input keyboard) PhotoɿSergi Kabrera
18. 18 • TV remote controller • Smartwatches rotating bezel • Game controller • Switch Access RefɿGoogle Devices used for navigating
19. 19 focusable and importantForAccessibility attributes Changeable indicator Only one default indicator Only actionable elements All elements focusable attribute focusable and importantForAccessibility attributes Keyboard, d-pad, switch… Screen readers like TalkBack Navigation Focus Accessibility Focus
20. 20 Focus indicator Navigation Focus Accessibility Focus
21. 21 Due to time restriction, I will skip accessibility focus
22. 22 Today’s focus will be navigation focus (🥶)
23. 23 Types of navigation (relying on nav focus)
24. 24 Directional navigation • Using a D-pad (directional pad) 
 or arrow keys on a keyboard • Two-dimensional nav • Focus mainly goes up, down, left, or right
25. 25 Tab navigation • Using Switch Access or “tab” key on a keyboard. • One-dimensional nav (forward or backward) • Focus follows the order in which elements appear in the layout (top left to bottom right)
26. 26 Focus Navigation Accessibility Focus Navigation Focus Directional Navigation Tab Navigation (?) 🤔
27. 27 01 Introduction Checklist Focus with Compose 02 03
28. 02 28 Checklist
29. • Do all actions • Navigate without keyboard traps • See which element is being focused • Skip non-interactive elements 29 Users must be able to:
30. 30 • Make actionable elements focusable, especially if you don’t use OnClickListener // Focusable with all focuses android:focusable=“true" Ensure clickability
31. myView.setOnLongClickListener { // Do something true } 31 Can’t reach the view :(
32. myView.setOnLongClickListener { // Do something true } // Set this for any listener 
 // except setOnClickListener⚠ timelineItem.isFocusable = true 32
33. 33 Ensure clickability • Verify that all ClickableSpans are reachable
34. 34 • Skip non-interactive elements • Wait for an action to initiate changes // Skip the view android:focusable=“false” Meet the user’s expectations
35. 35 • Make sure the focus is always moveable • Verify the Return key allows to move away • Double check your WebViews, scrolls 
 and drop-down lists Avoid keyboard traps
36. 36 • Ensure the flow is logical and consistent Facilitate navigation // Tab navigation
 android:nextFocusForward=“@id/...” // Directional navigation // Can also set up, down and left android:nextFocusRight=“@id/...”
37. 37 Facilitate navigation RefɿAndroid Developers // Available from API 26+ android:keyboardNavigationCluster • Group elements with clusters 1 2 3 4 10 11 12 Main content Bottom nav bar Top tabs
38. 38 • Prevent the on-screen keyboard to appear on top of the text field being focused Optimize text input <activity ... // Or use “adjustPan” android:windowSoftInputMode="adjustResize" /> RefɿAndroid Developers, Lua Software ?
39. 39 • Request the focus when the start is obvious Optimize text input // Available from API 26+ // Won’t show on-screen keyboard <EditText ... android:focusedByDefault="true"/>
40. 40 RefɿAlex Zlatkus Start here instead
41. 41 • Ensure the focus is visible • Customize the indicator color and/or shape when necessary Don’t let the user get lost RefɿGoogle Play Store app in 2021
42. Customize the indicator: whole app Customize the indicator 42 <!-- themes.xml --> <style name=“AppTheme" ...> ... <item name="colorControlHighlight">...</item> </style>
43. Customize the indicator: single View ᶃ 43 <!-- outline.xml --> <shape ... android:shape="rectangle"> ... <stroke android:width="4dp" android:color=“@color/black” /> </shape> Customize the indicator: single View Customize the indicator
44. 44 <!-- focus_selector.xml --> <selector ...> </selector> Customize the indicator: single View ᶄ Customize the indicator: single View Customize the indicator <item android:drawable=“@drawable/outline” 
 android:state_focused="true" /> <item android:drawable="@color/transparent"/>
45. 45 <Button ... android:foreground=“@drawable/focus_selector"/> Customize the indicator: single View ᶅ Customize the indicator: single View Customize the indicator
46. 46 Give some time • Stop motions when focused • Get recommended time out to set elements that disappear
47. 47 a11yManager val a11yManager = ContextCompat.getSystemService( requireContext(), AccessibilityManager::class.java, ) RefɿAung Kyaw Paing, Suchi Bansal
48. // Can combine with other flags: // FLAG_CONTENT_ICONS, FLAG_CONTENT_TEXT AccessibilityManager.FLAG_CONTENT_CONTROLS, // The original timeout you planned defaultTimeOut, 48 // Available from API 29+ a11yManager?.getRecommendedTimeoutMillis( ) RefɿAung Kyaw Paing, Suchi Bansal a11yManager
49. 49 How about 
 gesture-based actions? 🤔
50. 50 true } myView.isFocusable = true myView.setOnTouchListener { view, event -> // Do something with touch event
51. 51 Focusable, no warning, 
 but still not working :( true } myView.isFocusable = true view.performClick() myView.setOnTouchListener { view, event -> // Do something with touch event
52. 52 • performClick() just executes the code set in a separate OnClickListener • “ClickableViewAccessibility” warning is for accessibility focus Handle gesture-based actions
53. 53 • Nav focus can't even trigger OnTouchListener 😢 • Need a different way to detect input events Handle gesture-based actions 👉 Listen to KeyEvents instead
54. myView.setOnKeyListener { view, keyCode, event -> 54 } // Choose which one(s) you want to support KeyEvent.KEYCODE_ENTER, ... -> { // Do something true } else -> false when (keyCode) { RefɿAndroid Developers }
55. myView.setOnKeyListener { view, keyCode, event -> } when (keyCode) { } 55 Parse duplicate events ⚠ when (keyCode) { ... } // Handle the event only once if (event.action != KeyEvent.ACTION_UP) { return@setOnKeyListener false }
56. 56 override fun onKeyUp(keyCode: Int, event: KeyEvent?)
 : Boolean { } Use this instead for custom views return when (keyCode) { KeyEvent.KEYCODE_ENTER -> performClick() else -> ... }
57. 57 Try to test on different manufacturers 🧐
58. 58 01 Introduction Checklist Focus with Compose 02 03
59. 03 59 Focus with Compose
60. 60 Compose specificities
61. 61 • Focus follows the declaration order of Composables • Priority goes to elements
 inside the same level Tab Navigation flow // Level ᶃ // Level ᶄ // Level ᶄ Column { Row { Row { } } } ... ...
62. 62 CustomButton("1") CustomButton("2") CustomButton("3") CustomButton("4") Column { } Row { Row { } }
63. 63 Row { Column { } Column { } } CustomButton("1") CustomButton("2") CustomButton("3") CustomButton("4")
64. 64 🥲 Modifier order matters (a lot)
65. 65 Handling focus (in Compose)
66. Modifier.focusable() 66 • Need to provide a focus indicator and handle the displaying logic 😭 Make the element focusable
67. 67 Modifier var color by remember { .focusable() mutableStateOf(transparent) } // Modifier of your Composable Set focusable as the last Modifier ⚠
68. 68 Modifier .border(5.dp, indicatorColor) .onFocusChanged { focusState -> } color = if (focusState.isFocused) { black } else { transparent } var color by remember { ...} .focusable() 🎉
69. 69 Modifier.clickable { // Do something } • Composable is focusable by default when using the default click listener ✅ Handle click actions
70. 70 👀 How about
 OnLongClickListener?
71. Modifier.combinedClickable( ) 71 onClick = { }, // Not triggered 😢 // Mandatory & non-nullable onLongClick = { },
72. 72 Handle other actions 👉 Listen to KeyEvents instead (again)
73. 73 Listen to KeyEvents Modifier.onPreviewKeyEvent {} Modifier.onKeyEvent {} // Parent callback is invoked first // Start from children callback
74. 74 Modifier.onKeyEvent { keyEvent -> } when (keyEvent.key) { Modifier.onKeyEvent Key.Enter -> { // Do something true } else -> false }
75. 75 // Parse duplicate if (keyEvent.type != KeyEventType.KeyUp) { return@onPreviewKeyEvent false } when (keyEvent.key) { } when (keyEvent.key) { ... } Modifier.onKeyEvent { keyEvent -> } Modifier.onKeyEvent
76. 76 RefɿAung Kyaw Paing val a11yManager = LocalAccessibilityManager.current Get the recommended time out a11yManager
77. 77 RefɿAung Kyaw Paing a11yManager?.calculateRecommendedTimeoutMillis( ) a11yManager Get the recommended time out originalTimeoutMillis = defaultTimeOut, containsIcons = false, containsText = false, containsControls = true, // Returns a Long value
78. • Can still be clicked in TouchMode 👋 78 Modifier.focusProperties { Skip an element canFocus = false }
79. 79 Change the flow - Tab Navigation Change the flow Modifier.focusProperties { } next = Modifier .focusProperties { } previous = ... ... • FocusProperties with FocusRequester
80. 80 val (first, second) = remember { FocusRequester.createRefs() }
81. Modifier 81 val (first, second) = remember { FocusRequester.createRefs() } first // First Composable // Second Composable Modifier.focusRequester( ) ) second .focusRequester(
82. 82 val (first, second) = remember { FocusRequester.createRefs() } Modifier .focusProperties { } second next = first) .focusRequester(
83. 83 // Won’t be used The top most Modifier wins ⚠ Modifier .focusProperties { } .focusProperties { previous = second } next = second
84. 84 Change the flow - Directional Nav Modifier.focusProperties { left = ... right = ... up = ... down = ... }
85. 85 val focusManager = LocalFocusManager.current focusManager.moveFocus(...) Move the focus • Go to the nearest (focusable) Composable
86. 86 TextField(... keyboardOptions = KeyboardOptions( ) ), imeAction = ImeAction.Next,
87. 87 keyboardActions = KeyboardActions( onNext = { } ), ), val focusManager = LocalFocusManager.current TextField(... keyboardOptions = KeyboardOptions(... ) focusManager.moveFocus( ) FocusDirection.Down
88. 88 Move the focus • Go wherever you want (as long as it’s focusable) Move the focus - the other way val requester = remember { FocusRequester() } requester.requestFocus()
89. 89 Button( onClick = { ) { ... } TextField(... } ) val requester = remember { FocusRequester() } Modifier.focusRequester(requester) requester.requestFocus()
90. 90 Try it out!
91. 91 • Plug it to your phone • Tap any key to make the indicator appear • 🎉 • Can also use other tools with D-pad 🎮 Use a hardware keyboard
92. 92 1⃣ Set up an emulator OR 2⃣ Enable device mirroring Use your laptop keyboard
93. 93 • D-pad navigation is enabled by default with pre-set hardware profiles • For new profiles, select the option when creating the device 1⃣ Set up an emulator
99. 99 • Use a real device through AndroidStudio • Preferences → Tools → Device mirroring 2⃣ Enable device mirroring
101. 101 Quickly test on real devices while coding 🎉
102. 102 • Focus in Compose - Android Developers official documentation • Android App Development: Accessibility - Renato Iwashima References
103. Thanks! ThemeɿSlidesCarnival ɹ tahia910 Special thanks: • DeNA • Kimitoshi Mizutani • Shota Moriwaki • Yosuke Miyanishi