[DroidconSF]Developing Apps optimized for Wear OS with Jetpack Compose

This is the slide, "Developing Apps optimized for Wear OS with Jetpack Compose"
#wearos #android #droidconSF #dcsf23 #Droidcon

Transcript

1. Developing Apps optimized for Wear OS with Jetpack Compose Kenichi Kambara (@korodroid) June 9, 2023 2023
2. 2 About me Kenichi Kambara (@korodroid) •Mobile App Development •Speeches (e.g. 14 Int’l Confs.) •Writings (e.g. 8 Dev Books) •Principal Evangelist at NTT TechnoCross •[Private] iplatform.org
3. Agenda •Wear OS Overview •Wear OS Topics from I/O 2023 •Compose for Wear OS •How to optimize Apps for Wear OS? Source: Google I/O 2023 Keynote / Developer Keynote / Wear OS Session Android Developers Blog
4. Wear OS Overview  Noti fi cation Complication Based on Android & optimized for the wrist Tile  App
5. Wear OS Topics from I/O 2023  Watch Face Format Watch Face Studio Tile (Animation)
6. Wear OS ΞϓϦ։ൃೖ໳ with Jetpack Compose Compose for Wear OS
7. Wear OS Features  App Noti fi cation Complication Based on Android & optimized for the wrist Tile 
8. Implementation Example (Button)  @Composable fun ButtonExample() { Button( modifier = Modifier.size(ButtonDefaults.LargeButtonSize), onClick = { /* do anything */ }, enabled = true ){ Icon(Icons.Default.Mic, contentDescription = "mic") } }
9. Very similar to mobile. What’s the difference? 9
10. 1st difference: UI & UX Input components Dialogs Page Indicator Progress Indicator  Navigation
11.  2nd difference: Screen Sizes & Shapes
12.  Wear OS 
 (androidx.wear.*) Mobile 
 (androidx.*) androidx.wear.compose:compose-material androidx.compose.foundation:foundation androidx.wear.compose:compose-foundation androidx.compose.material:material androidx.navigation:navigation-compose androidx.compose.foundation:foundation ref: https://developer.android.com/training/wearables/compose Material androidx.wear.compose:compose-navigation Navigation Foundation 3rd difference: Development
13. e.g. Button  Wear OS 
 (androidx.wear.*) Mobile 
 (androidx.*) androidx.wear.compose:compose-material androidx.compose.material:material
