tarikyasar
commented
1 year ago Hi Benjamin, yes there is. You should pass the enableBottomLine parameter true to OhTeePeeInput composable's configurations class. This way border color and width will affect the bottom line. You can add different border colors for different cell states. For example make it blue when it's active, make it white when it is full, and make it transparent when it is empty. I added a sample code and a screen recording below. But there is one issue with this approach, when you both enable bottom line and make the shape somewhat round, it messes up the view and it looks bad. Thus we disabled shape configuration when bottom line is enabled.
` val defaultConfig = OhTeePeeCellConfiguration.withDefaults( backgroundColor = backgroundColor.copy(alpha = 0.6f), textStyle = TextStyle( color = Color.White, fontSize = 18.sp, fontWeight = FontWeight.Bold ), borderColor = Color.Transparent, borderWidth = 4.dp )
OhTeePeeInput( value = otpValue, onValueChange = { newValue, isValid -> otpValue = newValue }, isValueInvalid = otpValue == "1111", configurations = OhTeePeeConfigurations.withDefaults( cellsCount = 4, emptyCellConfig = defaultConfig, activeCellConfig = defaultConfig, cellModifier = Modifier .padding(horizontal = 4.dp) .size(48.dp), enableBottomLine = true ), autoFocusByDefault = false ) `
https://github.com/composeuisuite/ohteepee/assets/47866841/67d602c9-cf1b-4a24-9688-7a89a71732be
benjdero
I'm currently migrating views from xml to Jetpack Compose.
The pin entry view style I used with xml was similar to Material Design Filled text field. With a colored border below the active cell.
Is there a way to achieve something similar with this library?