Thread
#compose
    Lucien Guimaraes

    Lucien Guimaraes

    1 year ago
    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
    @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)
    }
    c

    Casey Brooks

    1 year ago
    Try using
    BasicTextField
    , which does not include that extra styling
    Lucien Guimaraes

    Lucien Guimaraes

    1 year ago
    So it's impossible to modify that extra styling in TextField ?
    c

    Casey Brooks

    1 year ago
    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

    Lucien Guimaraes

    1 year ago
    Ok thanks I will switch to a
    BasicTextField
    !
    p

    Philip Blandford

    1 year ago
    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.