Why JetpackCompose Material Theme shape is about the edge roundedness?

user_3286489 0
Viewed 277

In Jetpack Compose, we can easily define Material Theming for the Color, Typography and Shape. The one that confuses me is the Shape.

The default shape is

val Shapes = Shapes(
    small = RoundedCornerShape(4.dp),
    medium = RoundedCornerShape(4.dp),
    large = RoundedCornerShape(0.dp)
)

Why shape's size is related to corner radius? (e.g. the smaller one is, the more rounded shape?). Any rational behind it

android-jetpack-compose material-design android
1 Answers

In the Material Design all components are grouped into shape categories based on their size.
Shape categories include:

  • Small components
  • Medium components
  • Large components

For each of them you can define the type of shape defining corner and edge angles and curves.The corners are defined by a shape family (RoundedCorner for example) and a shape size (4.dp for example). There are some built-in shapes like RoundedCornerShape, CutCornerShape, CircleShape.

Each component is classified under a category. Check this link for more info.

For example in the Button definition you can find the default:

shape: Shape = MaterialTheme.shapes.small
user_20165620
Related