Jetpack Compose: Getting Started
About this episode
Leave a rating/review
See forum comments
Mark complete
Next episode: Part 2 Quiz: Layout Your App
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
TextFields are used to get user input. They are used to get user input such as text, numbers, email addresses, etc.
TextField
Let us add a TextField to the app. In our TestPage Composable, we will add a TextField.
@ExperimentalMaterial3Api
@Composable
fun TestPage() {
Column(
modifier = Modifier
.fillMaxSize()
.padding(16.dp)
) {
TextField(
value = "",
onValueChange = { },
placeholder = {
Text(text = "Enter your name")
},
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 16.dp)
)
}
}
SearchBar
@ExperimentalMaterial3Api
@Composable
fun SearchBar() {
Box(
modifier = Modifier
.fillMaxWidth()
.height(75.dp)
.padding(end = 16.dp, start = 16.dp, top = 10.dp)
) {
TextField(
modifier = Modifier
.fillMaxWidth(),
value = "",
onValueChange = { },
placeholder = {
Text(
text = "Search for food ...",
modifier = Modifier
.fillMaxWidth(),
textAlign = TextAlign.Center,
)
}
)
}
}
Fantastic! You have successfully added a TextField to the app. You have also used different parameters available on the TextField Composable to customize its appearance.