Talk presented by Kelvin Harron to the Belfast Google Developer Group in September 2022 on Jetpack Compose.

1. © Instil Software 2020
Compose Part 2
(the practice)
Belfast Google Dev Group
September 2022

2. @kelvinharron
https://instil.co

3. – Short history tour of Android UI Development.
– Examples of using Jetpack Compose in across multiple
apps.
– Focus on Navigation, Accessibility & Testing.
– Sneak peak at an upcoming Instil app!
AGENDA

4. 1
A history of
Android UI dev

5. The classic - findViewById XML layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
id used by Activity

6. The classic - findViewById Activity
private lateinit var textView: TextView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
textView = findViewById<TextView?>(R.id.textView).apply {
text = "Hello GDE"
textSize = 42f
setTextColor(Color.CYAN)
}
}

8. Instil recommendation - Databinding

9. <layout ...>
<data>
<import type="android.view.View"/>
<variable
name="vm"
type="co.instil.databinding.DemoViewModel"/>
</data>
<TextView
...
android:text="@{vm.text}"/>
</LinearLayout>
</layout>
Databinding XML
layout as root
source of truth
binded field

10. class DemoActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val binding = DataBindingUtil.setContentView<ActivityDemoBinding>
(this,R.layout.activity_demo)
binding.vm = DemoViewModel()
}
}
Databinding Activity
XML layout file
setting vm on XML

11. class DemoViewModel {
val text = ObservableField("Data binding works!")
}
ViewModel

12. The shiny new thing, Jetpack Compose!

13. UI representing State

14. … but starting from scratch?

15. 2
Working with
Compose

19. WIP

21. Sharing Components

22. Previews that work!
@Composable
@Preview(uiMode = UI_MODE_NIGHT_YES)
fun CarouselScreenDarkPreview() {
EstiMateTheme {
CarouselScreen(
{},
{ CardSelection.Nuclear },
CardSelection.Nuclear
)
}
}

23. Card(
backgroundColor = instilGreen,
shape = RoundedCornerShape(size = 16.dp),
elevation = 8.dp,
modifier = modifier
.padding(8.dp)
.width(120.dp)
.height(150.dp)
.clickable { onSelected(selection) },
) {
CardContent(
selection = selection,
fontSize = fontSize
)
}
EstiMateCard
default modifier
material component

24. Box(contentAlignment = Alignment.Center) {
when (selection) {
is CoffeeBreak -> CoffeeImage()
is Nuclear -> NuclearImage()
else -> SelectionText(selection, fontSize)
}
}
CardContent

25. `Flow` of data
StateFlow<List<Player>>
ViewModel
Composable
Screen
Jetpack
DataStore
Firebase
Flow<List<Player>>
List<Player>

26. open fun getPlayers(teamName: String): Flow<List<Player>> = callbackFlow {
firebaseService.observePlayersIn(teamName) { players ->
trySend(players)
}
awaitClose { channel.close() }
}
PlayerService calling to Firebase
posting a fresh list of players

27. val players: StateFlow<List<Player>> = playerService.getPlayers()
.stateIn(
scope = viewModelScope,
started = SharingStarted.Lazily,
initialValue = emptyList()
)
ViewModel called to PlayerService
cancels the work once vm cleared

28. val votedPlayers: List<Player> by viewModel.players.collectAsState()
...
Composable calling to ViewModel
LazyColumn(modifier = Modifier.fillMaxWidth()) {
items(votedPlayers.size) { index ->
UserVoteItem(votedPlayers[index])
}
}
composable per list item
listOf(
Player(CardSelection.Five, "Kelvin"),
Player(CardSelection.Three, "Garth")
)

30. – Started in 2016.
– MVP pattern through use of interfaces.
– Jetpack Compose introduced as we took ownership of
development.
– Shipped 2 new UI driven features with Jetpack Compose.
Vypr
Android App

31. Bumping old dependencies

33. Using Jetpack Compose in XML Views
<androidx.compose.ui.platform.ComposeView
android:id="@+id/compose_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
reference id

34. Using Jetpack Compose in XML Views
private var _binding: FragmentSteersBinding? = null
private val binding get() = _binding!!
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View {
_binding = FragmentSteersBinding.inflate(inflater, container, false)
val view = binding.root
binding.composeView.apply {
setViewCompositionStrategy(DisposeOnViewTreeLifecycleDestroyed)
setContent {
VyprTheme {
SteersListView()
}
}
}
return view
}
compose_view xml element
our new composable

35. Using XML views in Jetpack Compose
AndroidView(
modifier = Modifier.fillMaxSize(),
factory = { context ->
AspectRatioImageView(context).apply {
load(steer.previewImageUrl)
setOnClickListener { onSteerClicked(steer) }
}
}
)
legacy view with lots of scary

37. – RecyclerView & adapter complexity removed.
– Jetpack Compose views driven by lifecycle aware ViewModel.
– More testable implementation.
– We fixed the bug!
Steers List Interop example

38. 3
Navigation

39. Activity to Activity

40. Activities with Fragments

41. Single Activity Architecture

42. Jetpack Compose Navigation!

43. – NavController - central API for stateful navigation.
– NavHost - links NavController with a navigation graph.
– Each Composable screen is known as a route.
Jetpack Navigation
Now supporting Compose

44. Compose Navigation!
NavHost(navController = navController, startDestination = "profile") {
composable("profile") { Profile(/*...*/) }
composable("friendslist") { FriendsList(/*...*/) }
/*...*/
}

45. Navigating to another Route
navController.navigate("friendslist")

46. Compose Navigation
With Arguments
NavHost(startDestination = "profile/{userId}") {
...
composable(
"profile/{userId}",
arguments = listOf(navArgument("userId") { type = NavType.StringType
})
) {...}
}
...
navController.navigate("profile/user1234")

48. compose-destinations

49. A KSP library that processes annotations and
generates code that uses Official Jetpack
Compose Navigation under the hood.
It hides the complex, non-type-safe and boilerplate
code you would have to write otherwise.
Rafael
Costa
github.com/raamcosta/compose-destinations

50. Adding a Destination
@Destination(start = true)
@Composable
fun LoginRoute(
destinationsNavigator: DestinationsNavigator
) {
LoginScreen(
...
)
}
tag composable for generation
provided for nav

51. Generated NavGraph
object NavGraphs {
val root = NavGraph(
route = "root",
startRoute = LoginRouteDestination,
destinations = listOf(
CarouselRouteDestination,
LoginRouteDestination,
ResultsRouteDestination,
SelectionRouteDestination
)
)
}
each annotated composable
labelled start

52. Type safe navigation
onLoginClicked = {
destinationsNavigator.navigate(SelectionRouteDestination)
},

53. Type safe navigation with args
onCardSelected = { cardSelection ->
destinationsNavigator.navigate(
CarouselRouteDestination(selection = cardSelection)
)
})

54. Custom Serializer
@NavTypeSerializer
class CardSelectionSerializer : DestinationsNavTypeSerializer<CardSelection> {
override fun fromRouteString(routeStr: String): CardSelection {
return CardSelection.fromString(routeStr)
}
override fun toRouteString(value: CardSelection): String {
return value.name
}
}

55. Under the hood
object LoginRouteDestination : DirectionDestination {
operator fun invoke() = this
@get:RestrictTo(RestrictTo.Scope.SUBCLASSES)
override val baseRoute = "login_route"
override val route = baseRoute
@Composable
override fun DestinationScope<Unit>.Content(
dependenciesContainerBuilder: @Composable DependenciesContainerBuilder<Unit>.() -> Unit
) {
LoginRoute(
destinationsNavigator = destinationsNavigator
)
}
}
our composable

56. 4
Accessibility

57. What is Accessibility?

58. “Mobile accessibility” refers to making websites
and applications more accessible to people with
disabilities when they are using mobile phones
and other devices.
Shawn Lawton
Henry
w3.org/WAI/standards-guidelines/mobile/

59. Android Accessibility
– Switch Access: interact with switches instead of the
touchscreen.
– BrailleBack: refreshable Braille display to an Android device
over Bluetooth.
– Voice Access: control an Android device with spoken
commands.
– TalkBack: spoken feedback for UI interactions.
What options are baked into the OS?

60. TalkBack

61. An essential tool for every Android team

63. Play Store Testing

64. Play Store Testing - Example Issue

65. Screen Reader issue confirmed
no context of dialog

66. Fixing the Dialog
val accountDeletionDialogAccessibilityLabel = stringResource(
id = R.string.accessibility_account_deletion_delete_dialog
)
AlertDialog(
...
modifier = Modifier.semantics(mergeDescendants = true) {
contentDescription = accountDeletionDialogAccessibilityLabel
}
)

67. Fixed!

68. Accessibility Starts with Design

69. Screen Sizes & Resolution

70. UI Mockups
– Discuss what the UI toolkit can do when size is
constrained. Compose is good at scaling text!
– Agree how to handle view scaling.
– Agree copy for accessibility labelling.
– Collaborate with designers & product owners.

71. 5
Testing

72. Compose Semantics
Semantics, as the name implies, give meaning to a
piece of UI. In this context, a "piece of UI" (or element)
can mean anything from a single composable to a full
screen.
The semantics tree is generated alongside the UI
hierarchy, and describes it.

73. Example Button
Button(
modifier = Modifier.semantics {
contentDescription = "Add to favorites"
}
)
individual ui elements make up a button
easier to find

74. Test Setup
@get:Rule
val composeTestRule = createAndroidComposeRule<VyPopsActivity>()
@Before
fun beforeEachTest() {
composeTestRule.setContent {
VyprTheme {
VyPopsLandingScreen(EmptyDestinationsNavigator)
}
}
}

75. Finders
Select one or more elements (nodes) to assert or act on
composeTestRule
.onNodeWithContentDescription("Close Button")
composeTestRule
.onNodeWithText("What happens next")

