Any of you want to plug this channel in #compose? Most people won’t notice it until then.

Any good Google or Community Wear Compose samples we can point to?

Super excited. Have been asking for this for years.

With Wear Navigation, what's the guidance for making a single large navigation graph with deeplinks, vs linking out to different distinct Activity's? Would something like settings be best as a separate Activity? Or does it cause any noticeable UX difference (backstack, ui transitions?).

Compose for WearOS Alpha08 was release last night - https://developer.android.com/jetpack/androidx/releases/wear-compose#1.0.0-alpha08. with links to some of the great UX Guidelines linked from the KDoc as well as improvements to SwipeToDismiss and some new samples again linked from KDoc - One API change to watch out for: We moved the body() of Cards to a trailing lambda.

Are there any components/styles etc to ensure that text isn't clipped like this?

How to use Rotary input for Column?

@John Nichol Looking at the material spec, the support for input chips with a delete button, seems to indicate a secondary action in Chip might be ok. Obviously the primary action is opening the detail view. Are there guidelines for Chips in Wear like that? How to have a secondary action like Download instead of Open/Play?

LazyListState

supports

scrollToItem()

but

ScalingLazyListState

does not. Is this something that might come in the future, or consciously omitted?

I know it might be a little early to ask, but is there a plan for betas/stable of Compose Wear? I’m trying to determine when I can start using it in production code.

Wanted to call out some regular mobile compose components that seem to just work Swipe to Refresh https://google.github.io/accompanist/swiperefresh/

A pattern I'm trying for compose previews

@Composable
fun MyAppThemePreview(
    round: Boolean = true,
    content: @Composable () -> Unit,
) {
    MyAppTheme {
        if (round) {
            Box(Modifier.fillMaxSize().background(Color.White)) {
            }
            Box(modifier = Modifier.fillMaxSize().clip(CircleShape).background(Color.DarkGray)) {
                content()
            }
        } else {
            Box(modifier = Modifier.fillMaxSize().background(Color.DarkGray)) {
                content()
            }
        }
    }
}

Wear Compose alpha10 is out - https://developer.android.com/jetpack/androidx/releases/wear-compose#1.0.0-alpha10. Only a week since the last alpha we released at Android Dev Summit, but it includes a new InlineSlider component and some improvements to SwipeDismissNavHost.

Is there a good sample of Ambient Mode with Wear Compose? Is it extend FragmentActivity or AppCompatActivity, use the Callback to set Ambient mode in a ViewModel state field and have a simplified UI code path when enabled?

I'm struggling with making the Compose equivalent of the ViewPager2 with the LazyRow. Is there a solution to this? This is the whole code snippet where you can see that I have tried out a few approaches:

@Composable
    private fun ListOfHomePages(rows: List<PageItemUIData>) {
        val listState = rememberLazyListState()
        val listScope = rememberCoroutineScope()
        val scrollState = rememberScrollState()
        var index by remember { mutableStateOf(0) }

        LazyRow(
            modifier = Modifier
                .fillMaxSize()
                .background(color = colorResource(id = R.color.black)),
            state = listState
        ) {
            items(rows) { item: PageItemUIData ->
                if (!listState.isScrollInProgress) {
                    listScope.launch {
                        listState.animateScrollToItem(index)
                    }
                    /*if (listState.isScrollingUp()) {
                        listScope.launch {
                            listState.animateScrollToItem(listState.firstVisibleItemIndex + 1)
                        }
                    } else if (listState.isScrollingDown()) {
                        listScope.launch {
                            listState.animateScrollToItem(listState.firstVisibleItemIndex - 1)
                        }
                    }*/
                }

                PageItem(
                    painter = item.painter,
                    iconContentDescription = item.iconContentDescription,
                    title = item.title,
                    backgroundGradientStart = item.backgroundGradientStart,
                    backgroundGradientEnd = item.backgroundGradientEnd,
                    backgroundGradientOffset = item.backgroundGradientOffset,
                    modifier = Modifier.onGloballyPositioned { coordinates ->
                        index = coordinates.positionInParent().x.roundToInt()
                    }
                )
            }
        }
    }

I'm pretty new to Compose too and don't understand how to run a coroutine just once instead of every composition...

Material (pre-compose) seems to have a well supported notion of custom typography - https://material.io/blog/android-material-theme-type Does this concept exist in compose Material (wear or mobile)? OR you should just follow the same approach with your own CompositionLocalProvider? Or generally people hardcode fonts inline and just use MaterialTheme for it's effect on Material widgets like Cards or Buttons?

Hello. I am composing the app using only composable in my application.   Currently, there is one stumbling block, and when composing a screen without scrolling in a circular wear device, there is a phenomenon that items overflow start and end. If composable is not used, it would have been solved by using boxInset or circular activity, but how can do this with composable?  If you look at the player screen of YouTube Music, you can see that texts are properly applied to the start and end of screens. Does wear composable have this function? Currently, I set a guideline using the length of the inscribed rectangle, and apply the item not to exceed the guideline. Please let me know if there is a better way.

