Can we update the inner padding of TextField to av...

# compose

[Lucien Guimaraes]

Can we update the inner padding of TextField to avoid the text being cropped depending of the TextField height ? I created a custom TextField to looks like a SearchView, but when I'm trying to customize the height, text is heavily cropped. Code in thread

[Lucien Guimaraes]

@Composable
fun Search(
    surfaceSearchElevation: Dp,
    leadingIconOnClick: () -> Unit,
    searchFieldState: SearchFieldState,
    onQueryChange: (String) -> Unit,
) {
    Surface(
        modifier = Modifier.fillMaxWidth(),
        elevation = surfaceSearchElevation,
    ) {
        if (searchFieldState.focused.not()) {
            LocalFocusManager.current.clearFocus()
        }
        Column {
            Spacer(modifier = Modifier.size(20.dp))
            TextField(
                modifier = Modifier
                    .onFocusChanged { state -> searchFieldState.focused = state.isFocused }
                    .fillMaxWidth()
                    .height(42.dp)
                    .padding(start = 16.dp, end = 16.dp)
                    .border(
                        width = 1.dp,
                        color = HikaColor.Grey.lighten14,
                        shape = RoundedCornerShape(20.dp),
                    ),
                value = searchFieldState.query,
                onValueChange = {
                    searchFieldState.query = it
                    onQueryChange(it.text)
                },
                placeholder = { Text(stringResource(id = R.string.explore_search_bar_placeholder)) },
                leadingIcon = {
                    if (searchFieldState.focused) {
                        Icon(
                            modifier = Modifier.clickable(
                                interactionSource = remember { MutableInteractionSource() },
                                indication = rememberRipple(bounded = false, radius = 24.dp),
                            ) { leadingIconOnClick.invoke() },
                            imageVector = Icons.Outlined.ArrowBack,
                            contentDescription = null,
                            tint = MaterialTheme.colors.onSurface,
                        )
                    } else {
                        Icon(
                            imageVector = Icons.Filled.Search,
                            contentDescription = null,
                            tint = HikaColor.Green.darken1,
                        )
                    }
                },
                singleLine = true,
                colors = TextFieldDefaults.textFieldColors(
                    backgroundColor = Color.Transparent,
                    focusedIndicatorColor = Color.Transparent,
                    disabledIndicatorColor = Color.Transparent,
                    errorIndicatorColor = Color.Transparent,
                    unfocusedIndicatorColor = Color.Transparent,
                ),
                keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search),
                keyboardActions = KeyboardActions(onSearch = { searchFieldState.focused = false }),
            )
            Spacer(modifier = Modifier.size(8.dp))
        }
    }
}

@Composable
fun rememberSearchFieldState(
    query: TextFieldValue = TextFieldValue(""),
    focused: Boolean = false,
): SearchFieldState {
    return remember {
        SearchFieldState(
            query = query,
            focused = focused,
        )
    }
}

@Stable
class SearchFieldState(
    query: TextFieldValue,
    focused: Boolean,
) {
    var query by mutableStateOf(query)
    var focused by mutableStateOf(focused)
}

[Casey Brooks]

Try using BasicTextField, which does not include that extra styling

[Lucien Guimaraes]

So it's impossible to modify that extra styling in TextField ?

[Casey Brooks]

If you look at the implementation of TextField, it’s ultimately just a BasicTextField with some specific styling. But that specific styling is meant to be opinionated to match the Material Design guidelines, which has specific properties that can be customized to spec, of which height is not one of them. Also notice that TextField is in the Compose Material artifact, while BasicTextField is in Foundation

So if you’re wanting to deviate from the Material guidelines for a text field, you’ll need to use BasicTextField and do those customizations yourself.

[Lucien Guimaraes]

Ok thanks I will switch to a BasicTextField!

[Philip Blandford]

The trouble is you then miss out on all other convenient aspects of a TextField, like a placeholder etc, for the sake of removing this unwanted cropping behaviour.