76. Finders - Debug Logging
Node #1 at (l=0.0, t=54.0, r=720.0, b=1436.0)px
|-Node #2 at (l=70.0, t=54.0, r=650.0, b=1436.0)px
ContentDescription = '[VyPops Permissions Page]'
|-Node #3 at (l=70.0, t=75.0, r=112.0, b=117.0)px
| Role = 'Button'
| Focused = 'false'
| ContentDescription = '[Close Button]'
| Actions = [OnClick]
| MergeDescendants = 'true'
|-Node #6 at (l=229.0, t=194.0, r=492.0, b=303.0)px
| ContentDescription = '[Vypr Logo]'
| Role = 'Image'
|-Node #7 at (l=91.0, t=687.0, r=133.0, b=729.0)px
| ContentDescription = '[Record Audio Tick]'
| Role = 'Image'
|-Node #8 at (l=147.0, t=684.0, r=615.0, b=731.0)px
| Text = '[Microphone access granted]'
| Actions = [GetTextLayoutResult]
|-Node #9 at (l=125.0, t=762.0, r=167.0, b=804.0)px
| ContentDescription = '[Camera Tick]'
| Role = 'Image'
|-Node #10 at (l=181.0, t=759.0, r=582.0, b=806.0)px
| Text = '[Camera access granted]'
| Actions = [GetTextLayoutResult]
|-Node #11 at (l=84.0, t=1275.0, r=636.0, b=1366.0)px
Text = '[VyPops needs access to both your camera and microphone.]'
Actions = [GetTextLayoutResult]
Node #1 at (l=0.0, t=54.0, r=720.0, b=1436.0)px
|-Node #2 at (l=70.0, t=54.0, r=650.0, b=1436.0)px
ContentDescription = '[VyPops Permissions Page]'
|-Node #3 at (l=70.0, t=75.0, r=112.0, b=117.0)px
| Role = 'Button'
| Focused = 'false'
| Actions = [OnClick]
| MergeDescendants = 'true'
| |-Node #5 at (l=70.0, t=75.0, r=112.0, b=117.0)px
| ContentDescription = '[Close Button]'
| Role = 'Image'
|-Node #6 at (l=229.0, t=194.0, r=492.0, b=303.0)px
| ContentDescription = '[Vypr Logo]'
| Role = 'Image'
|-Node #7 at (l=91.0, t=687.0, r=133.0, b=729.0)px
| ContentDescription = '[Record Audio Tick]'
| Role = 'Image'
|-Node #8 at (l=147.0, t=684.0, r=615.0, b=731.0)px
| Text = '[Microphone access granted]'
| Actions = [GetTextLayoutResult]
|-Node #9 at (l=125.0, t=762.0, r=167.0, b=804.0)px
| ContentDescription = '[Camera Tick]'
| Role = 'Image'
|-Node #10 at (l=181.0, t=759.0, r=582.0, b=806.0)px
| Text = '[Camera access granted]'
| Actions = [GetTextLayoutResult]
|-Node #11 at (l=84.0, t=1275.0, r=636.0, b=1366.0)px
Text = '[VyPops needs access to both your camera and microphone.]'
Actions = [GetTextLayoutResult]

77. Assertions
Verify elements exist or have certain attributes
composeTestRule
.onNodeWithContentDescription("Login Button")
.assertIsEnabled()
composeTestRule
.onNodeWithText("What happens next")
.assertIsDisplayed()

78. Simulate user input or gestures
Actions
composeTestRule
.onNodeWithContentDescription("Close Button")
.performClick()
...
.performTouchInput {
swipeLeft()
}

79. developer.android.com/jetpack/compose/testing-cheatsheet

80. Shot is a Gradle plugin and a core android library
thought to run screenshot tests for Android.
Pedro
Gómez
github.com/pedrovgs/Shot

81. ./gradlew executeScreenshotTests -Precord
Example Test
@get:Rule
val composeRule = createAndroidComposeRule<AccountDeletionActivity>()
@Test
fun accountDeletedScreenBodyScreenshot() {
composeRule.setContent { AccountDeletedScreenBody() }
compareScreenshot(composeRule)
}

82. ./gradlew executeScreenshotTests
Example Output

83. 6
Introducing Compose
to your team

86. Introducing Compose
Phased approach
– Do you have an existing app with custom UI
components?
– Recreate them in Compose!
– Provide a foundation to educate your team.
– Define standards & best practices.

87. Introducing Compose
medium.com/tinder/sparking-jetpack-compose-at-tinder-8f15d77eb4da

88. 7
Conclusions

89. – We’ve adopted Jetpack Compose for all new Android
projects.
– Excellent official documentation & codelabs available.
– Good tooling and a growing list of third-party libraries
available.
– Recommend new starts prioritise Jetpack Compose over
XML.
Conclusions

90. EstiMate for Android is coming soon™

91. Questions?
Questions?