Android Compose Task App Implementation Series: Customizable Text Field
Production App
Anothertask Version 1.0.0 is available here if you are interested 😉
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.
If you’ve found this resource helpful, consider sharing your support through claps or a follow, and stay tuned for more insights into the evolving landscape of Android development. See you the next time!
Deuk Services: Your Gateway to Leading Android Innovation
Are you looking to boost your business with top-tier Android solutions?Partner with Deuk services and take your projects to unparalleled heights.
🚀 Boost Your Productivity with Notion
New to Notion? Discover how it can revolutionize your productivity
Ready to take your productivity to the next level? Integrate this content into your Notion workspace with ease:
1 Access the Notion Version of this Content
2 Look for the Duplicate
button at the top-right corner of the page
3 Click on it to add this valuable resource to your Notion workspace
Seamlessly integrate this guide into your Notion workspace for easy access and swift reference. Leverage Notion AI to search and extract crucial insights, enhancing your productivity. Start curating your knowledge hub with Notion AI today and maximize every learning moment.