3

I am trying to adjust the start padding of the label in my TextSearchBar composable.

I understand that one option is to use a BasicTextField composable but i want to avoid this and use contentPadding parameter via decorationBox added in androidx.compose.material:material:1.2.0-alpha04 (mentioned by jeran in below post).

I am having difficulties in adding decorationBox (not too familiar on how lambda parameter function works). Please help how i can implement decorationBox to adjust the start padding of the label text?

remove default padding on jetpack compose textfield.

@Composable
fun TextSearchBar(
    modifier: Modifier = Modifier,
    value: String,
    label: String,
    onDoneActionClick: () -> Unit = {},
    onClearClick: () -> Unit = {},
    onFocusChanged: (FocusState) -> Unit = {},
    onValueChanged: (String) -> Unit,
) {
    TextField(
        value = value,
        onValueChange = { query ->
            onValueChanged(query)
        },
        modifier = modifier
            .padding(horizontal = 4.dp, vertical = 0.dp)
            .fillMaxWidth()
            .onFocusChanged { onFocusChanged(it) },
        textStyle = MaterialTheme.typography.subtitle1,
        label = { Text(text = label) },
        trailingIcon = {
            IconButton(onClick = { onClearClick() }) {
                Icon(imageVector = Icons.Filled.Clear, contentDescription = "Clear")
            }
        },
        keyboardOptions = KeyboardOptions(
            imeAction = ImeAction.Done,
            keyboardType = KeyboardType.Text
        ),
        keyboardActions = KeyboardActions(onDone = { onDoneActionClick() }),
        singleLine = true,
        colors = TextFieldDefaults.textFieldColors(textColor = Color.Gray,
            backgroundColor = Color.LightGray,
            focusedIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            disabledIndicatorColor = Color.Transparent
        ),
        //decorationBox = {???}
    )
}
mars8
  • 770
  • 1
  • 11
  • 25
  • You seems to misunderstood the answer. `decorationBox` wasn't added to `TextField`, the answer you're referring to shows how to implement the view which will work just like `TextField` but using `BasicTextField`, meaning that you can customize `decorationBox`. – Phil Dukhov Apr 02 '22 at 12:02
  • is there a real world example of how to implement this? the answer provided only a snippet and not a front to back example. – mars8 Apr 02 '22 at 12:10

1 Answers1

7

You can use the BasicTextField instead of the TextField.

Use the contentPadding attribute to change the paddings:

val colors = TextFieldDefaults.textFieldColors()

BasicTextField(
    value = text,
    onValueChange = { text = it },
    textStyle = MaterialTheme.typography.subtitle1,
    modifier = Modifier
        .fillMaxWidth()
        .background(
            color = colors.backgroundColor(enabled).value,
            shape = RoundedCornerShape(8.dp)
        ),
    interactionSource = interactionSource,
    enabled = enabled,
    singleLine = singleLine
) {
    TextFieldDefaults.TextFieldDecorationBox(
        value =text,
        innerTextField = it,
        singleLine = singleLine,
        enabled = enabled,
        visualTransformation = VisualTransformation.None,
        label = { Text(text = "label") },
        trailingIcon = {
            IconButton(onClick = {  }) {
                Icon(imageVector = Icons.Filled.Clear, contentDescription = "Clear")
            }
        },
        placeholder = { /* ... */ },
        interactionSource = interactionSource,
        // change the start padding
        contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(
            start = 4.dp
        )
    )
}

enter image description here

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
  • where does the `interactionSource` come from oder how to initialize is? Thanks – Mark Delphi Apr 11 '23 at 20:04
  • 1
    @MarkDelphi yes you need to initialize it before the `BasicTextField` declaration starts. like this --> val interactionSource = remember { MutableInteractionSource() } – Wahib Ul Haq Jul 31 '23 at 12:48