Is there a way of manually calling/forcing the onC...

# compose

[Chris Johnson]

Is there a way of manually calling/forcing the onClick of a composable? My use case is I have a RadioButton inside a row and I want the radioButton's indication to happen when the Row is selected. Something similar to the old View.performClick

[pepos]

don't do that. just update the selected boolean property of the radio button when row is selected

[Chris Johnson]

Well I do that, but it doesn't show the indication ripple effect that the RadioButton has been selected which is a problem.

[hfhbd]

Modifier.selectableGroup()

[Alexandre Elias [G]]

I'd recommend leaving the onClick of the RadioButton itself as null and using Modifier.selectable + onClick on the Row itself. One of the samples gives an example of that: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]dx/compose/material/samples/SelectionControlsSamples.kt;l=124

[Chris Johnson]

I've been trying to get that to work but I still get no indication on the RadioButton. It just switches selected state like before

[pepos]

can you share a video of current behavior?

[Chris Johnson]

Unfortunately the screen I'm working on I can't share but I'll post source code. I wonder if it's because I'm using a ConstraintLayout instead of a Row/Column. I know it doesn't work with scrolling so this may be another limitation 🤔 I also don't want the Row/parent container to be selected. Just the RadioButton indication
Source:

ConstraintLayout(modifier = Modifier
    .fillMaxWidth()
    .selectable(
        selected = uiState.selected,
        onClick = { optionSelected(uiState.id) },
        role = Role.RadioButton
    )
    .clickable(onClick = {
        optionSelected(uiState.id)
    }, interactionSource = remember { MutableInteractionSource() }, indication = null)
    .padding(vertical = spacing_large)) {
    val (title, details, radioButton) = createRefs()
    Text(text = uiState.text, style = typography.body1, modifier = Modifier.constrainAs(title) {
        start.linkTo(parent.start)
        top.linkTo(<http://parent.top|parent.top>)
    })
    if (uiState.details.isNotEmpty()) {
        Text(text = uiState.details, style = typography.body2, color = ColorHere, modifier = Modifier.constrainAs(details) {
            start.linkTo(parent.start)
            top.linkTo(title.bottom)
        })
    }
    RadioButton(selected = uiState.selected, onClick = null, modifier = Modifier.constrainAs(radioButton) {
        end.linkTo(parent.end)
        top.linkTo(<http://parent.top|parent.top>)
    }, colors = RadioButtonDefaults.colors(selectedColor = ColorHere))

[Rick Regan]

I have code in my app like in the cited link. When I click the row I get a rectangular ripple, and when I click the button, I get a circular ripple (both as expected). In any case it sounds like that's not what you want.

[Chris Johnson]

Yeah I just tried to copy the code from the link above exactly and I'm not getting a ripple indication on the RadioButton for Row clicks either which makes sense because I'm not setting it... None of these examples so far explicitly call RadioButton's indication to re-draw the ripple on clicking the Row/parent layout. I was hoping Modifier.selectableGroup() was something that would but that fell flat

[Chris Johnson]

I guess what I'm looking for is a way to explicitly call RadioButton's ripple indication from an InteractionSource. This may not be available yet which is a bummer.

[Chris Johnson]

@Alexandre Elias [G] Is there any plan to give us access to this kind of stuff in the future?

[Alexandre Elias [G]]

In the sample, Modifier.selectable implicitly contains an indication (pulled from LocalIndication.current) , which shows the ripple originating from a click on the entire Row. if you are setting a custom indication/interactionSource on the RadioButton itself, perhaps the solution is to move it up one level

[Alexandre Elias [G]]

I don't think there's plans to add new APIs on the roadmap for this right now, although that could change if we learn there are important use cases that are impossible to do with the current API

[Alexandre Elias [G]]

one design consideration that may make us hesitate to provide programmatic ripple control is that ripples are positional animations originating from a touch position. triggering one from a function call at an arbitrary position could undermine the Material metaphor somewhat. but certainly if the ripple is actually originating from a user click, we want to make any such use case possible

[Rick Regan]

There was a time when I wanted such a programmatic feature, to "replay" a sequence of logged button presses. But I do understand your Material concerns.

[Chris Johnson]

That makes sense. Although in the view based system I was able to create a simple layout such as
LinearLayout -> Text -> MaterialRadioButton
And then on the LinearLayout click I could set the RadioButton's checked to true which would cause the ripple effect (which is what I want to re-implement). So you're saying this is no longer an option and the ripple should actually start from the user's touch at all times? In this case the ripple would be on the Row and not the RadioButton

[Chris Johnson]

Because I'm clicking on a row with text but the actionable item that the user cares about is the RadioButton and not the row. That's why we don't want any indication on the Row but do want the ripple on the RadioButton when the Row is clicked.

[Chris Johnson]

So here's an example case in the View system. I'm not actually clicking into the item but you can see as I'm tapping on the layout in the recyclerView(Not the RadioButton) the ripple indication for the RadioButton is visible.

example.mp4

[Alexandre Elias [G]]

right, the behavior in the video is possible (and unfortunately somewhat common) in the View system. But we have started to consider it an antipattern because the indication may be too small to be seen and not necessarily centered on the finger.

[Alexandre Elias [G]]

in first-party Android apps like the Settings system menu items with switches, you will generally see a ripple on the entire row, except in the case where the touch starts on the switch itself

[Chris Johnson]

Yeah I'm just looking through settings on my phone and I do notice that. That's interesting. Thanks for all the info and help! So you would recommend setting a ripple indication on the row itself in the above scenario ^ and then just letting the radioButton be selectable?

[pepos]

So you would recommend setting a ripple indication on the row itself in the above scenario ^ and then just letting the radioButton be selectable?

for me this would be the expected behavior