Hi all. I have been looking for an example of how to change the background of an `IconButton/Icon` w...

# compose-desktop

[Tim Almdal]

Hi all. I have been looking for an example of how to change the background of an IconButton/Icon when the mouse hovers over it. Much like what happens in Winddows, when you move the mouse over the window close button.

I stumble on the MutableInteractSource but haven't found anything that allows me to et the background. Does anyone have any example I could leverage.

Thanks

[Albert Chang]

Check LocalIndication. I think the default indication (indication when you do not apply a material theme) is close to what you want.

[Tim Almdal]

@Albert Chang Thanks, that looks like what I need. I'll see where that goes.

[Louis Pullen-Freilich [G]]

Indication is more for generic re-usable effects, such as a ripple / overlay - it’s not really suited for changing parameters to a component, like background color.

Instead for this case you can just do something like:

val interactionSource = remember { MutableInteractionSource() }

val isHovered by interactionSource.collectIsHoveredAsState()
    IconButton(
... interactionSource) {
    }

And then use isHovered to draw a Modifier.background or similar, depending on your specific use case

[Louis Pullen-Freilich [G]]

This would also allow you to change LocalContentColor / otherwise modify the icon inside in addition to changing background color, to make sure that the constrast is still accessible / to add animations / etc

[Kebbin]

Thankyou!

[Tim Almdal]

@Louis Pullen-Freilich [G] outstanding thank you

[Tim Almdal]

Thanks for your input and here is where I ended up with a themed title bar for a dialog in case anyone else is looking for something similiar.... YMMV

I create a undecorated Dialog and the content contains a column, with the DialogTitleBar as the first element in the column content.
Thanks again

Untitled.kt

[Louis Pullen-Freilich [G]]

You should be able to remove the hoverable, since clickable internally also supports hover events by default

[Tim Almdal]

ok, thanks for that. It's really a voyage of discovery to find these nuances.

[Louis Pullen-Freilich [G]]

Yes, this is a known area of lacking documentation

[Tim Almdal]

as a nit, and I don't know if you have any input to this and really not worth a ticket, but it would have been nice if the clickable overload with the interactionSource parameter had a null default for the indication parameter

[Chris Sinco [G]]

@Louis Pullen-Freilich [G] clickable supports hover??

[Louis Pullen-Freilich [G]]

Yep, the layering is like:

• focusable supports focus events
• hoverable supports hover events
• draggable supports drag events
And then clickable is a higher level thing, that supports press events and combines focusable / hoverable internally - so it’s just a combined modifier that handles press / focus / hover, for higher level components to build on top of