Box

Box

TouchSlop

Box

LayoutPadding

LayoutPadding

@Composable
fun ExpandCollapseButton(
  up: Boolean,
  onStateChange: (Boolean) -> Unit,
  modifier: Modifier = Modifier.None,
  animationDuration: Int = 200,
  color: Color = MaterialTheme.colors().secondary
) {
  Box(modifier) {
    Ripple(bounded = false) {
      Caret(
        LayoutPadding(14.dp) + 
        ContentGravity.Center + 
        LayoutSize(20.dp) + 
        OnClick {
          onStateChange(!up)
        }
        up, 
        color, 
        animationDuration
      )
    }
  }
}

@Composable
private fun Caret(
  modifier: Modifier,
  up: Boolean,
  activeColor: Color,
  animationDuration: Int
) {
  val strokeWidthDp = 3.dp
  val paint = remember {
    Paint().apply {
      isAntiAlias = true
      strokeCap = StrokeCap.round
      color = activeColor
      style = PaintingStyle.stroke
    }
  }

  // simpler animation api for simple transitions
  // return value will be animated between 1f and 0f. It's just a Float.
  val t = animate(if (up) 1f else 0f, animationDuration)
  val animatedYOffset = lerp(0f, 1f, t) // equivalent to just `t`, but you get the idea
  val fraction = lerp(-1f, 1f, t)
  
  Canvas(modifier) {
    val strokeWidth = strokeWidthDp.toPx().value
    paint.strokeWidth = strokeWidth
    val height = size.height.value / 4
    val x = size.height.value / 4
    val yOffset = (size.height.value - height) / 2
    val path = Path()

    path.moveTo(x, yOffset + height * animatedYOffset)
    path.relativeLineTo(x, -height * fraction)
    path.relativeLineTo(x, height * fraction)

    drawPath(path, paint)
  }
}

Paint

OnClick

animate