Text inputs are important UI components of a mobile app. Styling TextField properly helps users to recognize the purpose of the field. Here, let’s learn how to add icons to TextField in Jetpack Compose.
OutlinedTextfield has two parameters that help to add icons. The leadingIcon parameter adds the icon at the beginning of TextField whereas trailingIcon adds the icon at the end of the TextField. See the code snippet given below.
var textInput by remember { mutableStateOf("")}
OutlinedTextField(value = textInput, onValueChange = {textInput = it},
label = { Text("Email")},
leadingIcon = {Icon(Icons.Outlined.Email, contentDescription = null)})Following is the complete example to add an icon to a TextField.
package com.example.example
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Email
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.example.ui.theme.ExampleTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ExampleTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
TextfieldExample()
}
}
}
}
}
@Composable
fun TextfieldExample() {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
var textInput by remember { mutableStateOf("")}
OutlinedTextField(value = textInput, onValueChange = {textInput = it},
label = { Text("Email")},
leadingIcon = {Icon(Icons.Outlined.Email, contentDescription = null)})
}
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
ExampleTheme {
TextfieldExample()
}
}Following is the output.
That’s how you add icons to TextFields in Jetpack Compose.
