EditText in Android using Jetpack Compose

25 Feb, 2021
EditText is one of the most important widget which is seen in most of the apps. This widget is generally use 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 user in the form of numbers, text or any other text. In this article we will take a look at the implementation of the EditText widget in Android using Jetpack Compose. 
Attributes 
Description
if the text field is empty we are displaying a hint to the user what he 
has to enter in the text field. 
keyboardOptions is used to add capitalization in the data which is entered by 
user in text field, we can also specify 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. 
active color is use to when user has click on edit text or the text field is focused and 
entering some data in the text field. 
This method is use to add leading icon to our text input field. With this method
we can also specify color(tint) for our icon.
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.
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.
Kotlin
package com.example.gfgapp  import android.graphics.drawable.shapes.Shapeimport android.media.Imageimport android.os.Bundleimport android.widget.Toastimport androidx.appcompat.app.AppCompatActivityimport androidx.compose.foundation.BorderStrokeimport androidx.compose.foundation.Imageimport androidx.compose.foundation.Textimport androidx.compose.foundation.layout.*import androidx.compose.foundation.shape.RoundedCornerShapeimport androidx.compose.foundation.text.KeyboardOptionsimport androidx.compose.material.*import androidx.compose.material.icons.Iconsimport androidx.compose.material.icons.filled.AccountCircleimport androidx.compose.material.icons.filled.Infoimport androidx.compose.material.icons.filled.Phoneimport androidx.compose.runtime.*import androidx.compose.runtime.savedinstancestate.savedInstanceStateimport androidx.compose.ui.Alignmentimport androidx.compose.ui.layout.ContentScaleimport androidx.compose.ui.platform.setContentimport androidx.compose.ui.res.imageResourceimport androidx.compose.ui.tooling.preview.Previewimport androidx.compose.ui.unit.dpimport com.example.gfgapp.ui.GFGAppThemeimport androidx.compose.ui.Modifierimport androidx.compose.ui.draw.clipimport androidx.compose.ui.graphics.Colorimport androidx.compose.ui.graphics.SolidColorimport androidx.compose.ui.platform.ContextAmbientimport androidx.compose.ui.res.colorResourceimport androidx.compose.ui.text.TextStyleimport androidx.compose.ui.text.font.FontFamilyimport androidx.compose.ui.text.input.*import androidx.compose.ui.unit.Dpimport androidx.compose.ui.unit.TextUnit  class MainActivity : AppCompatActivity() {    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContent {            GFGAppTheme {                // A surface container using the                   // 'background' color from the theme                Surface(color = MaterialTheme.colors.background) {                    // at below line we are calling                       // our function for text field.                    TxtField();                }            }        }    }}  @Composablefun TxtField() {    // 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             // imageview 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 },                                  // below line is used to add placeholder                 // for our text field.                placeholder = { Text(text = "Enter user name") },                                  // modifier is use to add padding                 // to our text field.                modifier = Modifier.padding(all = 16.dp).fillMaxWidth(),                                  // keyboard options is used to modify                 // the keyboard for text field.                keyboardOptions = KeyboardOptions(                        // below line is use for capitalization                         // inside our text field.                        capitalization = KeyboardCapitalization.None,                                                  // below line is 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,                ),                  // below line is use 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 = TextUnit.Companion.Sp(value = 15),                                                  // below line is use to change font family.                        fontFamily = FontFamily.SansSerif),                                  // below line is use to give                // max lines for our text field.                maxLines = 2,                                  // active color is use to change                 // color when text field is focused.                activeColor = colorResource(id = R.color.purple_200),                                  // single line boolean is use to avoid                 // textfield entering in multiple lines.                singleLine = true,                                  // inactive color is use to change                 // color when text field is not focused.                inactiveColor = Color.Gray,                                  // below line is use to specify background                // color for our text field.                backgroundColor = Color.LightGray,                                  // leading icon is use 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, tint = colorResource(id = R.color.purple_200))                },                // trailing icons is use to add                 // icon to the end of tet field.                trailingIcon = {                    Icon(Icons.Filled.Info, tint = colorResource(id = R.color.purple_200))                },                )    }}  // @Preview function is use to see preview// for our composable function in preview section@Preview(showBackground = true)@Composablefun DefaultPreview() {    GFGAppTheme {        TxtField()    }}
Android-Jetpack
Technical Scripter 2020
Android
Kotlin
Technical Scripter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Add Views Dynamically and Store Data in Arraylist in Android?
Android RecyclerView in Kotlin
Broadcast Receiver in Android With Example
Android SDK and it's Components
Flutter - Custom Bottom Navigation Bar
How to Add Views Dynamically and Store Data in Arraylist in Android?
Android UI Layouts
Android RecyclerView in Kotlin
Broadcast Receiver in Android With Example