Material Design Text Input Field using Jetpack Compose in Android

06 Apr, 2021
Jetpack Compose is a modern toolkit for building native Android UI. Jetpack Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs. Compose is built to support material design principles. Many of its UI elements implement material design out of the box. In this article, we will explain how you can create Material design Text Input Fields using Jetpack Compose.  Below is the sample picture to show what we are going to build. 
Step 1: Create a new project
To create a new project in Android Studio using Jetpack Compose please refer to How to Create a New Project in Android Studio Canary Version with Jetpack Compose.
Step 2: Working with MainActivity.kt
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.
Kotlin
import android.os.Bundleimport androidx.activity.ComponentActivityimport androidx.activity.compose.setContentimport androidx.compose.foundation.layout.Columnimport androidx.compose.foundation.layout.fillMaxWidthimport androidx.compose.foundation.layout.paddingimport androidx.compose.foundation.text.KeyboardOptionsimport androidx.compose.material.*import androidx.compose.material.MaterialTheme.typographyimport androidx.compose.material.icons.Iconsimport androidx.compose.material.icons.filled.Editimport androidx.compose.material.icons.filled.Emailimport androidx.compose.runtime.*import androidx.compose.ui.Modifierimport androidx.compose.ui.graphics.Colorimport androidx.compose.ui.text.InternalTextApiimport androidx.compose.ui.text.input.KeyboardTypeimport androidx.compose.ui.text.input.PasswordVisualTransformationimport androidx.compose.ui.text.input.TextFieldValueimport androidx.compose.ui.tooling.preview.Previewimport androidx.compose.ui.unit.dpimport com.example.jetpackcomposepractice.ui.theme.JetpackComposePracticeTheme  class MainActivity : ComponentActivity() {    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContent {            JetpackComposePracticeTheme {                // A surface container using the 'background' color from the theme                Surface(color = Color.White) {                    Column {                        // call the function which contains all the input fields                        TextInputs()                    }                }            }        }    }}  @Composablefun TextInputs() {    Column {          Text(text = "Text Inputs", style = typography.h6, modifier = Modifier.padding(8.dp))        var text by remember { mutableStateOf(TextFieldValue("")) }        // for preview add same text to all the fields          // Normal Text Input field with floating label        // placeholder is same as hint in xml of edit text        TextField(            value = text,            onValueChange = { newValue -> text = newValue },            modifier = Modifier                .padding(8.dp)                .fillMaxWidth(),            label = { Text("label") },            placeholder = { Text("placeholder") },        )          // Outlined Text Input Field        OutlinedTextField(            value = text,            modifier = Modifier                .padding(8.dp)                .fillMaxWidth(),            label = { Text(text = "Password") },            placeholder = { Text(text = "12334444") },            visualTransformation = PasswordVisualTransformation(),            onValueChange = {                text = it            },            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)        )          // Outlined Input text with icon on the left        // inside leadingIcon property add the icon        OutlinedTextField(            value = text,            leadingIcon = { Icon(imageVector = Icons.Default.Email, contentDescription = null) },            modifier = Modifier                .padding(8.dp)                .fillMaxWidth(),            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text),            label = { Text(text = "Email address") },            placeholder = { Text(text = "Your email") },            onValueChange = {                text = it            }        )          // Outlined Input text with icon on the left and right        // inside leadingIcon property add the left icon        // inside trailingIcon property add right icon        OutlinedTextField(            value = text,            leadingIcon = { Icon(imageVector = Icons.Default.Email, contentDescription = null) },            trailingIcon = { Icon(imageVector = Icons.Default.Edit, contentDescription = null) },            modifier = Modifier                .padding(8.dp)                .fillMaxWidth(),            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text),            label = { Text(text = "Email address") },            placeholder = { Text(text = "Your email") },            onValueChange = {                text = it            }        )          var numberText by remember { mutableStateOf(TextFieldValue("")) }        // Outlined Text input field with input type number        // It will open the number keyboard        OutlinedTextField(value = numberText,            modifier = Modifier                .padding(8.dp)                .fillMaxWidth(),            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),            label = { Text(text = "Phone number") },            placeholder = { Text(text = "88888888") },            onValueChange = {                numberText = it            }        )    }}  @InternalTextApi@Preview@Composablefun PreviewInputs() {    Column {        TextInputs()    }}
Output:
Android-Jetpack
Android
Kotlin
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Android SDK and it's Components
How to Add Views Dynamically and Store Data in Arraylist in Android?
Flutter - Custom Bottom Navigation Bar
Retrofit with Kotlin Coroutine in Android
How to Post Data to API using Retrofit in Android?
How to Add Views Dynamically and Store Data in Arraylist in Android?
Android UI Layouts
Kotlin Array
Retrofit with Kotlin Coroutine in Android