Skip to content

A Compose Multiplatform library providing customizable Squircle shapes for UI components.

License

Notifications You must be signed in to change notification settings

stoyan-vuchev/squircle-shape

Folders and files

NameName
Last commit message
Last commit date
Apr 26, 2024
Apr 26, 2024
Apr 26, 2024
May 24, 2023
Apr 26, 2024
Jun 4, 2023
May 24, 2023
May 24, 2023
Apr 26, 2024
Apr 26, 2024
May 24, 2023
May 24, 2023
May 24, 2023
May 24, 2023
May 24, 2023
Apr 26, 2024

Repository files navigation

Squircle Shape

API GitHub last commit GitHub issues As Seen In - jetc.dev Newsletter Issue #168

An Android Jetpack Compose library providing customizable Squircle shapes for UI components.


Table of Contents


Why Squircle?

  • The squircle is an intermediate shape between a square and a circle, present in digital and real products as well.
  • Whereas the corners of a rounded square remain at 90 degree angle, the edges of a squircle curve smoothly outwards from each corner, forming an arc, thus creating an optically pleasing shape.
  • Currently, there aren't any squircle shapes in Android out of the box. That's why this project was created, with the main goal being to provide an easy implementation of a squircle shape for UI components built with Jetpack Compose.

Requirements


Base requirements:
  • Project minSdk version - 23
  • Project compileSdk version - 34

Library version 1.0.0 - 1.0.3:
  • Jetpack Compose - 1.4.x

Library version 1.0.4 - 1.0.6:
  • Jetpack Compose - 1.5.x

Library version 1.0.7 onwards:
  • Jetpack Compose - 1.6.x

If you're using Compose BOM (e.g. 2024.04.01) and you're not sure which Compose library version is included, check out this link for a detailed BOM to library version mapping.



Gradle Kotlin DSL Setup

Step 1
  • Add the Jitpack maven repository in your settings.gradle.kts file.
repositories {
    maven(url = "https://jitpack.io")
}
Step 2
  • Add the Squircle Shape dependency in your module build.gradle.kts file.
  • Latest version:
implementation("com.github.stoyan-vuchev:squircle-shape:<version>")
  • Or if you're using a version catalog (e.g. libs.versions.toml), declare it in the catalog instead.
[versions]
squircle-shape = "<version>"

[libraries]
squircle-shape = { group = "com.github.stoyan-vuchev", name = "squircle-shape", version.ref = "squircle-shape" }
  • Then include the dependency in your module build.gradle.kts file.
implementation(libs.squircle.shape)

Step 3

  • Sync and rebuild the project. πŸ”„οΈπŸ”¨βœ…

Gradle Groovy Setup

Step 1

  • Add the Jitpack maven repository in your project (root) level build.gradle file.
allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

Step 2

  • Add the Squircle Shape dependency in your module build.gradle file.
  • Latest version:
implementation 'com.github.stoyan-vuchev:squircle-shape:<version>'

Step 3

  • Sync and rebuild the project. πŸ”„οΈπŸ”¨βœ…

Usage

  • For components, use SquircleShape(), which comes in multiple variants for multiple use cases, so different variants have different parameters (percent: Float, radius: Dp, etc.).

  • However, there is a single common parameter in all variants - cornerSmoothing: Float.

  • The cornerSmoothing as you may have or may have not guessed, is responsible for adjusting the smoothness of the corners, the foundation of every squircle shape.

  • Take a look at the SquircleShape.kt and CornerSmoothing.kt files for more information.

  • For a single percent based corner radius, use the variant of SquircleShape() with precent: Int and cornerSmoothing: Float parameters.

SquircleShape(
    percent = 100,
    cornerSmoothing = CornerSmoothing.Medium
)
  • There are also a pixel (Float) and dp (Dp) based variants.

  • For a multiple percent based corner radii, use the variant of SquircleShape() with topStart: Int, topEnd: Int, bottomStart: Int, bottomEnd: Int, and cornerSmoothing: Float parameters.

SquircleShape(
    topStart = 50,
    topEnd = 10,
    bottomStart = 50,
    bottomEnd = 10,
    cornerSmoothing = CornerSmoothing.Medium
)
  • There are also a pixel (Float) and dp (Dp) based variants.

  • Here is an example use of a Button using the default SquircleShape().

Button(
    onClick = { /* Action */ },
    shape = SquircleShape() // Fully rounded squircle shape.
) {
    Text(text = "Full Squircle")
}

Button with Full Squircle shape.

  • This is an example of Image clipped to the default SquircleShape().
Image(
    modifier = Modifier
        .size(128.dp)
        .clip(shape = SquircleShape()), // Clipped to a fully rounded squircle shape.
    painter = painterResource(R.drawable.mlbb_novaria),
    contentDescription = "An image of Novaria.",
    contentScale = ContentScale.Crop
)

A portrait image of Novaria from MLBB clipped to a Squircle shape.

  • There is also a support for drawing squircle shapes in Canvas - drawSquircle().
  • All methods for creating a squircle shape use the squircleShapePath(). You can find it inside the SquircleShapePath.kt file.

Demo app coming soon! πŸ“±βœ¨


License

This project is open source and available under the MIT License.


Contact

Created by @stoyan-vuchev - feel free to contact me!
E-mail - contact.stoyan.vuchev@gmail.com