RadioButtons in Android using Jetpack Compose
RadioButtons are used to select only a specific option from the list of several options in a list or either. Radio buttons are used in many places for selecting only one option from the list of two or more options. In this article, we will take a look at the implementation of this Radio button in Android using Jetpack Compose.
Attributes of Radio Button
Attribute | Descriptions |
---|---|
selected | this attribute is used to make a radio button selected. |
onClick | this is used when our radio button is clicked. |
modifier | to add padding to our radio buttons. |
Step by Step Implementation
Step 1: Create a New Project
To create a new project in the Android Studio Canary Version please refer to How to Create a new Project in Android Studio Canary Version with Jetpack Compose.
Step 2: Working with the MainActivity.kt file
Navigate to the app > java > your app’s package name and open the MainActivity.kt file. Inside that file add the below code to it. Comments are added inside the code to understand the code in more detail.
Kotlin
import android.graphics.drawable.shapes.Shape import android.media.Image import android.os.Bundle import android.widget.Toast import androidx.appcompat.app.AppCompatActivity import androidx.compose.foundation.* import androidx.compose.foundation.Text import androidx.compose.foundation.layout.* import androidx.compose.foundation.selection.selectable import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material.* import androidx.compose.material.Icon import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.AccountCircle import androidx.compose.material.icons.filled.Info import androidx.compose.material.icons.filled.Menu import androidx.compose.material.icons.filled.Phone import androidx.compose.runtime.* import androidx.compose.runtime.savedinstancestate.savedInstanceState import androidx.compose.ui.Alignment import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.platform.setContent import androidx.compose.ui.res.imageResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.example.gfgapp.ui.GFGAppTheme import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.platform.ContextAmbient import androidx.compose.ui.platform.testTag import androidx.compose.ui.res.colorResource import androidx.compose.ui.semantics.SemanticsProperties.ToggleableState import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.input.* import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.TextUnit class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContent { Column { // in below line we are calling // a radio button method. SimpleRadioButtonComponent() } } } } @Preview (showBackground = true ) @Composable fun DefaultPreview() { GFGAppTheme { SimpleRadioButtonComponent(); } } @Composable fun SimpleRadioButtonComponent() { val radioOptions = listOf( "DSA" , "Java" , "C++" ) val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[ 2 ]) } Column( // we are using column to align our // imageview to center of the screen. modifier = Modifier.fillMaxWidth().fillMaxHeight(), // below line is used for // specifying vertical arrangement. verticalArrangement = Arrangement.Center, // below line is used for // specifying horizontal arrangement. horizontalAlignment = Alignment.CenterHorizontally, ) { // we are displaying all our // radio buttons in column. Column { // below line is use to set data to // each radio button in columns. radioOptions.forEach { text -> Row( Modifier // using modifier to add max // width to our radio button. .fillMaxWidth() // below method is use to add // selectable to our radio button. .selectable( // this method is called when // radio button is selected. selected = (text == selectedOption), // below method is called on // clicking of radio button. onClick = { onOptionSelected(text) } ) // below line is use to add // padding to radio button. .padding(horizontal = 16 .dp) ) { // below line is use to get context. val context = ContextAmbient.current // below line is use to // generate radio button RadioButton( // inside this method we are // adding selected with a option. selected = (text == selectedOption),modifier = Modifier.padding(all = Dp(value = 8F)), onClick = { // inside on click method we are setting a // selected option of our radio buttons. onOptionSelected(text) // after clicking a radio button // we are displaying a toast message. Toast.makeText(context, text, Toast.LENGTH_LONG).show() } ) // below line is use to add // text to our radio buttons. Text( text = text, modifier = Modifier.padding(start = 16 .dp) ) } } } } } |
Now run your app and see the output of the app.
Output:
Contact Us