Objective

Recreate the Customizable Text Field from the Taskose UI design kit I acquired, utilizing Android Jetpack Compose.

Environment

• Android Studio Iguana | 2023.2.1
• Compose version: composeBom = "2024.02.02"
• Pixel 6 API 30 Emulator
• Project Minimum SDK: 27

Implementation

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
            }
        )
    }
}

Preview Result

Explore More

For developers eager to deepen their understanding or explore more about modern Android development, a wealth of resources and guides await.

Android Compose Tutorials Library

The Ultimate Android Development Career Guide