Jetpack Compose Ep:8 — Radio Button App

Here, we will go through Radio Button in detail with respect to its attributes by dividing it in multiple parts.

Jetpack Compose — Radio Button App

To get your basic done, do visit to my previous articles which are given below:

• Jetpack Compose Episode:1 — Just Text App
• Jetpack Compose Episode:2 — The Scroll App
• Jetpack Compose Episode:3 — Button App
• Jetpack Compose Episode:4 — Icon & Icon Toggle Button App
• Jetpack Compose Episode:5 — Divider App
• Jetpack Compose Episode:6 — Floating Action Button App
• Jetpack Compose Episode:7 — Extended Floating Action ButtonApp

Note: In build.gradle(Project Level) file, the compose_version is upgraded to ‘1.0.0-beta01’ and maven() is replaced with mavenCentral(). Also the dependency is upgraded to classpath “com.android.tools.build:gradle:7.0.0-alpha08”
classpath “org.jetbrains.kotlin:kotlin-gradle-plugin:1.4.30”

And in build.gradle(Module Level) file, following dependency is upgraded:

implementation 'com.google.android.material:material:1.3.0'
implementation ‘androidx.activity:activity-compose:1.3.0-alpha03’

Radio Button

It is a component which represents two states i.e., either selected or not.

Attributes of Radio Button

• selected — it is boolean state which is either to be selected or not
• onClick — callback to be invoked when the RadioButton is being clicked. If null, then this is passive and relies entirely on a higher-level component to control the state.
• enabled — Controls the enabled state of the RadioButton. When false, this button will not be selectable and appears in the disabled ui state
• modifier — Modifier to be applied to the radio button
• interactionSource — the MutableInteractionSource representing the stream of Interactions for this RadioButton. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this RadioButton in different Interactions.
• colors — RadioButtonColors that will be used to resolve the color used for this RadioButton in different states. See RadioButtonDefaults.colors.

Remember()

Remember the value produced by calculation. calculation will only be evaluated during the composition. Re-composition will always return the value produced by composition.

MutableStateOf()

Return a new MutableState initialized with the passed in value
The MutableState class is a single value holder whose reads and writes are observed by Compose. Additionally, writes to it are transacted as part of the Snapshot system.

Attributes of MutableStateOf()

• value — the initial value for the MutableState
• policy — a policy to controls how changes are handled in mutable snapshots.

RadioButtonDefaults.colors()

Creates a RadioButtonColors that will animate between the provided colors according to the Material specification. And it returns the resulting Color used for the RadioButton

Attributes of RadioButtonDefaults.colors()

• selectedColor — the color to use for the RadioButton when selected and enabled.
• unselectedColor — the color to use for the RadioButton when unselected and enabled.
• disabledColor — the color to use for the RadioButton when disabled.

Simple Radio Button

@Composable
fun SimpleRadioButton(mText: String) {
    val mRememberObserver = remember { mutableStateOf("") }

    RadioButton(
        selected = mRememberObserver.value == mText,
        onClick = { mRememberObserver.value = mText })
}

Disabled Radio Button

@Composable
fun DisabledRadioButton(mText: String) {
    val mRememberObserver = remember { mutableStateOf("") }

    RadioButton(
        selected = mRememberObserver.value == mText,
        onClick = { },
        enabled = false
    )
}

Enabled Radio Button

@Composable
fun EnabledRadioButton(mText: String) {
    val mRememberObserver = remember { mutableStateOf("") }

    RadioButton(
        selected = mRememberObserver.value == mText,
        onClick = { mRememberObserver.value = mText },
        enabled = true
    )
}

Disabled Coloured Radio Button

@Composable
fun DisabledColouredRadioButton(
    mText: String
) {
    val mRememberObserver = remember { mutableStateOf("") }

    RadioButton(
        selected = mRememberObserver.value == mText,
        onClick = { /*TODO*/ },
        enabled = false,
        colors = RadioButtonDefaults.colors(disabledColor = Color.Gray)
    )
}

Enabled Coloured Radio Button

@Composable
fun EnabledColouredRadioButton(
    mText: String
) {
    val mRememberObserver = remember { mutableStateOf("") }

    RadioButton(
        selected = mRememberObserver.value == mText,
        onClick = { mRememberObserver.value = mText },
        enabled = true,
        colors = RadioButtonDefaults.colors(selectedColor = Color.Blue)
    )
}

Unselected Coloured Radio Button

@Composable
fun UnselectedColouredRadioButton(mText: String) {
    val mRememberObserver = remember { mutableStateOf("") }

    RadioButton(
        selected = mRememberObserver.value == mText,
        onClick = { mRememberObserver.value = mText },
        enabled = true,
        colors = RadioButtonDefaults.colors(unselectedColor = Color.DarkGray)
    )
}

Select Coloured Radio Button

@Composable
fun SelectedColouredRadioButton(mText: String) {
    val mRememberObserver = remember { mutableStateOf("") }

    RadioButton(
        selected = mRememberObserver.value == mText,
        onClick = { mRememberObserver.value = mText },
        enabled = true,
        colors = RadioButtonDefaults.colors(selectedColor = Color.Red)
    )
}

Grouped Radio Button