14. 14 Asked 1 Question to Studio Bot 
15. 15 Wear OS Development Environment  Can start easily with Android Studio
16. 16 Wear OS Development Environment 
17. 17 Create a Wear OS app project  Simple Template
18. Live Demo💪 
19. 19 How to optimize Apps for Wear OS?
20. Today's example: Contact App  @Composable fun ContactListScreenV0() { LazyColumn( horizontalAlignment = Alignment.CenterHorizontally ) { item { ListHeader { Text(text = "Contacts") } } items(model.data.size) { Chip( modifier = Modifier .fillMaxSize(), icon = { Icon( Icons.Rounded.Face, contentDescription = "faceIcon", ) }, label = { Text(model.data[it]) }, colors = ChipDefaults.primaryChipColors(), onClick = { }, ) } } } not BAD, but not GOOD
21. How to make better UI for Wear OS? 21
22. Step1. Replacing to ScalingLazyColumn  @Composable fun ContactListScreenV1() { ScalingLazyColumn( horizontalAlignment = Alignment.CenterHorizontally ) { item { ListHeader { Text(text = "Contacts") } } items(model.data.size) { Chip( modifier = Modifier .fillMaxSize(), icon = { Icon( Icons.Rounded.Face, contentDescription = "faceIcon", ) }, label = { Text(model.data[it]) }, colors = ChipDefaults.primaryChipColors(), onClick = { }, ) } } } <wear>/MainActivity.kt
23. How should we provide better UI/UX?  TimeText Vignette PositionIndicator
24. Step2. Using Scaffold  @Composable fun ContactListScreenV2() { val listState = rememberScalingLazyListState() Scaffold( timeText = { if (!listState.isScrollInProgress) { TimeText() } }, vignette = { Vignette( vignettePosition = VignettePosition.TopAndBottom ) }, positionIndicator = { PositionIndicator( scalingLazyListState = listState, ) } ) { ScalingLazyColumn(state = listState) { // … }
25. How to support more screens? 25  +
26. Step3. Adding a new Screen  @Composable fun ContactDetailScreen(id: Int) { Chip( modifier = Modifier .fillMaxSize(), icon = { Icon( Icons.Rounded.Face, contentDescription = "faceIcon", ) }, label = { Column( ) { Text(text = model.data[id].name,
 fontWeight = FontWeight.Bold) Text(text = model.data[id].phone) Text(text = model.data[id].nation) } }, colors = ChipDefaults.primaryChipColors(), onClick = { /* do anything */ }, ) }
27. How to support navigation? 27 
28. Implementing with Wear Navigation  Wear OS 
 (androidx.wear.*) Mobile 
 (androidx.*) androidx.navigation:navigation-compose ref: https://developer.android.com/training/wearables/compose/navigation androidx.wear.compose:compose-navigation Navigation <wear>/build.gradle dependencies { def wear_compose_version = “1.1.2" implementation "androidx.wear.compose:compose-navigation:$wear_compose_version" }
29.  @Composable fun ScreenNavigation_GoodImpl( navController: NavHostController = rememberSwipeDismissableNavController() ) { SwipeDismissableNavHost( navController = navController, startDestination = "contact_list" ) { composable("contact_list") { ContactListScreenV3(navController = navController) } composable("contact_detail/{id}") { val id = it.arguments?.getString("id")!! ContactDetailScreen(id = id.toInt()) } } } Step4. Implementing Wear Navigation
30. Step4. Implementing Wear Navigation  @Composable fun ContactListScreenV3(navController: NavHostController) { Scaffold( // just same ) { ScalingLazyColumn(state = listState) { item { // just same } items(model.data.size) { Chip( modifier = Modifier.fillMaxSize(), icon = { // just same }, label = { Text(model.data[it].name) }, colors = ChipDefaults.primaryChipColors(), onClick = { navController.navigate("contact_detail/$it") }, ) } } } }
31. Looks good, but to make it better… 31 
32. Adding a Tile feature  Noti fi cation Complication Provide easier access to this app Tile  App +
33. Step5. Implementing a Tile feature  class MainTileService : CoroutinesTileService() { // Abbreviates some procedures, such as reading data from the repository
 override suspend fun resourcesRequest( requestParams: RequestBuilders.ResourcesRequest ): ResourceBuilders.Resources { return ResourceBuilders.Resources.Builder().setVersion(RESOURCES_VERSION).build() } override suspend fun tileRequest( requestParams: RequestBuilders.TileRequest ): TileBuilders.Tile { val singleTileTimeline = TimelineBuilders.Timeline.Builder().addTimelineEntry( TimelineBuilders.TimelineEntry.Builder().setLayout( LayoutElementBuilders.Layout.Builder().setRoot(tileLayout(this)).build() ).build() ).build() return TileBuilders.Tile.Builder().setResourcesVersion(RESOURCES_VERSION) .setTimeline(singleTileTimeline).build() } } a Kotlin coroutine-friendly wrapper 
 from the Horologist Tiles library <wear>/MainTileService.kt
34. Step5. Adding a Tile de fi nition  <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:theme="@android:style/Theme.DeviceDefault"> 
 …
 <service android:name=".tile.MainTileService" android:exported="true" android:label="@string/tile_label" android:permission="com.google.android.wearable.permission.BIND_TILE_PROVIDER"> <intent-filter> <action android:name="androidx.wear.tiles.action.BIND_TILE_PROVIDER" /> </intent-filter> <meta-data android:name="androidx.wear.tiles.PREVIEW" android:resource="@drawable/tile_preview" /> </service> </application> <wear>/AndroidManifest.xml
35. That’s all! Can show the last contact easily. 35 
36.  Tips💡 Useful features for Wear OS
37.  Tips💡 Next Step (How to optimize more) ref: Principles of Wear OS development 
 https://developer.android.com/training/wearables/principles
38. Reference  Code (My Codelab) 
 bit.ly/3UWME7M 
 Slide 
 @korodroid 

39. Go future with Wear OS & Jetpack Compose🚀 http://www.linkedin.com/in/korodroid Thank you so much http://fb.com/kanbara.kenichi @korodroid