[안드로이드 Compose] 버튼 Custom Shadow

버튼에 그림자 효과를 줄 수 있는 코드입니다.

 

	fun Modifier.drawColoredShadow(
	color: Color,
	alpha: Float = 0.2f,
	borderRadius: Dp = 0.dp,
	shadowRadius: Dp = 20.dp,
	offsetY: Dp = 0.dp,
	offsetX: Dp = 0.dp
	) = this.drawBehind {
	val transparentColor = android.graphics.Color.toArgb(color.copy(alpha = 0.0f).value.toLong())
	val shadowColor = android.graphics.Color.toArgb(color.copy(alpha = alpha).value.toLong())
	this.drawIntoCanvas {
	val paint = Paint()
	val frameworkPaint = paint.asFrameworkPaint()
	frameworkPaint.color = transparentColor
	frameworkPaint.setShadowLayer(
	shadowRadius.toPx(),
	offsetX.toPx(),
	offsetY.toPx(),
	shadowColor
	)
	it.drawRoundRect(
	0f,
	0f,
	this.size.width,
	this.size.height,
	borderRadius.toPx(),
	borderRadius.toPx(),
	paint
	)
	}
	}

view raw Compose.kt hosted with ❤ by GitHub

 

 

 

사용 방법은 다음과 같습니다.

	Button(
	elevation = ButtonDefaults.elevation(
	defaultElevation = 0.dp,
	pressedElevation = 0.dp,
	disabledElevation = 0.dp
	),
	enabled = true,
	shape = RoundedCornerShape(10.dp),
	border = BorderStroke(4.dp, buttonBorderGradient),
	colors = ButtonDefaults.buttonColors(
	backgroundColor = Color.Black,
	disabledBackgroundColor = Color.LightGray
	),
	interactionSource = interactionSourceForSecondButton,
	modifier = Modifier.drawColoredShadow(
	color = Color.Red,
	alpha = 0.5f,
	borderRadius = 10.dp,
	shadowRadius = shadowRadiusWithAnim,
	offsetX = 0.dp,
	offsetY = 5.dp
	),
	onClick = {
	Log.d("TAG","Button 5가 클릭 되었다.")
	}) {
	Text(text = "Button 5", color = Color.White)
	}

view raw Compose.kt hosted with ❤ by GitHub

 

 

결과물

 

 

커스텀 그림자의 출처는 다음과 같습니다.
https://gist.github.com/cedrickring/0497965b0658d6727aaec531f59e8c5c