[Music] hi i'm maya conrado and i'm a product manager for wear os today we're going to talk to you about the new developer preview of compose for wear os specifically we'll walk through what's similar what's different and what's new in this version of compose so you can quickly develop your own beautiful apps with less code there are many reasons why compose for wear os will be helpful the components are compliant with material u guidelines out of the box meaning you can more easily follow the design guidelines compose for wear os is currently in alpha and
has released a number of updates since we teased at io we are now ready for a developer preview and want to incorporate your feedback into the early iterations of the libraries before the beta release we expect you to have a little bit of knowledge about compose as we go through this talk but don't worry if you don't understand everything we'll have resources at the end to help you learn at your own pace but before we can dive into compose itself let's talk at a higher level about the differences between wear os and android mobile development
for any of you not familiar with wear os as a recap we recently launched a new version of the platform with some major improvements to the wear os experience but that didn't change the fact that the new version of wear os is based on android as before and is optimized for the wrist one of the benefits of compose for mobile is that it works across many versions and api levels of android similarly compose for wear os will work on wear os 3 which is api level 30 but also on the wear os 2 watches out
there and just like mobile compose for wear os is part of the jetpack library and just like the other where jetpack libraries you use it helps you write better code but let's look a little higher at some of the fundamentals of wear os app architecture you may not realize it but when you are developing for mobile you are actually targeting more than one surface first the app surface which in the old world has ui powered by fragments activities and views in the new world of compose the uis are powered by composables so you know all
that and are used to that but you are also developing for another surface notifications and that's going to be when you want to alert your user of some important information outside of your app or let them continue something they may have started in your app like tracking a run or playing music finally if you're using widgets that's another surface where you can provide information to users wear os is similarly comprised of multiple surfaces that you would want to target when creating a full-fledged wear os app experience first is the overlay which is basically just like
the app on mobile previously composed of activities views and fragments but now by composables it is well suited for longer or more complex interactions notifications also follow the same principles as mobile development then there are two new surfaces complications which provide predictable glanceable access to information directly from the watch face when tapped complications usually direct to the corresponding app experience however they can also perform a self-contained action like a water count complication changing the number of glasses you've had during the day finally tiles give users fast access to information and actions with more space to
display content they are reachable by swiping in either direction from the watch face but for this session we are focusing on overlays or the phone equivalent of an app as this is where all of the views or in this case composables will live now on to the good stuff we'll quickly demo a number of wear composables to give you an idea of how they work and how they are similar to mobile before diving into more complex composables but before we can cover any composables we need to make sure we have the right dependencies and the
dependencies are going to be a little different from mobile compose let's look at mobile first on mobile you have the main set of dependencies material foundation ui runtime compiler and optionally you have navigation and animation well what about where first let's talk about what's the same on where you can use the same ui compose dependency as you would in mobile and the runtime compiler and animation dependencies are all the same a lot of the other stuff is the same too like the tools and the compose philosophy like data down events up okay so what's different
first replace material with wear compose material while it's technically possible to use the mobile material it is not optimized for wear and wears unique requirements so we always recommend you replace it with the wear equivalent the other material dependencies outside of that can still be used for example you can use material ripple and material icons extended next include the wear foundation dependency this one's additive so you can use it with the mobile foundation dependency if you want to finally if you are using navigation replace it with the wear navigation equivalent for the same reasons you
would with material it's optimized for the watch now jeremy's going to walk you through where material where many of our new composables can be found hi my name is jeremy walker and i'm a developer relations engineer at google the compose wear os material library offers many of the same composables you've grown used to on mobile but optimize for the watch and as with mobile you can override the material theme and customize your colors typographies and shapes let's dive into our first where composable alright buttons are compact elements that allow users to take actions and make
choices with a single tab here are a couple examples from the library while these look different from the mobile equivalents the code is actually the same let's have a look first you have the button the composable just like is before uh next you have a bunch of parameters you're used to the modifier that's going to be on everything you have on click same enabled uh in this case i have enabled state all right let's say you want to add an app icon so um this is just the same as it was before on mobile you
just set a painter content descriptor and a modifier so the code is is exactly the same as you do on mobile let's see what the results look like all right so here you have a nice little button and now you use the same code but it's optimized for wear os and with just a small amount of edits you can really vastly change what it looks like as well here are some other examples all right let's jump into another one cards take content and actions about a single subject and have a lot of flexibility as you
can see from the examples here on the left we have an icon and some text you can have just text and then on the right we have an image as the background so we actually have two main cards we have the app card and then we have the title card which is more focused on text but we're just going to focus on the app card in this case i'm just setting an image then i'm going to set some text i'm just setting a text composable on all these in order i'm not going to go through
all them but you can see pretty straightforward i have an on click finally i'm going to set the body in this case i'm setting a column and a text as well i could add another text if i wanted to but i'm just going to use one here so again this code is uh pretty similar let's have a look at what it looks like so there's a nice card optimized for wear os and you and same thing here you can make some slight modifications and get different beautiful looking cards all right chips chips are actually specified
in our material guidelines but there isn't one in the mobile material library they are meant for quick one-tap actions which makes especially good sense for a wear device and limited screw screen real estate uh here's a couple variation of chips to give you an idea of what you can create but let's let's look at some code so the chip it's pretty straightforward nothing out of the ordinary the parameters those are going to be similar again these are stuff you usually set on other things i'm going to just set a label we have one minute yoga
which is about right for me and then we're going to set an icon so again pretty straightforward stuff and this is what it looks like again with a little bit of variation you can make all sorts of different chips okay let's have a look at another one so this is toggle chips this is similar to chips but it allows the user to use a radio button a toggle or check box so that idea like on the left you can disable the sound by just one tap and turn it back on and then on the right
we actually have split toggle chips which offers two different tappable areas one on the right to turn off the thing and then maybe on the left it taps into the app so you could maybe you want to edit your your alarm here but on the right you turn it off so let's look at some code so again toggle chip pretty straightforward you set some parameters this is just going to be similar to what you're used to with the other composables i just showed i'm just going to set a label for sound this one will turn
on and off sound and let's see what that looks like all right so we have a nice sound um toggle chip here to turn off the sound and again with a little bit of variation you can have all these options okay at this point you're probably seeing a pattern many composables are the same as what you've already used on mobile and the new ones well they're so familiar that you're they're almost the same in other words most of the work you've done to learn compose well now you have it on wear os which is great
because compose is fun right okay let's look at another one i really like so curved text is optimized for the round screen because obviously it's important for a round device time text is another option which basically under the hood uses curved text but takes care of all the time for you so you do not have to mess with any time related classes which makes me super happy actually our material guideline calls that you keep the time at the top of your screen within the app or overlay experience and if you're actually using the where's scaffold
then that takes care of it for you and i'll talk a little bit about that later but let's have a look at it so first i'm going to actually create some text that i set before my time so i do that first next i create the time text composable i i want to specify the leading curved content and what that means is this is the text that will show before the time right and because it's curved this will only show for curved around devices uh in this case i'm actually using under the hood a basic
curve text i set the time next i do a linear content so this will be for a square rectangular device i just want to use a regular text there but i still want that to be in front now there's other options you could put the text behind um you can add a separator if you want i'm just keeping it simple and doing it on the front here and this is what you get you can see i have eta that's the text i created and then the time and the best part i didn't have to mess
with any time glasses and if this was on a square device then it would show up nice on a square device as well all right let's talk about lists so list lists contain a continuous vertical set of elements blah blah blah you already know this everyone uses lists everywhere but it's a little bit different on wear os so on the top and the bottom of the screen there's less space right so a material design introduced scaling and transparency um with the new scaling lazy columns so this helps you view lists in a small space so
let's have a look at that so this is an example to show exactly what i'm talking about so you can see the element as it comes up it gets bigger and becomes more opaque and then as it goes away it gets smaller and it kind of disappears a little bit and that's what scaling lazy column does for you here's an actual app where you can actually see it same thing kind of scales up and disappears and then it scales down and disappears as well which is really nice and helps with readability all right so scaling
lazy column should be your default for um any app on wear os it obviously gives you the scaling and transparency effects i just talked about but also it handles a large number of items so you're probably guessing by the name scaling lazy column that it was built with lazy column and you'd be right you get all the advantages of lazy column which for instance when you have a long list like what we see on the screen there you only can view a small portion of it so lazy columns can do all those optimizations and only
compose what's needed on the screen at the time so you get all that for free and the nice scaling and transparency features all right let's look at some code so you're used to setting state anyway for your lazy columns same thing here except you use the different name remember scaling lazy list state that's kind of a mouthful but it explains exactly what it is pretty well next you create a scaling lazy column just like you would a lazy column and you set your parameters these are all the same modifiers vertical arrangement and then you set
the state after that you set the content and this is exactly the same items are supported in item so whatever you want to do here and that'll give you something like this uh with no extra work which is great okay now we want to talk to something else you're probably familiar with box so as a reminder a box uh is basically a container for your screen you can use it on mobile but we have our own and it's called swipe to dismiss box and this is going to be for your layout so you're probably guessing
from the name swipe to dismiss this means swipe to dismiss pretty straightforward so on um where actually uh one of the gestures the main gestures is swiping and that will go back as if it's the back button so in this case um this is supported for you out of the box so let's look at some code so what's different from box on mobile is you actually have to have state so you'll use a remember swipe to dismiss box state you create the composable with swipe to dismiss box in this case you pass in the state
um you'll get a boolean back which is is background and what that means is it's in the process of swiping away so you can actually render different things based on that so in our case we'll render a different color just so you can see it um if you're using any sort of navigation you probably want to show the screen that was before the current one they're swiping back from um and in this case i'm just setting a column with some text i could add more but we'll keep it simple so this is what it looks
like and also there's a bunch of other options you can do we have launch stuff with launched effect you'll want to use that with navigation if you're doing your own under the hood but check it out i don't have time to go into that but we'll cover it in the docs okay we have two things left we're going to talk about scaffold and navigation let's start with scaffold so scaffold it's easy to make sure your components are properly positioned and work together correctly while following the basic material design layout structure uh for instance with mobile
it provides slots for the most common top level material components so like top bar bottom bar um floating action button all that stuff in this case if we look at this mobile app you can see it has a bottom bar if you had a drawer you could swipe left and see a drawer menu if you wanted to this the scaffold handles snack bars it makes it a lot easier for you and then obviously you'd have your content in there and the idea is that some of that stuff is kind of above your your screen so
as you change those out that stuff stays more the same obviously you can customize a little bit but for the most part it's staying the same well we have the same idea with where but we only have three main ones outside of the content we have time text which is pretty straightforward you've already seen time text that's going to give you your time at the top of the screen it's going to place it for you which is nice next we have vignette which is not gives you a nice vignette around the screen it's kind of
hard to see here but you can imagine a nice vignette you get around the screen and then finally we have position indicator this is also known as the scrolling indicator which lets you know where you are in the composable below so you're probably asking why do we put this in the scaffold well due to the curvature of the screen the position indicator needs to be centered on the watch not just centered on the viewport because otherwise it could be cut off like for example here you can see this is a playlist that part does not
move but the scrollable portion below it does so if we if we were set that to the viewport most of the scrolling indicator would be cut off so that's why we've moved that up to the scaffold level and then finally we have content all right before we move forward i'd like to just talk about the scaffold design first because that's important um it took me a little while to get my head wrapped around it but once i did it then i always want to make sure that i engrain this in people's heads so the first
thing you want to do is you it's you set your app you do your material material theme like you're used to doing for the look and feel of your app then you put your scaffold and then after that you put your content so if you if you're doing this on mobile this is it's the same thing same recommendation it's just below the theme above the content all right let's look at some code so in our example our content inside the scaffold is a scaling lazy column so we hoist its state up here to support the
position indicator let's look at that a little bit deeper so because the position as i've talked about a little bit earlier lives outside the content that means you have to hoist the state above the scaffold again this is because we just don't want it cut off on all the other screens especially if they don't take up all the sides there's some other benefits as well so you can check the scrolling state so maybe you make the time disappear when they're scrolling to get more screen real estate or you can even turn the vignette off and
on based on that scrolling state um by the way if you want to learn more um about state check out manuel's talk uh a composed state of mind it's it's really great and he'll explain a bunch of stuff about state and how it all works together and he'll touch upon the scaffold stuff okay so we've hoisted the state up for the position indicator by the way the position indicator supports many different options so uh for scrolling so in our case we're using a scaling lazy list but you could use a scaly sorry scaling lazy list
state but you could use a scrolling state a lazy list state and then we have some other cool stuff with rotating side buttons and rotating bezels there's basically lots of options so check out the docs um okay enough of that let's get on uh next you do your material theme and then you put your scaffold and then your content would go inside i won't spell that all out uh but again whatever you want to put is your screen let's look at the parameters save your modifier that's the same uh next we have time text so
you're used to the time text on your um that i showed earlier the same thing you just drop it right in there so we don't have to cover that uh vignette this one let's break it out it's actually pretty easy you set the vignette position in this case we're doing top and bottom and then finally we'll set the position indicator let's pull that out and see what it looks like in this case i'm looking at the state to see if it's scrolling so i don't show it unless it's scrolling and then here's the most important
part the position indicator itself requires the state and this is the main reason we hoisted that state up from that lazy column so we pass that in so there you go when you're scrolling the content you'll get a nice little scrolling bar and you have the time on the top and these will all stay visible when you're moving between um your screens well the scroll won't obviously but the time will and if you have a vignette that can as well all right so next and last we'll get to navigation all right if you remember the
earlier slide you remember that i mentioned you have to replace the navigation dependency with the where navigation dependencies so i just want to call that again technically you could still use the the mobile one but you're you're going to have bad time right uh and the where navigation one is optimized for well obviously for where all right so it's the same design as i talked about earlier with the scaffold and it's the same design as mobile so you have your app then you have your material theme then your scaffold and then normally on mobile you
put your nav host there but in our case because we're using the where where equivalent we use swipe dismissible nav host and you can probably guess from the name that that means it supports swipe away which is just like the box and then you have your content so it handles swiping i just said that and the nice thing is as you'll see is you get to raise your knowledge for mobile all right so let's look at some code so the material theme and the scaffold you set those just as you did before your navigation code
will go here in this case we create a controller we just use the specific one for the swipe dismissible version so remember swipe dismissible nav controller which is quite a mouthful but it's pretty it explains it what it is pretty well um then you use your swipe dismissable host you pass in the controller the start destination with a route and then you put your main screen content right here and in this case it's the same code that you used on mobile use composable and then you use it the same way to set your screens uh
and magic you'll have something like this where you can swipe away and it goes to the screen before so you can set all this stuff up all right let's let's recap so first uh we're we're in developer preview now we've had a lot of alpha releases and we're ready for your feedback compose make sure you set the right dependencies you want to replace material and you want to add foundation and if you are using navigation replace it as well all that knowledge you've built up on compose translates directly to where compose so you can build
beautiful uis fast just like the mobile alphas and the developer previews we want to include your feedback so make sure you give it to us which leads us to the last slide d.android.com where slash compose that's where you'll find samples code labs guides and most importantly where to send us some feedback so we can incorporate it i know your time is valuable so thank you so much for spending some of it with us happy coding thank you [Music] you
