https://kotlinlang.org logo
#compose
Title
# compose
k

Ketan

09/04/2020, 6:33 AM
TextField
- How can I style the underline colour, error text colour? Is there any attribute that I can set and it styles the
TextField
the way I want?
Copy code
Card(color = MaterialTheme.colors.onBackground,
                elevation = 16.dp,
                modifier = Modifier.fillMaxWidth()
                    .height(160.dp)
            ) {
                Column(modifier = Modifier.fillMaxWidth()
                    .padding(horizontal = 32.dp),
                    verticalArrangement = Arrangement.Center,
                    horizontalGravity = Alignment.CenterHorizontally
                ) {
                    TextField(value = TextFieldValue("User"),
                        modifier = Modifier.preferredHeight(48.dp),
                        cursorColor = MaterialTheme.colors.background,
                        textColor = MaterialTheme.colors.background,
                        onValueChange = {})
                    Spacer(modifier = Modifier.height(16.dp))
                    TextField(value = TextFieldValue("Password"),
                        modifier = Modifier.preferredHeight(48.dp),
                        cursorColor = MaterialTheme.colors.background,
                        textColor = MaterialTheme.colors.background,
                        visualTransformation = PasswordVisualTransformation(),
                        onValueChange = {})
                    
                }
            }
            Spacer(modifier = Modifier.height(16.dp))
            Row(modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.End,
                verticalGravity = Alignment.CenterVertically
            ) {
                OutlinedButton(onClick = {},
                    elevation = 16.dp,
                    border = Border(2.dp, color = MaterialTheme.colors.onBackground)
                ) {
                    Text(text = "Reset", color = MaterialTheme.colors.onBackground)
                }
                Spacer(modifier = Modifier.width(16.dp))
                Button(onClick = {},
                    elevation = 16.dp,
                    backgroundColor = MaterialTheme.colors.onBackground,
                ) {
                    Text(text = "Login")
                }
            }
The above code produces
s

satyan

09/04/2020, 10:52 AM
I think the barebone TextField is on purpose. If you need to style it just use other composable/modifier to underline it, box it etc. For some sample you can see Jetchat with creates it's own TextField. It's covered in one of the three Compose video by Google.

https://youtu.be/SMOhl9RK0BA

k

Ketan

09/04/2020, 3:30 PM
Cool
3 Views