BoxWithConstraints() {
    val absoluteValue = (maxWidth - (maxWidth / sqrt(2f)))/2

    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val absoluteStartGuideline = createGuidelineFromAbsoluteLeft(absoluteValue)

Is there any better way to add Text Input to Compose for Wear? I'm currently using a BasicTextField (seems to be the only thing available). The keyboard pops up (but flickers and you have to click it twice), but I don't get any text in the keyboard preview as I'm typing. If I exit the keyboard view, the text does appear in the UI and if I tap on the BasicTextField again, then the previously entered text will appear in the keyboard layout.

@Composable
fun TextField() {
    var value by remember { mutableStateOf(TextFieldValue("")) }
    val keyboardController = LocalSoftwareKeyboardController.current

    BasicTextField(
        value = value,
        onValueChange = { value = it },

        keyboardOptions = KeyboardOptions(
            imeAction = ImeAction.Done,
            keyboardType = KeyboardType.Number
        ),
        keyboardActions = KeyboardActions(
            onDone = { keyboardController?.hide() }),
        decorationBox = { innerTextField ->
            Row(
                Modifier
                    .background(Color.DarkGray, RoundedCornerShape(percent = 50))
                    .padding(12.dp)
            ) {

                if (value.text.isEmpty()) {
                    Text("Manual IP Address")
                }
                innerTextField() 
            }
        },
    )
}

I have an app where the navigation is on some occasions controlled by the state of a ForegroundService. At the moment, to make the screen navigate on a change to the state held in the Service, I use a

LaunchedEffect

that sits outside of the

NavHost

. You can see this here: https://github.com/garanj/wearwind/blob/main/app/src/main/java/com/garan/wearwind/FanActivity.kt#L115 So when the watch successfully connects to the fan, the screen transitions to the Connected screen, but it avoids the situation where when the user swipes back from the Connected screen they may hit the Connect screen but bounce back to the Connected screen as the fan hasn't disconnected yet... but is this a bad idea to have this navigation logic here? I've been trying to have it within each screen but with no success yet.

Entirely out of my depth so any help most welcome! 🙂

Nikit Bhandari has written a post on how to implement Navigation in Compose for Wear OS using SwipeDismissableNavHost - see https://proandroiddev.com/compose-for-wear-os-navigation-40c42bce9df7

I'm sure I'm missing something obvious, but when I add a preview, the preview looks like it's a phone... how do you change to a watch screen shape and size?

At the moment, it's pretty hard-coded:

Text(
    text = speed,
    color = Colors.primary,
    style = LocalTextStyle.current.copy(fontSize = 108.sp),
    fontStyle = FontStyle.Italic,
    fontWeight = FontWeight.ExtraBold
)

But as per @yschimke’s comment it would be great to know how to best make use of Theming to support this cleanly? (I like Yuri's suggestion of

WearWindTheme.typography.majorItem

) ? Any thoughts?

Are there any samples for Secondary actions on Chips? Or UI guidance?

Hello, is the AlertDialog usable in Compose Wear? If not, what would be an alternative component to use for similar interactions?

Just trying the stepper, and one part confused me! To try it out, tried a hard-coded example, which illustrates:

Stepper(
    value = curr.value,
    onValueChange = { value ->
        curr.value = value
        Log.i(TAG, "New value: $value")
    },
    valueRange = 100.0f .. 220.0f,
    steps = (220 - 100) / 5 - 1
) {

Aim was to be able to have a range of 100 to 220 and be able to step values by 5. The part that confused me was the

steps

value. Docs say "Step value is calculated as the difference between min and max values divided by steps+1". So, to get the correct step size, I have to subtract one from what I initially thought as the intuitive number of steps (

(220 - 100) / 5

). It's no big deal, reading the documentation solved it, just wasn't sure why "steps+1", though I've likely just misunderstood something.

This is what I added - probably an abuse of the Stepper 🙂 but having both the min and max on one screen felt right, especially as min < max condition is enforced. Two things I noted: • At 2s and 17s is that there is the occasional flicker of a value that isn't either ending 0 or 5, but is instead 4 or 9, before it gets corrected. Highly likely I'm doing something wrong, but I wonder if you've seen this too @Steve Bower [G]? nb. only saw this on the emulator, not on real devices. • Is it planned that the stepper can use the bezel for + and - input? (Or did I fail to configure that, but it's already possible?). (My Stepper use: https://github.com/garanj/wearwind/pull/6/files#diff-bd7e769b499a685bcb1751d4b829ca03039076cb994ee52d5086f17a441703c5 )

As all cute workarounds go, @saryong your Rotary Event Handler will break in Compose 1.1.0-beta04. cc @John O'Reilly

What is the typical pattern for AlertDialog when used with navigation? https://github.com/yschimke/rememberwear/blob/main/wear/src/main/kotlin/com/google/wear/soyted/ui/RememberWearAppScreens.kt#L105-L128

composable(
                    Screens.LoginDialog.route
                ) {
                    AlertDialog(
                        title = {

then

positiveButton = {
                            Button(onClick = {
                                viewModel.continueLogin()
                                navController.popBackStack()