Hello World!Hello World!Hello World!Hello World!Hello World!Text from a variableHello World!Hello World!Hello World!This is a very long line of text that won't fit onto a single lineThis is a very long line of text that won't fit onto a single lineThis is a very long line of text that won't fit onto a single line
The Text element can be used to display text which can be styled in various ways.
Text can be linked to an observable, mutable object created via mutableStateOf(...) meaning that any changes to the object will cause the UI to update accordingly.
fun main() = singleWindowApplication(
title = "Text"
) {
App()
}
@Composable
fun App() {
var message by remember{ mutableStateOf("Text from a variable") }
Row() {
Column() {
Text("Hello World!")
Text("Hello World!", fontWeight = FontWeight.Bold)
Text("Hello World!", fontStyle = FontStyle.Italic)
Text("Hello World!", fontSize = 30.sp)
Text("Hello World!", color = Color.Red)
Text(message)
}
Column() {
Text("Hello World!", textAlign = TextAlign.Left)
Text("Hello World!", textAlign = TextAlign.Center)
Text("Hello World!", textAlign = TextAlign.Right)
Text("This is a very long line of text ...")
Text("This is a very long line of text ...", maxLines = 1)
Text("This is a very long line of text ...", maxLines = 2)
}
}
}
Images
The Image element can be used to display images which can be sized and cropped in various ways.
Images should be placed into an 'images' folder within the resources folder within your project (see here).
More display and styling options can be found here and here, and tutorial examples here.
The Button element can be used for user interaction.
Buttons require an onClick parameter with the code that is run when the Button is clicked.
Buttons generally contain a Text element, but can also contain Image and/or Icon elements. More display and styling options can be found here and here.
The ClickableText element can be used for user interaction.
ClickableText require an onClick parameter with the code that is run when the Button is clicked.
The text content of a ClickableText element must be created as an AnnotatedString.
fun main() = singleWindowApplication(
title = "Clickable Text"
) {
App()
}
@Composable
fun App() {
Column() {
ClickableText(
text = buildAnnotatedString { append("Hello World!") },
onClick = {...}
)
ClickableText(
text = buildAnnotatedString { append("Like ❤") },
onClick = {...},
style = TextStyle(
color = Color.Magenta
)
)
}
}
Text Inputs
The OutlinedTextField element can be used to get text input from the user. They have an optional label property.
TextFields require an onValueChange parameter with the code to be run when text is typed.
A TextField will usually update an observable, mutable object created via mutableStateOf(...), so the value parameter is set to the object and the onValueChange code updates the object (see code example).
More display and styling options can be found here.
fun main() = singleWindowApplication(
title = "Text Inputs"
) {
App()
}
@Composable
fun App() {
var name by remember{ mutableStateOf("") }
var email by remember{ mutableStateOf("") }
Column() {
OutlinedTextField(
label = { Text("Name") },
value = name,
onValueChange = { name = it }
)
OutlinedTextField(
label = { Text("Email") },
value = email,
onValueChange = { email = it }
)
}
}
Validating Text Inputs
OutlinedTextField elements can set the isError property to true to indicate an invalid input. This property can be linked to a Boolean state variable, calculated when the TextField text changes. The state variable can also be used to disable other inputs until valid data is entered, for example an add/save button (see the example code).
Note that it is best to link all TextFields to String state variables since the conversion of TextField text into numberic state values and back again during validation can cause issues.
fun main() = singleWindowApplication(
title = "Valid Text Inputs"
) {
App()
}
@Composable
fun App() {
var name by remember{ mutableStateOf("") }
var age by remember{ mutableStateOf("") }
var nameValid by remember{ mutableStateOf(false) }
var ageValid by remember{ mutableStateOf(false) }
Column() {
Row() {
OutlinedTextField(
label = { Text("Name") },
value = name,
isError = !nameValid,
onValueChange = {
name = it
nameValid = name.isNotBlank()
}
)
OutlinedTextField(
label = { Text("Age") },
value = age,
isError = !ageValid,
onValueChange = {
age = it
ageValid = age.all(Char::isDigit) &&
age.toIntOrNull() != null
}
)
}
Button(
enabled = nameValid && ageValid,
onClick = {
// Do something with data
}
) {
Text("Save Person")
}
}
}
Toggle Switches
Speaks FrenchLikes cheesePlays cricket
The Switch element is a toggleable, boolean (on/off or yes/no) control. It can be used for user input.
Switches require an onCheckedChange parameter with the code that is run when the Switch is clicked.
The checked state of the Switch can be controlled / linked to a boolean state variable.
fun main() = singleWindowApplication(
title = "Toggle Switches"
) {
App()
}
@Composable
fun App() {
var french by remember{ mutableStateOf(true) }
var cheese by remember{ mutableStateOf(false) }
var cricket by remember{ mutableStateOf(false) }
Column() {
Row() {
Text("Speaks french")
Switch(
checked = french,
onCheckedChange = { french = it }
)
}
Row() {
Text("Likes cheese")
Switch(
checked = cheese,
onCheckedChange = { cheese = it }
)
}
Row() {
Text("Plays cricket")
Switch(
checked = cricket,
onCheckedChange = { cricket = it }
)
}
}
}
Drop-Down Option Menu
There is no built-in drop-down menu control in Compose MP.
The code here creates a Dropdown Composable from an OutlinedTextField, an arrow Icon and a DropdownMenu. It works well and fits in with the look and feel of other controls.
The code shows how this composable can be used, how to pass it a list of options, and how to retrieve and respond to the selected option.
Other Element Types
There are other types of UI elements that can be used, such as:
