Material Design Text Input Field using Jetpack Compose in Android

Last Updated : 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 by step implementation

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.Bundle 
import androidx.activity.ComponentActivity 
import androidx.activity.compose.setContent 
import androidx.compose.foundation.layout.Column 
import androidx.compose.foundation.layout.fillMaxWidth 
import androidx.compose.foundation.layout.padding 
import androidx.compose.foundation.text.KeyboardOptions 
import androidx.compose.material.* 
import androidx.compose.material.MaterialTheme.typography 
import androidx.compose.material.icons.Icons 
import androidx.compose.material.icons.filled.Edit 
import androidx.compose.material.icons.filled.Email 
import androidx.compose.runtime.* 
import androidx.compose.ui.Modifier 
import androidx.compose.ui.graphics.Color 
import androidx.compose.ui.text.InternalTextApi 
import androidx.compose.ui.text.input.KeyboardType 
import androidx.compose.ui.text.input.PasswordVisualTransformation 
import androidx.compose.ui.text.input.TextFieldValue 
import androidx.compose.ui.tooling.preview.Preview 
import androidx.compose.ui.unit.dp 
import 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() 
                    } 
                } 
            } 
        } 
    } 
} 
  
@Composable
fun 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
@Composable
fun PreviewInputs() { 
    Column { 
        TextInputs() 
    } 
}