Recreate the Customizable Text Field from the Taskose UI design kit I acquired, utilizing Android Jetpack Compose.
composeBom = "2024.02.02"
CustomTextField.kt
// Your package ...
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.OutlinedTextFieldDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
@Composable
fun CustomTextField(
value: String = "",
placeholderText: String = "",
placeholderTextStyle: TextStyle = TextStyle(
fontWeight = FontWeight.Normal,
fontSize = 14.sp,
color = Color(0xFF31394F).copy(alpha = 0.5f)
),
focusedBorderColor : Color = Color(0xFF7980FF),
unfocusedBorderColor : Color = Color(0xFF31394F).copy(alpha = 0.5f),
roundedCornerRadius: Dp = 12.dp,
testTag: String = "",
onValueChange: (String) -> Unit,
) {
OutlinedTextField(
modifier = Modifier
.fillMaxWidth()
.testTag(testTag),
value = value,
onValueChange = {
onValueChange(it)
},
singleLine = true,
placeholder = { Text(text = placeholderText, style = placeholderTextStyle) },
colors = OutlinedTextFieldDefaults.colors(
focusedBorderColor = focusedBorderColor,
unfocusedBorderColor = unfocusedBorderColor
),
shape = RoundedCornerShape(roundedCornerRadius)
)
}
CustomTextFieldPreview.kt
// Your package ...
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
@Preview
@Composable
fun CustomTextFieldPreview() {
val inputValue = remember { mutableStateOf("") }
Box(
modifier = Modifier.fillMaxSize().padding(24.dp),
contentAlignment = Alignment.Center
) {
CustomTextField(
value = inputValue.value,
placeholderText = "Placeholder Text",
onValueChange = {
inputValue.value = it
}
)
}
}
For developers eager to deepen their understanding or explore more about modern Android development, a wealth of resources and guides await.