In this article, we will explore BasicTextField in Jetpack Compose with examples.
Prerequisites:
What is BasicTextField in Jetpack Compose?
BasicTextField helps us to create a fully customized input field. Unlike, TextFiled, it has no decorations. If you want to create an input field without following material guidelines, basic text field is the right choice for you.
The API looks like this:
@Composable
fun BasicTextField(
value: String,
onValueChange: (String) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
readOnly: Boolean = false,
textStyle: TextStyle = TextStyle.Default,
keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
keyboardActions: KeyboardActions = KeyboardActions.Default,
singleLine: Boolean = false,
maxLines: Int = Int.MAX_VALUE,
visualTransformation: VisualTransformation = VisualTransformation.None,
onTextLayout: (TextLayoutResult) -> Unit = {},
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
cursorBrush: Brush = SolidColor(Color.Black),
decorationBox: @Composable (innerTextField: @Composable () -> Unit) -> Unit =
@Composable { innerTextField -> innerTextField() }
)Most of the parameters are similar to TextFiled. So, before continuing, I highly suggest you read the TextFiled article.
First, create a MyUI() composable and call it inside the onCreate() method. We will write our code in it.
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
YourProjectNameTheme(darkTheme = false) {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
MyUI()
}
}
}
}
}
}
@Composable
private fun MyUI() {
}Basic Text Field Example:
@Composable
private fun MyUI() {
var value by remember {
mutableStateOf("")
}
BasicTextField(
value = value,
onValueChange = { newText ->
value = newText
}
)
}Output:
It is just a plain text field without any customization. Let’s add colors to it.
BasicTextField Colors and Decoration Box:
The decorationBox parameter helps us to add decorations like images, hint, placeholder, background color, etc.
@Composable
private fun MyUI() {
var value by remember {
mutableStateOf("")
}
BasicTextField(
value = value,
onValueChange = { newText ->
value = newText
},
textStyle = TextStyle(
fontSize = 20.sp,
fontWeight = FontWeight.Medium,
color = Color.DarkGray
),
decorationBox = { innerTextField ->
Row(
modifier = Modifier
.padding(horizontal = 64.dp) // margin left and right
.fillMaxWidth()
.background(color = Color(0xFFD2F3F2), shape = RoundedCornerShape(size = 16.dp))
.border(
width = 2.dp,
color = Color(0xFFAAE9E6),
shape = RoundedCornerShape(size = 16.dp)
)
.padding(all = 16.dp), // inner padding
verticalAlignment = Alignment.CenterVertically
) {
Icon(
imageVector = Icons.Default.Search,
contentDescription = "Favorite icon",
tint = Color.DarkGray
)
Spacer(modifier = Modifier.width(width = 8.dp))
innerTextField()
}
}
)
}Output:
The innerTextField() in the decorationBox is mandatory. It is used to control the placement of the text field. You should call it only once.
BasicTextField Cursor Color:
Using cursorBrush, we can change the cursor color.
@Composable
private fun MyUI() {
var value by remember {
mutableStateOf("")
}
BasicTextField(
value = value,
onValueChange = { newText ->
value = newText
},
textStyle = TextStyle(
fontSize = 20.sp,
fontWeight = FontWeight.Medium,
color = Color.DarkGray
),
cursorBrush = Brush.verticalGradient(colors = listOf(Color(0xFF2193b0), Color(0xFF6dd5ed)))
)
}Output:
Related: Gradient Backgrounds in Jetpack Compose
For solid color, call SolidColor() method.
cursorBrush = SolidColor(Color.Green)Output:
BasicTextField Placeholder:
A placeholder is an optional text that is displayed when the text field is in focus and the input text is empty.
@Composable
private fun MyUI(placeholder: String = "Enter Your Name") {
var value by remember {
mutableStateOf("")
}
BasicTextField(
value = value,
onValueChange = { newText ->
value = newText
},
textStyle = TextStyle(
fontSize = 20.sp,
fontWeight = FontWeight.Medium,
color = Color.DarkGray
),
decorationBox = { innerTextField ->
Box(
modifier = Modifier
.padding(horizontal = 64.dp) // margin left and right
.fillMaxWidth()
.border(
width = 2.dp,
color = Color(0xFFAAE9E6),
shape = RoundedCornerShape(size = 16.dp)
)
.padding(horizontal = 16.dp, vertical = 12.dp), // inner padding
) {
if (value.isEmpty()) {
Text(
text = placeholder,
fontSize = 18.sp,
fontWeight = FontWeight.Normal,
color = Color.LightGray
)
}
innerTextField()
}
}
)
}Output:
For other parameters, please refer to the TextField article. They work the same in both APIs.
This is all about BasicTextField in Android Jetpack Compose. I hope you learned something new. If you have any doubts, comment below.
Related:
- AnimatedVisibility API in Jetpack Compose
- How to Check Network Connection Programmatically in Android?
- Awesome Navigation Drawer in Jetpack Compose
- Android AppLovin MAX Integration Guide
References:
