CODEWITHSUNDEEP
androidandroid-jetpack-compose
Harish Padmanabh
Harish Padmanabh

Reputation: 577

Remove Default padding around checkboxes in Jetpack Compose new update

In the new update of jetpack compose , a default padding space will be provided around the touchables as said in official documentation. Refer this

Please help how to avoid this and to implement this "set LocalMinimumTouchTargetEnforcement to false " and where to do this?

Upvotes: 24

Views: 8451

Answers (6)

Rahul Singh Chandrabhan
Rahul Singh Chandrabhan

Reputation: 2496

As per latest compose material library version 1.3.0,

LocalMinimumInteractiveComponentEnforcement

is Deprecated.

Instead use

LocalMinimumInteractiveComponentSize

For Example:

CompositionLocalProvider(LocalMinimumInteractiveComponentSize provides Dp.Unspecified) {
                    Checkbox(
                     modifier: Modifier
                     // etc
                    )
                  }

Upvotes: 0

Emin Turk
Emin Turk

Reputation: 446

androidx.compose.material3:material3:1.3.0-beta04

CompositionLocalProvider(LocalMinimumInteractiveComponentSize provides Dp.Unspecified) {
                Checkbox(
                    checked = checked,
                    onCheckedChange = {
                        checked = it
                    }
                )
            }

Upvotes: 7

Рома Богдан
Рома Богдан

Reputation: 649

You can set Modifier.size(20.dp).

20.dp is checkbox size without paddings. With this fixed size, ripple effect still exist and looks good.

Checkbox(
    modifier = Modifier.size(20.dp),
    checked = checkBoxState,
    onCheckedChange = { isChecked ->
        checkBoxState = isChecked
    })

Upvotes: 4

Thracian
Thracian

Reputation: 66849

You need to provide it with CompositionLocalProvider

CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {
    Checkbox(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}

Upvotes: 45

lbarbosa
lbarbosa

Reputation: 2162

For Material 3, the equivalent to Thracian's answer (thanks for leading me in the right direction!) would be:

CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {
   Checkbox(
       checked = checked,
       onCheckedChange = {
           checked = it
       }
   )
}

Upvotes: 6

saintmarina
saintmarina

Reputation: 297

Try that:

Checkbox(modifier = Modifier.absoluteOffset((-12).dp, 0.dp))

Upvotes: 4

Related Questions