Jetpack Compose: Basic components

In this article, we will discuss the basic components present in the Jetpack Compose.

Text

Text is the most basic view and is almost required by every component. Jetpack Compose makes it easier to display or write text.

@Composable
fun SimpleText() {
    Text(text = "Hello World!")
}

Buttons

A view with an onClick function. We can add other Composables as child elements of the Button.

@Preview(showBackground = true)
@Composable
fun DisplayButton() {
    Button(onClick = {
        Log.i("Button", "clicked")
    }, Modifier.padding(4.dp)) {
        Text(
            text = "Button")
    }
}

Textfield

It allows users to enter and modify text.

@Composable
fun DisplayTextField() {
    var name by remember {
        mutableStateOf("")
    }
    TextField(value = name, onValueChange = { it ->
        name = it
    }, label = { Text(text = "Username") })
}

Checkbox

A component that allows the user to select multiple options from a given list.

@Composable
fun DisplayCheckBox() {
    var checkStatus by remember {
        mutableStateOf(false)
    }
    Row(verticalAlignment = Alignment.CenterVertically) {
        Checkbox(checked = checkStatus, onCheckedChange = {
            checkStatus = it
        })
        Text(text = "Checkbox", Modifier.clickable { checkStatus = !checkStatus })
    }
}

RadioButton

A component that allows the user to select only one option from a given list.

@Preview(showBackground = true)
@Composable
fun DisplayRadioButton() {
    val sports = listOf("Cricket", "Tennis", "Basketball")
    val (selected, onOptionSelected) = remember {
        mutableStateOf(sports[0])
    }
    Column(Modifier.padding(4.dp), verticalArrangement = Arrangement.Center) {
        sports.forEach { text ->
            Row(modifier = Modifier.padding(4.dp), verticalAlignment = Alignment.CenterVertically) {
                RadioButton(selected = selected == text, onClick = {
                    onOptionSelected(text)
                })
                Text(text = text, Modifier.clickable { onOptionSelected(text) })
            }
        }
    }
}

Conclusion

In this article, we have discussed only a few UI basic components which are the building blocks for making an interface. We will be discussing some more components in the upcoming blogs.  

Stay tuned for the updates.