Taking Input in Android using Jetpack Compose

Last Updated : 20 Feb, 2025

EditText is one of the most important widgets which is seen in most of the apps. This widget is generally used to get the data from users. Users can directly communicate with the app using this widget. This widget is used to get the data from the user in the form of numbers, text or any other text. In this article, we will take a look at the implementation of the TextField composable function in Android using Jetpack Compose.

Important Attributes of TextField Widget

Attributes	Description
value	value is used to get the entered value from the user in the text field.
placeholder	if the text field is empty we are displaying a hint to the user what he has to enter in the text field.
keyboardOptions	keyboardOptions is used to add capitalization in the data which is entered by the user in the text field, we can also specify an auto correction option in this. We can specify the type of keyboard which we have to display such as (phone, text) and to display actions which can be performed from the keyboard itself.
textStyle	to add styling to the text entered by the user. It is used to add font family, font size and styling to our text.
maxLines	to add maximum lines for our text input field.
focusedTextColor	active color is used when a user has clicked on edit text or the text field is focused and entering some data in the text field.
singleLine	In this, we have to specify a boolean value to avoid moving user input into multiple lines.
disabledTextColor	Inactive color is specified when the user is not being focused on our Text Input Field.
colors	to specify the background color for our text input field.
leadingIcon	This method is used to add the leading icon to our text input field. With this method, we can also specify the color(tint) for our icon.
trailingIcon	This method is use to add trailing icon to our text input field. With this method we can also specify color(tint) for our icon.
minLines	Used to set the minimum number of lines.
shape	Used to provide the shape to the TextField which is set to the medium shape from the theme.
enabled	used to make the TextField is enabled, allowing user interaction.
readOnly	used to make the TextField not read-only, allowing text input.
label	a composable used for displaying a label for the TextField.
isError	used to show the TextField is not in an error state.

Step by Step Implementation

Step 1: Create a New Project

To create a new project in the Android Studio Canary Version please refer to How to Create a new Project in Android Studio Canary Version with Jetpack Compose.

Step 2: Adding EditText in MainActivity.kt file

Navigate to the app > java > your app’s package name and open the MainActivity.kt file. Inside that file add the below code to it.

Comments are added inside the code to understand the code in more detail.

MainActivity.kt:

package org.geeksforgeeks.demo

import android.os.Bundle
import androidx.activity.*
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.*
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.*

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MaterialTheme {
                Surface(color = MaterialTheme.colorScheme.background) {
                    MyTextFieldUI()
                }
            }
        }
    }
}

@Composable
fun MyTextFieldUI() {
    // Remember the text entered in the TextField
    var text by remember { mutableStateOf("") }

    // Layout to organize the TextField and the Text below it
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // TextField for user input
        TextField(
            value = text,
            onValueChange = { text = it },
            label = { Text("Enter your text") },
            modifier = Modifier.fillMaxWidth()
        )

        Spacer(modifier = Modifier.height(16.dp))

        // Displaying the text entered by the user
        Text(text = "You entered: $text")
    }
}

@Preview(showBackground = true)
@Composable
fun PreviewMyTextFieldUI() {
    MyTextFieldUI()
}

Output:

Example of the TextField in Android Jetpack Compose

In this example we are adding some extra functionality to the TextField.

MainActivity.kt:

package org.geeksforgeeks.demo

import android.os.Bundle
import androidx.activity.*
import androidx.activity.compose.setContent
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.*
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.*
import androidx.compose.ui.text.input.*
import androidx.compose.ui.text.style.*
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.*
import org.geeksforgeeks.demo.ui.theme.DemoTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            DemoTheme {
                Surface(color = MaterialTheme.colorScheme.background) {
                    MyTextFieldUI()
                }
            }
        }
    }
}

@Composable
fun MyTextFieldUI() {
    // we are creating a variable for
    // getting a value of our text field.
    val inputValue = remember { mutableStateOf(TextFieldValue()) }

    Column(
        // we are using column to align our
        // textField to center of the screen.
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),

        // below line is used for specifying
        // vertical arrangement.
        verticalArrangement = Arrangement.Center,

        // below line is used for specifying
        // horizontal arrangement.
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        TextField(
            // below line is used to get
            // value of text field,
            value = inputValue.value,

            // below line is used to get value in text field
            // on value change in text field.
            onValueChange = { inputValue.value = it },

            // modifier is used to add padding
            // to our text field.
            modifier = Modifier
                .padding(all = 16.dp)
                .fillMaxWidth(),

            // below line is used to specify TextField is enabled, allowing user interaction.
            enabled = true,

            // below line is used to specify TextField is not read-only, allowing text input.
            readOnly = false,

            // below line is used to specify
            // styling for our text field value.
            textStyle = TextStyle(
                color = Color.Black,

                // below line is used to add font
                // size for our text field
                fontSize = 15.sp,
                fontWeight = FontWeight.SemiBold,
                fontStyle = FontStyle.Normal,

                // below line is used to change font family.
                fontFamily = FontFamily.SansSerif,
                letterSpacing = 0.5.sp,
                textDecoration = TextDecoration.None,
                textAlign = TextAlign.Start
            ),
            //  A composable displaying a label for the TextField.
            label = { Text("Label") },

            // below line is used to add placeholder
            // for our text field.
            placeholder = { Text("Enter user name") },

            // leading icon is used to add icon
            // at the start of text field.
            leadingIcon = {
                // In this method we are specifying
                // our leading icon and its color.
                Icon(Icons.Filled.AccountCircle, contentDescription = null, tint = Color(0xFF6200EE))
            },
            // trailing icons is used to add
            // icon to the end of text field.
            trailingIcon = {
                Icon(Icons.Filled.Info, contentDescription = null, tint = Color(0xFF6200EE))
            },
            // below line is used to indicate the TextField is not in an error state.
            isError = false,

            // below line is used to indicate no visual transformation is applied to the text.
            visualTransformation = VisualTransformation.None,

            // keyboard options is used to modify
            // the keyboard for text field.
            keyboardOptions = KeyboardOptions(
                // below line is used for capitalization
                // inside our text field.
                capitalization = KeyboardCapitalization.None,

                // below line is used to enable auto
                // correct in our keyboard.
                autoCorrect = true,

                // below line is used to specify our
                // type of keyboard such as text, number, phone.
                keyboardType = KeyboardType.Text,
                imeAction = ImeAction.Done
            ),
            keyboardActions = KeyboardActions(
                onDone = {
                    // Handle the done action
                }
            ),
            // single line boolean is used to avoid
            // text field entering in multiple lines.
            singleLine = true,

            // below line is used to give
            // max lines for our text field.
            maxLines = 2,

            // below line is used to give
            // max lines for our text field.
            minLines = 1,

            //  below line uses a MutableInteractionSource for handling interaction states.
            interactionSource = remember { MutableInteractionSource() },

            // below line is used for the shape of the TextField is set to the medium shape from the theme.
            shape = MaterialTheme.shapes.medium,

            // below line is used to specify background
            // color for our text field.
            colors = TextFieldDefaults.colors(
                focusedTextColor = Color.Green,
                disabledTextColor = Color.Green,
                focusedContainerColor = Color.LightGray,
                unfocusedContainerColor = Color.LightGray,
                cursorColor = Color.Blue,
                errorCursorColor = Color.Red,
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent
            )
        )

        Spacer(modifier = Modifier.height(16.dp))

        // Displaying the text entered by the user
        Text(text = "You entered: ${inputValue.value.text}")
    }
}

// @Preview function is used to see preview
// for our composable function in preview section
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    DemoTheme {
        MyTextFieldUI()
    }
}