[MUSIC PLAYING]
KSENIIA SHUMELCHYK: Hi, I'm Kseniia, a developer relations
engineer on the Android team.
Did you know that on average users
interact less than seven seconds during one session
with a watch?
In this talk, you will learn how to enhance
user experience using rotary input and help users to perform
tasks within your app.
There are three main sources of rotary input
on wearable devices.
First is a physical crown, also called rotating side button.
The other two are rotating bezels.
There is a physical bezel that rotates
along the outer edge of the screen
or a touch bezel that includes a circle or touch
zone around the screen.
Whilst interactions could slightly
differ among these types, your app
should utilize rotary input for certain use cases.
The first use case is scrolling through content,
which is default behavior that users expect from the app.
As content scrolls on the screen,
it's important to give users visual feedback in response
to rotary interactions.
For that, you can use position indicator
when scrolling vertically or page indicator
for horizontal scrolls.
Now let's see how you can implement
this using Compose for Wear OS.
Our app has a scaffold, and the content inside
is a ScalingLazyList filled with elements that
can be scrolled vertically.
Let's start with adding a scrollbar.
Scaffold provides a basic layout structure for wear apps,
and [INAUDIBLE] has a slot for scrolling indicator.
Because the position indicator lives above the content,
we need to hoist the state up above the scaffold.
To show the scrolling progress on the right,
we create a position indicator based on the list state object.
We can now see the scrollbar when
dragging our finger up and down, but not when using the crown.
Now, let's make the screen respond to rotary events.
Scrollable views, including ScalingLazyColumn,
already have scrollable state, so adding rotary input support
is super easy.
To receive rotary scroll events, the composable must have focus,
therefore the first step is to explicitly request
focus using focus requester.
The second step is to add onRotaryScrollEvent modifier
to intercept events that the system generates
when a user turns the crown or rotates the bezel.
Each rotary event has a vertical or horizontal amount
to scroll in pixels that can be processed dependent
on the scroll direction of the container.
The modifier also has a callback to indicate
if the event is consumed and will
stop even propagation to its parent in such case.
That's it.
Scrollable screen now handles rotary input
and shows scrollbar with progress.
The second use case is about rotary interactions
to adjust discrete values.
This can be used to control both single or multiple values.
For example, adjusting brightness in the settings
or selecting the numbers in the time
picker when setting an alarm.
Similar to ScalingLazy column, picker, slider, stepper,
and other input composables need to have focus
to get rotary events.
In case of multiple scrollable targets on the screen,
like for time picker, you will need
to keep an own focused requester for each target
and handle focus change accordingly
when the user switches between hours and minutes with a tab.
And lastly, your app can do custom actions in response
to the rotary input.
For example, to zoom in and out or to control volume in media
app.
As before, to receive events, your screen
will need to gain focus.
If your component does not natively support scrolling
or has no UI, like volume control,
you will need to handle scroll events yourself.
This can be as simple as creating a custom state
managing view model and a custom callback that
will be used to process rotary scroll events.
And finally, we'll use our callback
once we receive the events.
Sensitivity or different rotary input sources
could vary, producing different amount of scroll events
with fixed of loading links.
For smoother transition between values,
sometimes you will need to write limit
to sensitive events and snapping or animations for transition.
Otherwise, turn and speed won't feel natural to the users.
In Horologist, we all do provide implementation for advanced use
cases, so we get a lot of device-specific details handled
for you.
We have a modifier for scrollable components
and for discrete values, utilities to handle focus
based on the lifecycle of navigation events,
and audio UI library for volume control
implementation with haptics.
For testing, use wear emulator in Android Studio
to simulate rotary input events.
That's it.
For more information about building apps for Wear OS,
check out developer site and watch
for upcoming new features in Compose Wear OS and Horologist.
Thanks for watching.
[MUSIC PLAYING]