@Composable
fun GroupedRadioButton(mItems: List<String>) {
    val mRememberObserver = remember { mutableStateOf("") }

    Column {
        mItems.forEach { mItem ->
            Row {
                RadioButton(
                    selected = mRememberObserver.value == mItem,
                    onClick = { mRememberObserver.value = mItem },
                    enabled = true,
                    colors = RadioButtonDefaults.colors(selectedColor = Color.Magenta)
                )
            }
            Text(text = mItem, modifier = Modifier.padding(start = 8.dp))
        }
    }
}

Labelled Radio Button

@Composable
fun LabelledRadioButton(mText: String) {
    val mRememberObserver = remember { mutableStateOf("") }

    Row {
        RadioButton(
            selected = mRememberObserver.value == mText,
            onClick = { mRememberObserver.value = mText },
            enabled = true,
            colors = RadioButtonDefaults.colors(selectedColor = Color.Yellow)
        )
        Text(text = mText, modifier = Modifier.padding(start = 8.dp))
    }
}

Complete Code

package com.akshay.radiobuttonapp

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.layout.*
import androidx.compose.material.RadioButton
import androidx.compose.material.RadioButtonDefaults
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.akshay.radiobuttonapp.ui.theme.RadioButtonAppTheme

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            RadioButtonAppTheme {
                // A surface container using the 'background' color from the theme
                Column(
                    verticalArrangement = Arrangement.SpaceEvenly,
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier.fillMaxSize()
                ) {
                    SimpleRadioButton(mText = "Simple Radio Button")
                    DisabledRadioButton(mText = "Disabled Radio Button")
                    EnabledRadioButton(mText = "Enabled Radio Button")
                    DisabledColouredRadioButton(mText = "Disabled Coloured Radio Button")
                    EnabledColouredRadioButton(mText = "Enabled Coloured Radio Button")
                    UnselectedColouredRadioButton(mText = "Unselected Coloured Radio Button")
                    SelectedColouredRadioButton(mText = "Selected Coloured Radio Button")
                    GroupedRadioButton(
                        mItems = listOf(
                            "Grouped Radio Button 1",
                            "Grouped Radio Button 2",
                            "Grouped Radio Button 3"
                        )
                    )
                    LabelledRadioButton(mText = "Labelled Radio Button")
                }
            }
        }
    }
}

@Composable
fun SimpleRadioButton(mText: String) {
    val mRememberObserver = remember { mutableStateOf("") }

    RadioButton(
        selected = mRememberObserver.value == mText,
        onClick = { mRememberObserver.value = mText })
}

@Composable
fun DisabledRadioButton(mText: String) {
    val mRememberObserver = remember { mutableStateOf("") }

    RadioButton(
        selected = mRememberObserver.value == mText,
        onClick = { },
        enabled = false
    )
}

@Composable
fun EnabledRadioButton(mText: String) {
    val mRememberObserver = remember { mutableStateOf("") }

    RadioButton(
        selected = mRememberObserver.value == mText,
        onClick = { mRememberObserver.value = mText },
        enabled = true
    )
}

@Composable
fun DisabledColouredRadioButton(
    mText: String
) {
    val mRememberObserver = remember { mutableStateOf("") }

    RadioButton(
        selected = mRememberObserver.value == mText,
        onClick = { /*TODO*/ },
        enabled = false,
        colors = RadioButtonDefaults.colors(disabledColor = Color.Gray)
    )
}

@Composable
fun EnabledColouredRadioButton(
    mText: String
) {
    val mRememberObserver = remember { mutableStateOf("") }

    RadioButton(
        selected = mRememberObserver.value == mText,
        onClick = { mRememberObserver.value = mText },
        enabled = true,
        colors = RadioButtonDefaults.colors(selectedColor = Color.Blue)
    )
}

@Composable
fun UnselectedColouredRadioButton(mText: String) {
    val mRememberObserver = remember { mutableStateOf("") }

    RadioButton(
        selected = mRememberObserver.value == mText,
        onClick = { mRememberObserver.value = mText },
        enabled = true,
        colors = RadioButtonDefaults.colors(unselectedColor = Color.DarkGray)
    )
}

@Composable
fun SelectedColouredRadioButton(mText: String) {
    val mRememberObserver = remember { mutableStateOf("") }

    RadioButton(
        selected = mRememberObserver.value == mText,
        onClick = { mRememberObserver.value = mText },
        enabled = true,
        colors = RadioButtonDefaults.colors(selectedColor = Color.Red)
    )
}

@Composable
fun GroupedRadioButton(mItems: List<String>) {
    val mRememberObserver = remember { mutableStateOf("") }

    Column {
        mItems.forEach { mItem ->
            Row {
                RadioButton(
                    selected = mRememberObserver.value == mItem,
                    onClick = { mRememberObserver.value = mItem },
                    enabled = true,
                    colors = RadioButtonDefaults.colors(selectedColor = Color.Magenta)
                )
            }
            Text(text = mItem, modifier = Modifier.padding(start = 8.dp))
        }
    }
}

@Composable
fun LabelledRadioButton(mText: String) {
    val mRememberObserver = remember { mutableStateOf("") }

    Row {
        RadioButton(
            selected = mRememberObserver.value == mText,
            onClick = { mRememberObserver.value = mText },
            enabled = true,
            colors = RadioButtonDefaults.colors(selectedColor = Color.Yellow)
        )
        Text(text = mText, modifier = Modifier.padding(start = 8.dp))
    }
}

Output:

Jetpack Compose Ep:8 — Radio Button App

If there is any issue, do let me know in the comment section.

Connect with me on:

• Twitter
• Linkedin
• Github

Thank you & Happy coding!