Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A simple demonstration of rectangles with extra large corner radii. From https://ryanharter.com/blog/2022/09/rounded-corners/
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.Slider
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.ryanharter.cornerradiustest.ui.theme.CornerRadiusTestTheme
import kotlin.math.roundToInt
@Composable
fun RoundedRect(
modifier: Modifier = Modifier,
topLeftRadius: CornerRadius = CornerRadius.Zero,
topRightRadius: CornerRadius = CornerRadius.Zero,
bottomRightRadius: CornerRadius = CornerRadius.Zero,
bottomLeftRadius: CornerRadius = CornerRadius.Zero,
) {
Canvas(
modifier = modifier
) {
// top
drawLine(
Color.Green,
Offset(topLeftRadius.x, 0f),
Offset(size.width - topRightRadius.x, 0f),
strokeWidth = 3f,
)
// right
drawLine(
Color.Green,
Offset(size.width, topRightRadius.y),
Offset(size.width, size.height - bottomRightRadius.y),
strokeWidth = 3f,
)
// bottom
drawLine(
Color.Green,
Offset(size.width - bottomRightRadius.x, size.height),
Offset(bottomLeftRadius.x, size.height),
strokeWidth = 3f,
)
// left
drawLine(
Color.Green,
Offset(0f, size.height - bottomLeftRadius.y),
Offset(0f, topLeftRadius.y),
strokeWidth = 3f,
)
// top left corner
drawArc(
color = Color.Blue,
startAngle = -180f,
sweepAngle = 90f,
useCenter = false,
size = Size(topLeftRadius.x * 2f, topLeftRadius.y * 2f),
style = Stroke(width = 3f),
)
// top right corner
drawArc(
color = Color.Blue,
startAngle = -90f,
sweepAngle = 90f,
useCenter = false,
topLeft = Offset(size.width - topRightRadius.x * 2f, 0f),
size = Size(topRightRadius.x * 2f, topRightRadius.y * 2f),
style = Stroke(width = 3f),
)
// bottom right corner
drawArc(
color = Color.Blue,
startAngle = 0f,
sweepAngle = 90f,
useCenter = false,
topLeft = Offset(
size.width - bottomRightRadius.x * 2f,
size.height - bottomRightRadius.y * 2f
),
size = Size(
bottomRightRadius.x * 2f,
bottomRightRadius.y * 2f
),
style = Stroke(width = 3f),
)
// bottom left corner
drawArc(
color = Color.Blue,
startAngle = 90f,
sweepAngle = 90f,
useCenter = false,
topLeft = Offset(
0f,
size.height - bottomLeftRadius.y * 2f
),
size = Size(
bottomLeftRadius.x * 2f,
bottomLeftRadius.y * 2f
),
style = Stroke(width = 3f),
)
}
}
@Composable
fun RoundedRectExerciser(
modifier: Modifier = Modifier
) {
val width = 100.dp
val widthPx = with(LocalDensity.current) {
width.toPx()
}
var cornerRadius by remember { mutableStateOf(0f) }
Surface(modifier) {
Column(
verticalArrangement = Arrangement.spacedBy(10.dp),
modifier = Modifier
.padding(24.dp)
) {
Column {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
) {
Text("Corner Radius")
Text("${(cornerRadius * 100f).roundToInt()} %")
}
Slider(
value = cornerRadius,
onValueChange = { cornerRadius = it },
valueRange = 0f..1f,
)
}
Column(
verticalArrangement = Arrangement.spacedBy(10.dp),
modifier = Modifier.align(Alignment.CenterHorizontally),
) {
Row(
horizontalArrangement = Arrangement.spacedBy(10.dp),
) {
RoundedRect(
topLeftRadius = CornerRadius(widthPx * cornerRadius),
modifier = Modifier.size(width),
)
RoundedRect(
topRightRadius = CornerRadius(widthPx * cornerRadius),
modifier = Modifier.size(width),
)
}
Row(
horizontalArrangement = Arrangement.spacedBy(10.dp),
) {
RoundedRect(
bottomLeftRadius = CornerRadius(widthPx * cornerRadius),
modifier = Modifier.size(width),
)
RoundedRect(
bottomRightRadius = CornerRadius(widthPx * cornerRadius),
modifier = Modifier.size(width),
)
}
RoundedRect(
topLeftRadius = CornerRadius(widthPx * cornerRadius),
topRightRadius = CornerRadius(widthPx * cornerRadius),
bottomRightRadius = CornerRadius(widthPx * cornerRadius),
bottomLeftRadius = CornerRadius(widthPx * cornerRadius),
modifier = Modifier
.size(width)
.align(Alignment.CenterHorizontally),
)
}
}
}
}
@Preview
@Composable
private fun Preview() {
CornerRadiusTestTheme {
RoundedRectExerciser()
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment