I got some drawables which rely on `<selector&g...

# compose-android

[Stylianos Gakis]

I got some drawables which rely on <selector> to decide on the fillColor and the strokeColor for some drawable depending on if state_checked is true or not.
For Compose, is there a way I can forward that information to the drawable? Using painterResource(R.drawable.foo) to bring that in atm which doesn’t have any parameter for it, but maybe there’s some other way? 👀

[Stylianos Gakis]

I could try and split it two drawables and conditionally in compose code decide which one to render based on if the item is selected or not, but the way that the combination of stroke and fill colors is done I feel like it’d be easier for me to just solve it in the way I describe here instead.

[Joel Denke]

I would recommend convert your drawable to ImageVector in Compose instead, doing everything in code. Depends on use case ofc.
I am not aware about any bridge doing this, but it could exist libraries or such ofc I am not aware of 🙂

[Joel Denke]

The equivalent of selectors in Compose I would say is using MutableInteractionSource.
As of example like this;

val interactionSource = remember { MutableInteractionSource() }
val isPressed by interactionSource.collectIsPressedAsState()
val color = if (isPressed) Color.Blue else Color.Green

[Stylianos Gakis]

Yeah what I did for now is simply made 4 different XML icons, for dark/light and selected/not selected modes. In code just switch the selected/not selected icon using a normal if statement. And dark/light mode is handled automatically by painterResource(). Had to do that for dark mode since our SVG was not built properly enough to support using tint to color it (it had a color on top of a color, but tint only supports 1 color + different alpha values).
Not that fun, but it works, and if I ever get a proper SVG then this could be 2 xmls, just for active/not active.

Btw this exists https://github.com/DevSrSouza/svg-to-compose for something like you described, but I didn’t want to overcomplicate this for myself

[Joel Denke]

Not sure how the XML looks like for vector paths, but faily easy just change the values inside it, to be tinted.
You can tint the painterResource based on state. But yeah I know the pain, hard to get those vanilla vector paths work backward compatible and smooth in Androids selector world.
Most often got a large range of resource identifiers for drawable folders 😛

[Stylianos Gakis]

When using the Icon() composable, you get a tint parameter. That tint color is applied to the entire vector fully.
Our vector image was this helipad looking vector. How it’s drawn is that there’s one vector which is the circle behind, and then the H is 3 lines on top of it. [pic attached]
With the tint applying its color to anything, we simply got a circle with all of it being the same circle.
If the vector instead was the circle, and the H inside was done using transparency then it’d work, since it’d not apply any color there.
Initially I thought maybe there’s a way to “subtract” a path from another to build the transparent center like that, but didn’t find a way.
But I have absolutely no idea how to do something like this in Figma either, so I gave up and said let’s use different XML files with hard-coded colors so that it fits all cases 😅

[Joel Denke]

You can always invert vector path to not fill, rather having H as "cut out" from circle.
For this particular case looks imo easy just create custom circle in path + mask H letter on top of it and tint it. Where letter rotated :)

[Stylianos Gakis]

I don’t want to do that since I wouldn’t feel comfortable that this ‘H’ would fit the specs 100% of what this icon wants to be, that would be tricky, especially considering different screen densities and so on right?