Maybe a noob question. But what is the replacement of Android's Selector(Drawable State List) in Com...

# compose

[Sergey Y.]

Maybe a noob question. But what is the replacement of Android's Selector(Drawable State List) in Compose?
I want to make a button that looks differently under certain conditions. Pressed, enabled, disabled, focused, hovered, etc.

[Sean McQuillan [G]]

Short answer is a this is replaced by composable functions and parameters.

[Zach Klippenstein (he/him) [MOD]]

Pressed/Focused/Hovered are, I think, done with something called “indications”, and Enabled/Disabled are “emphasis”.

[Sergey Y.]

@Sean McQuillan [G] Should I manually track different states and update state and appearence accordingly?

[Sean McQuillan [G]]

Depending on what you're doing – you could make a slot parameter to handle drawing the background based on the state, as an example:

@Composable
fun SelectorBackground(currentState: /*...*/, content: @Composable () -> Unit) {
   ... logic to select background ...
}

[Sergey Y.]

Or old good <selector/> api going to be reinvented in compose style?

[Sean McQuillan [G]]

In the simplest form yea – hoist the relevant states to the place where they're updated/consumed then change the drawing code based on the state

[Sean McQuillan [G]]

I don't think I've seen any exploration of trying to create a workalike API, but I'd be interesting to hear what people have tried.

[Sergey Y.]

Hm... The solution is a bit bulky but I'll try. Thanks 👍

[Sean McQuillan [G]]

Here's how the material button does enabled, for example:

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-master-dev:compose/material/material/src/commonMain/kotlin/androidx/compose/material/Button.kt;l=114?q=androidx%20compose%20button

[Sean McQuillan [G]]

Yea it's a bit less encapsulated than the selector API – I'd definitely be interested in seeing what you come up with

[Sean McQuillan [G]]

(and will noodle on it as well 🙂 )

[Sergey Y.]

@Sean McQuillan [G] What type of data could represent the state? Does old good android.graphics.Drawable still suitable or Compose has its own types alike to the Drawable?

[Sean McQuillan [G]]

Foundation has an InteractionState that's designed for handling interactions like this

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-master-dev:compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/InteractionState.kt?q=androidx%20compose%20InteractionState

[Sean McQuillan [G]]

It will work with clickable out of the box, for example

[Sean McQuillan [G]]

You can see it's usage in the material button which uses it to implement the ripple

[Sergey Y.]

lovely

[Sean McQuillan [G]]

If you're not building a library-like composable, simply swapping the indication on a Button is probably the simplest way to get custom behavior (reading a bunch of code to try to answer this question 🙂 )

[Sean McQuillan [G]]

You can swap the ripple for some other drawing code

[Sean McQuillan [G]]

Backing up – what do you want to specialize based on the state?

[Sergey Y.]

Just a custom button background, maybe not solid colors but some pictures

[Sergey Y.]

For instance a 9.patch with a saturated shadow

[Sean McQuillan [G]]

Ah ok – then in that case yea I'm leading you down the wrong route 🙂

[Sean McQuillan [G]]

So there's no single Drawable type in compose that handles images/colors as a single type etc and the material Button can only handle background color

[Sean McQuillan [G]]

However, the background on Button is just the Surface here https://cs.android.com/androidx/platform/frameworks/support/+/androidx-master-dev:compose/material/material/src/commonMain/kotlin/androidx/compose/material/Button.kt;l=112?q=androidx%20compose%20button

[Sergey Y.]

What logic should I follow when I do something custom in Compose? I mean whether it should be a Composable function or a Modifier to achieve the desired effect on a UI.

In other words when I must choose to make a Composable function and when a Modifier? To make something custom.

[Sean McQuillan [G]]

So, starting from the Material button, you can either draw a background over the color using a modifier, or you can make a composable that draws it's own background.

[Sean McQuillan [G]]

As to which to choose – in this case it depends, if you're defining the core button style for your app then I'd make a composable,

if it's just a 1-off styling choice then a modifier works

[Sean McQuillan [G]]

Modifiers applied to a composable are kind of like inline XML attributes on Views

[Sean McQuillan [G]]

They're good for styling a single location

[Sean McQuillan [G]]

A new composable function is more similar to defining a reusable view style in this decision tree

[Sergey Y.]

Sounds convincing. Much appreciated for your time and help. Thank you.

[Sean McQuillan [G]]

Thanks for your question – I'll keep thinking about this problem too. I hadn't considered selectors previously. And sorry for going down the path of trying to implement a library-level Button alternative for a bit at the beginning there 🙂.

I'd love to see what you land at for this as you explore.

[Louis Pullen-Freilich [G]]

It is not currently implemented in Material components, but in the future components like Button will accept an InteractionState parameter - which allows you to hoist and read this state to customize how the Button appears.

For example, to customize the button based on whether it is pressed would look something like:

val interactionState = remember { InteractionState() }

Button(
    interactionState = interactionState,
    backgroundColor = if (Interaction.Presesd in interactionState) Color.Red else Color.Blue
) {...}

Unfortunately this hasn't landed yet, so it isn't really easy to do this right now

[Louis Pullen-Freilich [G]]

For example, animating the elevation between default / pressed states recently landed in: https://android-review.googlesource.com/c/platform/frameworks/support/+/1407037