Conditional: pushDown
Scale an element down slightly while a condition is true.
Push down makes an element look pressed. Use it for a custom button that is held down, or for an item that is being dragged.
Usage
The sample shrinks a button while the user holds it. pressed comes from your own state.
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.jantursky.kapow.ConditionalEffect
import com.jantursky.kapow.conditionalEffect
@Composable
fun HoldButton(pressed: Boolean) {
Box(
Modifier
.size(96.dp)
.background(Color.Gray, CircleShape)
.conditionalEffect(pressed, ConditionalEffect.pushDown(scale = 0.9f)),
)
}Parameters
| Parameter | Default | Description |
|---|---|---|
scale |
0.95f |
The size the element is drawn at while the condition holds, as a fraction of its normal size. Must be positive. |
damping |
0.6f |
Damping ratio of the spring. Below 1 it overshoots when it springs back. |
stiffness |
500f |
Stiffness of the spring. Must be positive. |
dim |
0f |
How much the element dims while pressed, from 0 to 1. Under reduced motion a dim of 0 becomes a fifth. |
translation |
0.dp |
How far the element moves down while pressed. |
origin |
TransformOrigin.Center |
The point the element shrinks toward. |
Reduced motion
The element keeps its size and dims slightly while the condition holds, so the pressed state still shows.
Notes
- The element is scaled around
origin(its center by default) and springs back to full size when the condition turns false. - The scale is applied on the element’s graphics layer. Layout keeps the real size, so neighbors don’t move.