More Related Content
What's hot
What's hot (20)
Similar to Creating your first Wear OS app with compose
Similar to Creating your first Wear OS app with compose (20)
Recently uploaded
Recently uploaded (20)
Creating your first Wear OS app with compose
- 1. Creating your first Wear OS app with Compose by Mikhail Kulaha
- 2. Speaker intro Mikhail (Misha) Kulaha - 12 years of Android experience - 2 years at Google, Wear OS - Work in “Compose for Wear OS” team @kpeved
- 3. Agenda - What is Wear OS and why you should care about it - What is a Wear OS app - Difference between Mobile and Wear apps - Designing and developing an app for Wear OS by using “Compose for Wear OS” and “Horologist”.
- 4. What is Wear OS - Based on Android - Runs on smartwatches - Latest version is Wear OS 4 - now in Preview (based on Android 13 or API 33)
- 5. Why do you need an app for Wear OS? 5x growth in active devices since the launch of Wear OS 3
- 6. Why do you need an app for Wear OS? Having a Wear OS app - Increases user engagement - Low engineering investment - Unique user journeys 🤔
- 7. Unique user journeys on Wear OS Fitness app
- 8. Unique user journeys on Wear OS Media app
- 9. Unique user journeys on Wear OS Messaging app
- 10. Surfaces of Wear OS app
- 11. Watchfaces & complications - Main screen of the watch - Can contain complications complications
- 12. Tiles - Provide quick access to glanceable information and actions - Not vertically scrollable
- 13. Notifications - Use the same APIs and have the same structure as notifications on phones https://d.android.com/training/wearables/notifications
- 14. Wear OS app - Looks exactly the same as other android apps - Can do anything!
- 16. Differences between Mobile and Wear OS apps
- 17. Interaction ~ 4 min ~ 5 sec
- 18. Size and shape
- 19. Performance CPU: Dual-core 1.15 GHz Cortex-A53 GPU: Mali-T720 RAM: 2GB Battery: 294 mAh CPU: Octa-core (2x2.85 GHz Cortex-X1 & 2x2.35 GHz Cortex-A78 & 4x1.80 GHz Cortex-A55) GPU: Mali-G710 MP7 RAM: 12GB Battery: 5000 mAh Source: store.google.com
- 20. More about UX design on Wear OS https://youtu.be/fZpVlbzlvuY
- 21. Creating a Wear OS App in an existing project 🔥
- 22. Conference app - Confetti Features of the Mobile app: - Shows upcoming agenda - Shows details of each talk - Shows speakers and their details - Searches for Talks - Adds talks to favourites Features of the Wear OS app: - Checks favourite talks - Shows upcoming agenda. https://github.com/joreilly/Confetti
- 23. Wear OS app architecture
- 25. Creating a Wear OS module in existing app - Just add a new module!
- 27. Imports
- 28. Compose for Wear OS androidx.wear.compose:compose-foundation androidx.wear.compose:compose-material androidx.wear.compose:compose-navigation Wear Compose : https://developer.android.com/training/wearables/compose Note: You can’t include both compose-material and wear-compose-material libraries in the same module
- 29. Horologist //Composables com.google.android.horologist:horologist-compose-tools com.google.android.horologist:horologist-compose- layout com.google.android.horologist:horologist-composables //Media com.google.android.horologist:horologist-media com.google.android.horologist:horologist-media-ui //Audio com.google.android.horologist:horologist-audio // And many more Horologist: https://github.com/google/horologist
- 30. Creating a UI of our app
- 32. Cards @Composable fun SessionCard(session: WearSession) { TitleCard( onClick = { }, title = { Text(text = session.title) }, time = { Text(text = session.startTime)} ) { Column { Text(session.room) Spacer(modifier = Modifier.height(8.dp)) Text(session.speakers) } } }
- 34. ScalingLazyColumn @Composable fun SessionsList(sessions :List<WearSession>) { val state: ScalingLazyListState = rememberScalingLazyListState() ScalingLazyColumn(state = state) { items(sessions.size) { SessionCard(sessions[it]) } } }
- 35. ScalingLazyColumn @Composable fun SessionsList(sessions :List<WearSession>) { val state: ScalingLazyListState = rememberScalingLazyListState() ScalingLazyColumn( state = state, flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(state = state), scalingParams = ScalingLazyColumnDefaults.scalingParams( edgeScale = 0.5f, edgeAlpha = 0.2f, minTransitionArea = 0.7f, maxTransitionArea = 0.8f) ) { items(sessions.size) { SessionCard(sessions[it]) } } }
- 36. Rotary input Pixel Watch Crown Galaxy Watch 4 & 5 Virtual Bezel Galaxy Watch 4 Classic Physical Bezel
- 37. Crown (Rotating Side Button) - Doesn’t produce any physical haptic - it should be simulated with haptic motors - Produces constant flow of scroll events from 1px to ~60px
- 38. Bezel - Has 24 clicks per full circle - Produces a fixed number of pixels per click ( 136px) - Physical bezel produces mechanical clicks, virtual bezel does not
- 39. Rotary input modifiers public fun Modifier.rotaryWithFling( focusRequester: FocusRequester, scrollableState: ScrollableState, flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(), rotaryHaptics: RotaryHapticHandler = rememberRotaryHapticHandler(scrollableState), reverseDirection: Boolean = false ) public fun Modifier.rotaryWithSnap( focusRequester: FocusRequester, rotaryScrollAdapter: RotaryScrollAdapter, rotaryHaptics: RotaryHapticHandler = rememberRotaryHapticHandler(rotaryScrollAdapter.scrollableState), reverseDirection: Boolean = false )
- 40. .rotaryWithFling
- 41. .rotaryWithFling import com.google.android.horologist.compose.rotaryinput.rotaryWithFling @Composable fun SessionsList(sessions :List<WearSession>) { val state: ScalingLazyListState = rememberScalingLazyListState() val focusRequester: FocusRequester = remember{FocusRequester()} ScalingLazyColumn( state = state, modifier = Modifier.rotaryWithFling(focusRequester, state) ) { items(sessions.size) { SessionCard(sessions[it]) } } LaunchedEffect(Unit) { focusRequester.requestFocus() } }
- 42. .rotaryWithSnap We expect to move by 1 item with each click of a Bezel
- 43. .rotaryWithSnap @Composable fun SessionsList(sessions :List<WearSession>) { val state: ScalingLazyListState = rememberScalingLazyListState() val focusRequester: FocusRequester = remember{FocusRequester()} ScalingLazyColumn( state = state, modifier = Modifier.rotaryWithSnap( focusRequester, state.toRotaryScrollAdapter() ){ items(sessions.size) { SessionCard(sessions[it]) } } LaunchedEffect(Unit) { focusRequester.requestFocus() } }
- 44. Curved elements
- 46. PositionIndicator .. val scrollState = rememberScalingLazyListState() PositionIndicator(scrollState = scrollState) ..
- 48. TimeText @Composable fun TimeTextWithStatus() { val leadingTextStyle = TimeTextDefaults.timeTextStyle( color = MaterialTheme.colors.primary ) TimeText( startLinearContent = { Text("In 1 hour", style = leadingTextStyle ) }, startCurvedContent = { curvedText("In 1 hour", style = CurvedTextStyle(leadingTextStyle) ) }, ) }
- 49. Curved elements @Composable fun CurvedSample() { CurvedLayout() { curvedColumn { curvedComposable(CurvedModifier.size(250f, 10.dp) .background(Color.Yellow)){} curvedRow(CurvedModifier.padding(radial = 4.dp)) { curvedComposable(CurvedModifier.size(90f, 10.dp) .background(Color.Green)){} curvedComposable(CurvedModifier.size(90f, 10.dp) .padding(angular = 16.dp) .background(Color.Red)){} } } }
- 50. Connecting PositionIndicator with TimeText and with ScalingLazyColumn
- 51. Wear OS Scaffold vignette package androidx.wear.compose.material ... @Composable public fun Scaffold( modifier: Modifier = Modifier, vignette: @Composable (() -> Unit)? = null, positionIndicator: @Composable (() -> Unit)? = null, pageIndicator: @Composable (() -> Unit)? = null, timeText: @Composable (() -> Unit)? = null, content: @Composable () -> Unit ) {...} TimeText positionIndicator
- 52. Wear OS Scaffold val scrollState = rememberScalingLazyListState() Scaffold( positionIndicator = { PositionIndicator(scrollState) }, timeText = { TimeText(Modifier.scrollAway(scrollState)) }, ){ ScalingLazyColumn(scrollState){ // Main content } }
- 54. Navigation Navigation in Wear OS app Navigation in Mobile app Days Talks Description
- 56. Navigation with SwipeDismissableNavHost val swipeToDismissBoxState = rememberSwipeToDismissBoxState() val navController = rememberSwipeDismissableNavController() SwipeDismissableNavHost( navController = navController, state = rememberSwipeDismissableNavHostState(swipeToDismissBoxState), startDestination = "Start" ){ composable("Start"){ // Content here } composable("Details"){ // Content here } }
- 57. WearNavScaffold Navigation with scaffold and with swipe to dismiss! import com.google.android.horologist.compose.navscaffold.WearNavScaffold val navController = rememberSwipeDismissableNavController() WearNavScaffold( navController = navController, startDestination = "start" ) { scrollable("start") { SessionsList(it.scrollableState, navController) } scrollable("details") { // Details } }
- 59. Data synchronization Watch Phone Cloud data Wifi/Cellular Https request https://d.android.com/training/wearables/data/network-access
- 60. Some suggestions
- 61. Adding a Tile Codelab: https://d.android.com/codelabs/wear-tiles#0
- 65. Summary Today we have learned - Why we need a wear OS app - What compose components we have for Wear OS - UX and navigation - How to create a Wear OS app for existing Android app
- 66. That’s it! Thanks for watching! @kpeved Join our Compose-Wear Slack channel! https://kotlinlang.slack.com/archives/C02GBABJUAF
Editor's Notes
- Thanks everyone for joining this talk. Our session today is called Creating your first Wear OS app with Compose
- Briefly about me My name is Misha and currently I’m working as a Software Engineer at Google. I work in a “Compose for Wear OS” team and I have been here for the past 2 years. Overall I have 12 years of Android experience. I started my path from Android 2.1 and 27 apis later I am still doing it. I have a Twitter so you can ask me anything there anything if you have any questions.
- Question: How many of you have smartwatches? And how many of you have Wear OS watches? If many -> Wow, so you are definitely in the right place So, today we’ll talk about Wear OS. We’ll start with What is Wear OS Then we’ll talk about what is a wear OS app We’ll see what are the Differences between Mobile and Wear apps And after that we’ll try to design and develop a Wear OS app by using Compose for Wear OS and Horologist. I really hope that at the end of this presentation you will be more confident with a Wear OS and you will be motivated enough to build your own app. // - libraries which we’ve been working on . The main goal of this talk is to explain what is a wear app, why you might need one, what advantages you can get by having it, and how to develop a wear app for existing mobile app. Also go through Wear compose components, best guidelines on wear and design differences All of that should persuade you, android developers, to enter the world of wear apps.
- So what is wear OS? The Wear OS is an operating system for smartwatches which is based on Android. Simple It’s been here for a while and recently received an update for Wear 4, now in preview, to which selected devices will be updated. Wear 4 is based on Android 13 api 33. So for Wear OS development you have to use the same SDKs as you would use for Android, no additional sdks required
- So you may well be asking yourselves - why do I need an app for Wear OS? Wear OS is actually a very fast growing platform - 5 times is the growth in active devices since the launch of Wear OS 3. //So there’re 5 times more active devices now than there were in the middle of 2021 - that’s when the Wear OS 3 was launched.
- Other reasons might include Having a Wear OS app increases user engagement - case studies from other developers show that people who use the app on their watch tend to use this app more often on the phone. It’s Low engineering investment - creating a wear os app now became much easier with our set of libraries. Today we’ll talk about it and you’ll see how easy it is to do it with compose. And Wear OS provide Unique User Journeys - these are the things which users can do on the watch (but can’t otherwise). They might be very different from what you may have on the phone. For example -> NEXT SLIDE
- For example - the fitness app. Fitness app might help you to track your workouts on your wrist by also measuring your heart rate and cadence. Watch is more convenient in a lot of situations, for example running! // You just wound’t get this data from your phone. //You kind of can do that with a phone, but as a marathon runner I can declare that there is no enjoyment like running with a watch
- Another user journey might be a Media app. You can download some playlists on your watch and go for a run without even taking your phone with you. //You might also use a voice assistant for switching a track while you’re busy.
- Or the messaging app. No need to lift and unlock your phone for answering the messages. You might also reply with a voice message or quickly send a predefined short message from the list Those are just simple , and probably obvious examples of user journeys, but you can always find your own unique one.
- Now that we know why we might need a wear OS app Let’s briefly talk about the app itself. Wear OS app consists not only of the traditional app, but might have different surfaces as well
- We’ll start with a Watchface. Watchface is the main screen which user sees while interacting with your watch. //And it can show not only the time, but a lot of other useful information as well. Watchface has slots ,which can have complications , like small widgets. They can show the weather, the number of steps, the current heart rate, whatever you want - this information can come from your app and can be regularly fetched. //You can design complications along with watchfaces, so they will fit the watchface design. //As you see in example on the left, the complication is actually takes the whole circle around the screen.
- By swiping left and right from the watchface we’ll go to the list of Tiles. It’s like a horizontal pager. Tiles are just the screens, full screen pages which show specific pieces of information. Like shortcuts for workouts, or meetings which you might have in the next hour. // A tile runs as a part of the system UI instead of running in its own application container, so tiles will use less energy than apps. By clicking on the tile the app will open through a deep link. As tiles provide very fast access to the information, we recommend that you build at least one tile for your app. We’ll not cover tiles in this session, but we’ll see one specific tile for our app later.
- As a phone or a tablet, a watch can also receive notifications. And notifications play a very crucial role in Wear OS , as they provide a very fast access to the glanceable information and it’s one of the most used things on the watch. Notifications on Wear OS use the same APIs and have the same structure as notifications on phones. They can have the same customization and can be expandable Note that notifications are also received on the watch without Wear OS app thanks to bridging. You can receive them directly in Wear OS app and they will not be duplicated. You can read more about it in our notification guide
- And finally, we have Wear OS apps. Wear OS app is similar to the app which we have on other Android devices. It’s shipped as an apk and has the same package structure //But even though it’s almost similar to the mobile app, there are some differences and things which you should be aware of while developing it. // In this talk we’ll be talking about wear apps specifically, without touching watchfaces or complications.
- We just briefly covered the surfaces of Wear OS. There is more information about the current state of the Wear OS, so you can you also check this session from last year’s droidcon, where Ataul and Yuri discuss the Wear OS in more detail.
- Now that we know why we might need a Wear OS app and its surfaces, let’s see which differences we have between Mobile and wear OS apps
- The interaction with a smart watch is much shorter than with a phone. Smartwatches have shorter and more frequent sessions, whereas phones have longer and rarer sessions. On average the Phone session lasts around 4 minutes, whereas Smartwatche session is only 5 seconds long. So we really need to make the most of this time. Apps should be glanceable by the design and easy to follow. Introduction to UX Research & Product Inclusion on Wear OS
- Another difference is the obvious one, the size and the shape. Phones have more screen space and they can fit more content into them. However, on the watch the space is very limited, so we have to show only relevant information. The screen is also round on the watch, so we have to adjust the content accordingly.
- Phones have much more powerful chips, they have more ram and bigger batteries ( much bigger batteries!) than the watches. We just can’t do the same complicated things on the watch that we can do on the phone. The battery drain is also a big issue on the watch, so apps should minimize it and prioritize performance efficiency. For example - we should always use the dark theme on the watch as the screen drains a big amount of battery power. That will actually be a necessary requirement for a Wear app as from September 2023.
- You can check more about the design principles on Wear OS from our youtube videos where we explain them in a detail. Those videos are relatively short and fun so I would recommend to just take a picture and watch it later
- Keeping all of that in mind, like why we might need a wear OS app and what the differences are between a phone and a watch, let’s try to create a Wear OS app for an existing Mobile app. What we will do is look at the existing Conference app, and see how we can create a wear app for it.
- And we’ll take a look at the app called confetti - a simple open source app which shows a list of talks for a specific conference. It’s also has this conference so it might be very useful for you all. Let’s explore this app and see what we’re dealing with. We can choose the conference and then see the list of talks. At the bottom we have a navigation bar so we can go to other sections of the app. We also can click on the talk and see the details of it. Overall we can say that this app has those features: Show agenda for specific conference Show details of each talk Show speakers and their details Search for Talks Add talks to your favourites. Favourites are synced through the Firebase. Now we have to think about what will make sense for our Wear OS App? The general rule is that we need to think about the most important features of our app, which make sense on the watch and can be quickly completed. Do we want to see a list of Speakers? probably not very necessary. Todays Agenda? Probably yes, for exploring upcoming sessions. Searching through talks? Nice to have but not really important. I think what might be important is Favouries I would really like to see the selected talks, which are very interesting to me and I chose them, on my watch once they’re approaching. So we might say that the main features which we want in our app are: Check favourite talks Show upcoming agenda. We significantly simplified our app features and left only the most important ones.
- Let’s start creating our app and we’ll start with architecture. What we’re looking for is to create a new app with a little effort as possible. And for that Modularized approach fits perfectly for our needs. // You can use the same as you have in your mobile app.
- If we look at the abstract scheme of an existing app with a good modularised architecture, we’ll see that new wear module fits perfectly into the existing structure. We have just added a new module and we can share all the necessary data and feature modules with it. This is another advantage of modularized architecture - you can share modules between apps and you can have multiple apps. And that is what I meant by the low engineering cost
- In order to add a new wear OS module you just need to click new -> module -> select Wear OS -> and basically our wear OS app is ready.
- There is a nice lightening talk from AndroidDevSummit which explains what is a good android architecture. Worth checking it as well for getting a better understanding on how to properly modularize your app.
- We definitely need to use some specific libraries for Wear OS development.
- To ease the process of creating a wear app we have a “Compose for Wear OS” set of libraries. The libraries that we have are: compose foundation with contains all fundamental components for Wear OS app. compose material which has Material specific components based on Material design. And we have the compose navigation library for navigating on the watch. Navigation on the watch is a little bit different from the mobile and we’ll cover it later. Note that You can’t include both compose-material and wear-compose-material libraries in the same module. We recommend that for wear os app you use only Wear-compose-material library. That also applies for Navigation.
- We also created another set of libraries called Horologist. It’s a github project which has a lot of usefull components that are not yet in the Wear Compose toolkit. In some way Horologist is similar to an Accompanist library for Compose. We have additional components in composables library, compose layouts, we have libraries for working with media on the watch, audio , and many more. You can chek all horologist libraries on the github.
- Let’s start with basic UI elements, which we might use in our app
- And the most basic element of our app will be the Card. The Card component contains content and actions about a single subject. They are similar to what we have in compose Material. In Wear compose we have an additional set of cards with predefined slots, which accept different composables. For example in AppCard we have slots for the icon, app name, time, title and content In the TitleCard we have the Title, time and content. We can also add a custom background to our card - and that’s how the image card is made
- For our app we will use a TitleCard, as it already has a title, time and content slots That’s how our card might look like. We place the title in the title slot, startTime in the time slot, and the room and the speakers in the content slot
- Now we want to show all of our sessions in a single list of cards. We might use a LazyColumn for that as we do in a mobile app, but on the wear OS we have a specific element called ScalingLazyColumn. You might see that it adds this nice scale-down and fading effect on the edges, so it feels like you are scrolling through the rounded disk.
- Adding ScalingLazyColumn is very similar to adding LazyColumn. We just have to create a scalingLazyListState with a rememberScalingLazyListState function, add it to the SLC and put all items inside of the content. And that’s what our list will look like.
- However, we can customize ScalingLazyColumn and do something like this! By using custom flingBehaviour we added a snapping to the center, and by changing scalingParams we made the central item to stand out. Pretty cool, heh? But those lists can be scrolled not only with a touch, but with a rotary input as well.
- And the Rotary input is a thing which makes the feeling of the app Premium. The majority of the Wear OS devices have some kind of a rotary input. Basically there are 2 types - Crown and a Bezel. Note that we also have devices with no rotary.
- You can find a crown or Rotating Side Button on such devices as Pixel Watch , Fossil Gen 6 or other. The crown itself freely rotates and doesn’t produce any physical haptics on its own - those nice haptics which you feel are done throught the haptic motors and added separately. It produces a constant flow of events when rotated - from 1px to 60 or sometimes even more if you rotate it very fast. During a rotation of the crown we expect the list to be scrolled by exactly this amount of pixels
- There is another input device - Bezel . Bezel is different from the crown because it’s a discrete device - it rotates around the screen and produces 24 clicks per full circle, with exactly 136px each. You can only find the Bezel on Samsung GW devices . Bezel can be virtual- like a part of the touch screen - or physical. A physical bezel produces mechanical clicks, but for the virtual they should be simulated with a haptic. // The only device with a physical bezel is the GW4 Classic. So, all of it looks pretty complicated, like Bezel, virtual bezel, crown - how do we handle all these types of input and make scrolling look nice, responsive and premium, on the same app but across all of these devices?
- Good news that we have a solution for that - modifiers which connect rotary to the scroll of the list and work for both the Crown and the Bezel inputs. We have 2 modifiers - rotaryWithFling, and rotaryWithSnap. You can find those modifiers in Horologist library. By default there is no rotary input in ScalingLazyColumn, so we have to add it separately with those modifiers..
- That’s how RotaryWithFling will look like. In general, fling is a gesture which receives a velocity and gradually slows down the scrolling RotaryWithFling will produce a nice fling after you finish scrolling. It looks almost identical to the finger scroll.
- And that’s how we add it. We just need to add a focusRequester, add a modifier to our ScalingLazyColumn, and request the focus.
- Another gesture is snap. That’s how rotaryWithSnap will look like. This modifier allows you to snap the items to the centre of the screen. During the rotation we have a small resistance before we do a snap, and then we continue snapping to the next items.
- And that’s how we add it Compared to the rotaryWithFling, you just need to use state.toRotaryScrollAdapter extension function, and the rest stays the same.
- Now let’s talk about curved elements
- Specifically for wear we created a set of curved elements, like PositionIndicator, TimeText, ProgressIndicator and more. Those elements were designed to fit onto curved screens. They do help to save the round screen space, and also look nice. For our conference app we definitely need TimeText and PositionIndicator.
- Let’s start with PositionIndicator. It’s very easy to implement this compOnent. What you need to have is a ScalingLazyListState which you pass to a PositionIndicator.
- Adding timeText is even easier. By default it’ll get the current time and a system locale for proper formatting.
- We might though add some additional information to the TimeText. For example we might add a timer before the next talk or something similar. As you can see, we use a startCurvedContent slot for that with a curvedText item in it. There we specify the text and a curvedTextStyle for it. This is pretty different from what we would do for normal text, right?
- The thing is, we have a whole curved world created for curved elements, which you can find in a compose foundation library for Wear OS. Everything starts with a CurvedLayout, inside of which we can set curvedColumn, CurvedRow or CurvedBox containers. We can also specify paddings in angles and rotate the content around the centre But let’s get back to our app.
- Those UX elements which we briefly covered, should be connected together. We already know how to connect PositionIndicator with a ScalingLazyColumn, we also expect the timeText to be scrolled away once we start scrolling down the list so that it won’t interfere with other content.
- For that we’ll be using a Scaffold - a component which helps us to coordinate those components and layer them correctly. //We also have other components here like vignette - a component which blurs the screen edges a little bit. The scaffold though does not bind those components together - for that we’ll have to use the hoisted state above the Scaffold //Though the scaffold looks very convenient, we still need to connect those elements together. Like the TimeText should be scrolled out of the way when the list is scrolled, or position indicator should change its position.
- And this is how we’ll do it- we’ll create a Scaffold, add a PositionIndicator in positionIndicator slot, timeText in timeText slot, add a ScalingLazyColumn as a content, and connect them all together with the hoisted state. Note that for TimeText we’ll use additional scrollAway modifier, which does exactly what is says - it scrolls away the TimeText when we start scrolling ScalingLazyColumn. We can make this code though even simpler by using another Horologist component at which we’ll look shortly
- Now that we know how to create a scrollable list with items, Let’s try to look at Wear OS navigation and see how it’s different from Mobile.
- On mobile our navigation can be heavily branched - we can go from any place to any place. We can have hamburger menu, bottom navigation, etc etc. On wear OS the navigation is much simpler - we want to have a navigation with as few layers as possible. Studies show that the deeper the information is, the less chances the users will get there. So we recommend to limit the number of navigational layers to a minimum. Guide for UX https://developer.android.com/design/ui/wear/guides/surfaces/apps
- Another big difference between Mobile and wear is back navigation. On the phone we have a back button or a system gesture to go back. On the watch we don’t have that- instead we have a swipe to dismiss gesture, during which we drag the foreground component which shrinks and then scrolls away to the right
- The good news is that we can have a back navigation right out of the box in Wear OS navigation - SwipeDismissableNavHost is doing exactly that. Its usage is very similar to the NavHost navigation in compose - there is the same concept with destinations and navHost states.
- But we can make things even easier - as I mentioned before we can connect all Scaffold elements together along with Navigation and with SwipeToDismiss . And for that we have a WearNavScaffold from Horologist library. We specify navController, pass it to WearNavScaffold, create a scrollable ( which is similar to composable in NavHost navigation) , which connects a scrollableState to TimeText and PositionIndicator, and then we just add it to our ScalingLazyColumn and everything gots connected!
- Another important part of the app is Data synchronization. In the end we want to show the real data about the conferences in our app and we need to get it from somewhere
- And the easiest way to do that is to request the data directly from the network. What happens underneath is that the phone is used as a proxy between the watch and the network. When we make a request on the watch, it proxies through bluetooth to the phone and then goes to the network. So we have the cloud as a single source of truth and shouldn’t worry about synchronization between a watch and a phone, because both of them get the same data from the network. Watch can also connect directly to the wifi or cellular network (when the phone is not connected)- and then it might exchange the data directly with the cloud bypassing the phone.. There is no difference for developers how network requests are handled.. You just send the requests and the system automatically handles it. However if you really need a high bandwidth for some data, you can explicitly request Wifi connectivity. Note that Wifi or Cellular consumes much more energy than Bluetooth. You can read more about connectivity by following this link. // We recommend that Wearable apps send and sync data directly from a network or connected phone. Instead of sharing data between your watch and a phone, it’s better to send data directly to the network through the phone - that’s how you’ll have less entities to worry about. Standalone app is better than A good infographic https://developer.android.com/training/wearables/data/data-layer#connectivity
- So our conference app is almost ready. We know how to show the UI, we know the basics of navigation and network requests. Let’s see what other nice things we might add to our app.
- It would be great to have a tile. Tiles will help our users to get the most important information right from the System UI. We can have a tile which will allow our users to quickly check the upcoming bookmarked sessions without opening our app. You can check this codelab which explains how to add a tile very well. //Consider adding a tile for your app. Tiles will help your users to get the most important information at a glance. In the case of our app, we have a tile which shows the upcoming sessions and a shortcut to bookmarked sessions .
- As we noted previously, watch is not the most powerful device in the world, so we need to optimise the performance of our app, especially if it uses compose. One way to do that is to use Baseline Profiles . I recommend that you check more about Baseline profiles in this youtube video. // Baseline Profiles is a list of classes and methods, that are Ahead of time compiled at app installation on your device. This helps the app, especially on the Watch, to speed up the start up time , reduce the jank and improve performance. I recommend that everyone uses Baseline Profiles. You can read more about Baseline Profiles following this link
- That’s what our final app looks like. This is a real app which already exists and you can already download it. This app is a little bit more sophisticated than one which we designed. We have bookmarked sessions at the top, and conference days below. We can click on the day, then on the session and then check the session description. It might also be useful for you at this conference so you can check it out. Worth trying this app, especially if you have a Wear OS watch.
- Regarding the developer documentation for Wear OS - I highly recommend checking this link. This is an entry point for all Wear OS development, where you can find almost everything regarding Wear OS.
- And let’s summarize what we have learned today. Now we know why we might need a Wear OS app, We are aware of compose components which we can use on Wear OS And we know how to create an app for an existing app. And I hope that now you know more about wear OS and developing a Wear OS app doesn’t look very scary or pointless to you.
- And That’s basically it ! But just before you go,. We have a Wear Compose Slack channel, were you can ask anything regarding the Wear OS. We’re replying quickly and already helped a lot of developers building nice Wear OS apps. We always open for new suggestions and always looking for a feedback. Or you can ask me anything on Twitter. Thanks for watching!