-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Added libs.versions.toml - Modified README.md - Other minor improvements
- Loading branch information
1 parent
e517f9c
commit 1bbd981
Showing
10 changed files
with
229 additions
and
70 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,55 +1,81 @@ | ||
| # Squircle Shape | ||
|
|
||
| > An Android Jetpack Compose library providing customizable Squircle shapes for UI components. | ||
| ## Table of Contents | ||
|
|
||
| * [Why Squircle?](#why-squircle) | ||
| * [Requirements](#requirements) | ||
| * [Setup (Gradle Kotlin DSL)](#setup--gradle-kotlin-dsl-) | ||
| * [Setup (Gradle Groovy)](#setup--gradle-groovy-) | ||
| * [Gradle Kotlin DSL Setup](#gradle-kotlin-dsl-setup) | ||
| * [Gradle Groovy Setup](#gradle-groovy-setup) | ||
| * [Usage](#usage) | ||
| * [License](#license) | ||
| * [Contact](#contact) | ||
|
|
||
| ## 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. | ||
|
|
||
| - 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 | ||
|
|
||
| - Project Min SDK version - `23` | ||
| - Jetpack Compose version - `1.4.3` | ||
| - Jetpack Compose Compiler version - `1.4.7` | ||
| - Kotlin version - `1.8.21` | ||
|
|
||
| ## Setup (Gradle Kotlin DSL) | ||
| ## Gradle Kotlin DSL Setup | ||
|
|
||
| #### Step 1 | ||
| * Add the Jitpack maven repository in your project (root) level `build.gradle.kts` file. | ||
|
|
||
| ```kotlin | ||
| buildscript { | ||
|
|
||
| repositories { | ||
| maven(url = "https://jitpack.io") | ||
| } | ||
| * Add the Jitpack maven repository in your `settings.gradle.kts` file. | ||
|
|
||
| ```kotlin | ||
| repositories { | ||
| maven(url = "https://jitpack.io") | ||
| } | ||
| ``` | ||
|
|
||
| #### Step 2 | ||
|
|
||
| * Add the Squircle Shape dependency in your module `build.gradle.kts` file. | ||
| * [](https://jitpack.io/#stoyan-vuchev/squircle-shape) | ||
|
|
||
| ```kotlin | ||
| implementation("com.github.stoyan-vuchev:squircle-shape:1.0.0") | ||
| implementation("com.github.stoyan-vuchev:squircle-shape:1.0.2") | ||
| ``` | ||
|
|
||
| * Or if you're using a version catalog (e.g. `libs.versions.toml`), declare it there. | ||
|
|
||
| ```toml | ||
| [versions] | ||
| squircle-shape = "1.0.2" | ||
|
|
||
| [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. | ||
|
|
||
| ```kotlin | ||
| implementation(libs.squircle.shape) | ||
| ``` | ||
|
|
||
| #### Step 3 | ||
|
|
||
| * Sync and rebuild the project. | ||
|
|
||
| <br/> | ||
|
|
||
| ## Setup (Gradle Groovy) | ||
| ## Gradle Groovy Setup | ||
|
|
||
| #### Step 1 | ||
|
|
||
| * Add the Jitpack maven repository in your project (root) level `build.gradle` file. | ||
|
|
||
| ```groovy | ||
|
|
@@ -61,36 +87,102 @@ allprojects { | |
| ``` | ||
|
|
||
| #### Step 2 | ||
|
|
||
| * Add the Squircle Shape dependency in your module `build.gradle` file. | ||
| * [](https://jitpack.io/#stoyan-vuchev/squircle-shape) | ||
|
|
||
| ```groovy | ||
| implementation 'com.github.stoyan-vuchev:squircle-shape:1.0.0' | ||
| implementation 'com.github.stoyan-vuchev:squircle-shape:1.0.2' | ||
| ``` | ||
|
|
||
| #### Step 3 | ||
|
|
||
| * Sync and rebuild the project. | ||
|
|
||
| <br/> | ||
|
|
||
| ## Usage | ||
| * Here is an example use of a SquircleShape for a Button component: | ||
|
|
||
| * 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](/squircle-shape/src/main/kotlin/sv/lib/squircleshape/SquircleShape.kt) file for more information. | ||
|
|
||
|
|
||
| * For a single percent based corner radius, use the variant of `SquircleShape()` with `precent: Int` | ||
| and `cornerSmoothing: Float` parameters. | ||
|
|
||
| ```kotlin | ||
| SquircleShape( | ||
| percent = 100, | ||
| cornerSmoothing = 0.72f | ||
| ) | ||
| ``` | ||
|
|
||
| * 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. | ||
|
|
||
| ```kotlin | ||
| SquircleShape( | ||
| topStart = 50, | ||
| topEnd = 10, | ||
| bottomStart = 50, | ||
| bottomEnd = 10, | ||
| cornerSmoothing = 0.72f | ||
| ) | ||
| ``` | ||
|
|
||
| * There are also a pixel (Float) and dp (Dp) based variants. | ||
|
|
||
|
|
||
| * Here is an example use of a Button using the default `SquircleShape()`. | ||
|
|
||
| ```kotlin | ||
| Button( | ||
| onClick = { /* Action */ }, | ||
| shape = SquircleShape() // Fully rounded squircle | ||
| shape = SquircleShape() // Fully rounded squircle shape. | ||
| ) { | ||
| Text(text = "Full Squircle") | ||
| } | ||
| ``` | ||
| * You can customize the shape with the `radius` and `cornerSmoothing` parameters. | ||
| * There is support for a single or multiple corner radius values, defined as percent (Int), dp (Dp) or pixels (Float). | ||
|
|
||
|  | ||
|
|
||
| * This is an example of Image clipped to the default `SquircleShape()`. | ||
|
|
||
| ```kotlin | ||
| 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 | ||
| ) | ||
| ``` | ||
|
|
||
|  | ||
|
|
||
| * 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](/squircle-shape/src/main/kotlin/sv/lib/squircleshape/SquircleShapePath.kt) | ||
| file. | ||
|
|
||
| <br/> | ||
|
|
||
| ## License | ||
|
|
||
| This project is open source and available under the [MIT License](./LICENSE). | ||
|
|
||
| ## Contact | ||
|
|
||
| Created by [@stoyan-vuchev](https://github.com/stoyan-vuchev/) - feel free to contact me! <br/> | ||
| E-mail - [[email protected]](mailto://[email protected]) | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,7 @@ | ||
| // Top-level build file where you can add configuration options common to all sub-projects/modules. | ||
| @Suppress("DSL_SCOPE_VIOLATION") // TODO: Remove once KTIJ-19369 is fixed | ||
| plugins { | ||
| id("com.android.application") version "8.1.0-beta03" apply false | ||
| id("com.android.library") version "8.1.0-beta03" apply false | ||
| id("org.jetbrains.kotlin.android") version "1.8.21" apply false | ||
| } | ||
| alias(libs.plugins.androidApplication) apply false | ||
| alias(libs.plugins.androidLibrary) apply false | ||
| alias(libs.plugins.kotlinAndroid) apply false | ||
| } | ||
| true // Needed to make the Suppress annotation work for the plugins block |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| [versions] | ||
|
|
||
| agp = "8.1.0-beta03" | ||
| kotlin = "1.8.21" | ||
|
|
||
| core-ktx = "1.10.1" | ||
| junit = "4.13.2" | ||
| androidx-test-ext-junit = "1.1.5" | ||
| androidx-test-espresso-core = "3.5.1" | ||
|
|
||
| androidx-appcompat-version = "1.6.1" | ||
|
|
||
| lifecycle-runtime-ktx = "2.6.1" | ||
| lifecycle-runtime-compose = "2.6.1" | ||
| lifecycle-viewmodel-compose = "2.6.1" | ||
|
|
||
| activity-compose = "1.7.1" | ||
| navigation-compose = "2.5.3" | ||
|
|
||
| compose-bom = "2023.05.01" | ||
| compose-version = "1.4.3" | ||
| compose-compiler-version = "1.4.7" | ||
|
|
||
| material = "1.9.0" | ||
|
|
||
| [libraries] | ||
|
|
||
| core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "core-ktx" } | ||
| junit = { group = "junit", name = "junit", version.ref = "junit" } | ||
| androidx-test-ext-junit = { group = "androidx.test.ext", name = "junit", version.ref = "androidx-test-ext-junit" } | ||
| androidx-test-espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "androidx-test-espresso-core" } | ||
|
|
||
| androidx-appcompat = { group = "androidx.appcompat", name = "appcompat", version.ref = "androidx-appcompat-version" } | ||
| androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "compose-version" } | ||
| androidx-compose-runtime = { group = "androidx.compose.runtime", name = "runtime", version.ref = "compose-version" } | ||
| androidx-compose-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "compose-version" } | ||
|
|
||
| lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "lifecycle-runtime-ktx" } | ||
| lifecycle-runtime-compose = { group = "androidx.lifecycle", name = "lifecycle-runtime-compose", version.ref = "lifecycle-runtime-compose" } | ||
| lifecycle-viewmodel-compose = { group = "androidx.lifecycle", name = "lifecycle-viewmodel-compose", version.ref = "lifecycle-viewmodel-compose" } | ||
|
|
||
| activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activity-compose" } | ||
| navigation-compose = { group = "androidx.navigation", name = "navigation-compose", version.ref = "navigation-compose" } | ||
|
|
||
| material = { module = "com.google.android.material:material", version.ref = "material" } | ||
|
|
||
| compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "compose-bom" } | ||
| compose-ui = { group = "androidx.compose.ui", name = "ui" } | ||
| compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics" } | ||
| compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling" } | ||
| compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" } | ||
| compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest" } | ||
| compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" } | ||
| compose-material3 = { group = "androidx.compose.material3", name = "material3" } | ||
|
|
||
| [plugins] | ||
|
|
||
| androidApplication = { id = "com.android.application", version.ref = "agp" } | ||
| androidLibrary = { id = "com.android.library", version.ref = "agp" } | ||
| kotlinAndroid = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" } | ||
|
|
||
| [bundles] |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.