0

This is what I wantSuppose I have four Button or Composable in a row, I want to select one and deselect the other, not like the radio button but behave exactly like that.

@Composable
fun ButtonSet(modifier: Modifier = Modifier) {
    Row(
        modifier = modifier
            .padding(start = 60.dp, end = 60.dp)
            .fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceEvenly,
    ) {

        val button1 = remember { mutableStateOf(false) }
        val button2 = remember { mutableStateOf(false) }
        val button3 = remember { mutableStateOf(false) }
        val button4 = remember { mutableStateOf(false) }

        val buttonList = listOf<Any>(button1, button2, button3, button4)

        val activeButton = remember {
            mutableStateOf(true)
        }

        if (button1.value || button2.value || button3.value || button4.value) {
            activeButton.value = false
        } else if (button1.value) {
            button1.value = !button1.value
        } else if (button2.value) {
            button2.value = !button2.value
        } else if (button3.value) {
            button3.value = !button3.value
        } else if (button4.value) {
            button4.value = !button4.value
        }

        GoalkeeperButton(button1.value)
        GoalkeeperButton(button2.value)
        GoalkeeperButton(button3.value)
        GoalkeeperButton(button4.value)
    }
}


@Composable
fun GoalkeeperButton(
    active: Boolean = false,
    @SuppressLint("ModifierParameter") modifier: Modifier = Modifier,
) {
    val buttonState = remember {
        mutableStateOf(active)
    }

    if (!buttonState.value) {
        ButtonUnActive() {}
    } else {
        ButtonActive()
    }
    RadioButton(selected =, onClick = { /*TODO*/ })
}


@Composable
fun ButtonActive(active: Boolean = true) {
    val button = painterResource(id = R.drawable.bttn_pressed)
    val gloves = painterResource(id = R.drawable.blue_hands)
    val buttonState = remember {
        mutableStateOf(active)
    }

    Column(
        modifier = Modifier
            .wrapContentWidth()
            .height(130.dp)
    ) {
        Image(
            painter = gloves,
            contentDescription = null,
            contentScale = ContentScale.FillBounds,
            modifier = Modifier
                .size(width = 135.dp, height = 70.dp)
        )
        Image(
            painter = button,
            contentDescription = null,
            contentScale = ContentScale.FillBounds,
            modifier = Modifier
                .clickable(onClick = {})
                .size(width = 107.dp, height = 65.dp)
        )
    }
}

@Composable
fun ButtonUnActive(
    state: Boolean = false,
    onclick: () -> Unit,
) {
    val button = painterResource(id = R.drawable.bttn)
    var unActiveState by remember {
        mutableStateOf(state)
    }

    Image(
        painter = button,
        contentDescription = null,
        contentScale = ContentScale.FillBounds,
        modifier = Modifier
            .clickable(
                onClick = {
                    onclick()
                },
            )
            .size(width = 107.dp, height = 65.dp)
    )
}

This is what I tried, but I know it's very bad code, please suggest a better and best way.

Abhimanyu
  • 11,351
  • 7
  • 51
  • 121
Ashish Gautam
  • 303
  • 2
  • 15
  • Does this answer your question? [Create Toggle Button Group in Jetpack Compose without Radio Buttons](https://stackoverflow.com/questions/69788366/create-toggle-button-group-in-jetpack-compose-without-radio-buttons) – Abhimanyu Nov 10 '21 at 03:59
  • this is similar but, my case is for custome composable can you do in my case. as i want to show `ButtonUnActive` while unselected when other unselected is clicked i want to show `ButtonActive` Composable fun which i have made – Ashish Gautam Nov 10 '21 at 07:13
  • The requirement is not clear. Can you add some use-case of what you are trying to do? – Abhimanyu Nov 10 '21 at 09:58
  • here i have row in which there is 4 `GoalkeeperButton`. And GoalkeeperButton is simple composable when clicked Shows ButtonActive else ButtonUnActive. Now we have 4 Button in row in which only one is Active by default and other is unActive. now you can get my case. – Ashish Gautam Nov 10 '21 at 17:04
  • Multiple buttons which have 2 states - active and inactive. Out of the 4, only one can be active at a time. That is exactly what is done in the linked question. Still, the difference in your question is not clear. – Abhimanyu Nov 10 '21 at 17:28
  • Hey can you get my case now – Ashish Gautam Nov 24 '21 at 10:55
  • I request you to go through Compose basics. The given code is not understandable. You have two Composables `ButtonUnActive` and `ButtonActive`. If they are stateless, there is no need for `active`/`state` parameter. If they are stateful, no need for two Composables. There are a lot of things confusing in this code. Your case seems exactly like the answer I linked to earlier. – Abhimanyu Nov 24 '21 at 13:45

0 Answers0