{"id":15622497,"url":"https://github.com/skydoves/cloudy","last_synced_at":"2025-04-14T06:03:03.921Z","repository":{"id":63361809,"uuid":"567247246","full_name":"skydoves/Cloudy","owner":"skydoves","description":"☁️ Jetpack Compose blur effect library, which falls back onto a CPU-based implementation to support older API levels.","archived":false,"fork":false,"pushed_at":"2025-02-25T09:53:39.000Z","size":6380,"stargazers_count":881,"open_issues_count":9,"forks_count":31,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-03-30T23:09:29.468Z","etag":null,"topics":["android","blur","blur-image","jetpack-compose","skydoves"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/skydoves.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"skydoves"}},"created_at":"2022-11-17T11:44:56.000Z","updated_at":"2025-03-27T18:16:20.000Z","dependencies_parsed_at":"2023-11-23T11:33:38.745Z","dependency_job_id":"955cfcd7-2653-4c3d-8258-42d48a99ad5e","html_url":"https://github.com/skydoves/Cloudy","commit_stats":{"total_commits":50,"total_committers":1,"mean_commits":50.0,"dds":0.0,"last_synced_commit":"5fd27ee29301cd2e424d1efa1641521e2209b5b4"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydoves%2FCloudy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydoves%2FCloudy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydoves%2FCloudy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydoves%2FCloudy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skydoves","download_url":"https://codeload.github.com/skydoves/Cloudy/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247569124,"owners_count":20959760,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","blur","blur-image","jetpack-compose","skydoves"],"created_at":"2024-10-03T09:54:11.068Z","updated_at":"2025-04-07T00:13:43.510Z","avatar_url":"https://github.com/skydoves.png","language":"Kotlin","readme":"\u003ch1 align=\"center\"\u003eCloudy\u003c/h1\u003e\u003c/br\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://opensource.org/licenses/Apache-2.0\"\u003e\u003cimg alt=\"License\" src=\"https://img.shields.io/badge/License-Apache%202.0-blue.svg\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://android-arsenal.com/api?level=21\"\u003e\u003cimg alt=\"API\" src=\"https://img.shields.io/badge/API-21%2B-brightgreen.svg?style=flat\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/skydoves/cloudy/actions/workflows/android.yml\"\u003e\u003cimg alt=\"Build Status\" \n  src=\"https://github.com/skydoves/cloudy/actions/workflows/android.yml/badge.svg\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://androidweekly.net/issues/issue-545\"\u003e\u003cimg alt=\"Android Weekly\" src=\"https://skydoves.github.io/badges/android-weekly.svg\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/skydoves\"\u003e\u003cimg alt=\"Profile\" src=\"https://skydoves.github.io/badges/skydoves.svg\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n☁️ Compose blur effect library, which falls back on to a CPU-based implementation to support older API levels.\n\u003c/p\u003e\u003cbr\u003e\n\n\u003e \u003cp align=\"center\"\u003eThe `blur` modifier supports only Android 12 and higher, and `RenderScript` APIs are deprecated starting in Android 12.\n\u003e Cloudy is the backport of the blur effect for Jetpack Compose.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"preview/gif0.gif\" width=\"268\"/\u003e\n\u003cimg src=\"preview/img1.png\" width=\"270\"/\u003e\n\u003cimg src=\"preview/img2.png\" width=\"268\"/\u003e\n\u003c/p\u003e\n\n## Download\n[![Maven Central](https://img.shields.io/maven-central/v/com.github.skydoves/cloudy.svg?label=Maven%20Central)](https://search.maven.org/search?q=g:%22com.github.skydoves%22%20AND%20a:%22cloudy%22)\n\n### Version Catalog\n\nIf you're using Version Catalog, you can configure the dependency by adding it to your `libs.versions.toml` file as follows:\n\n```toml\n[versions]\n#...\ncloudy = \"0.2.6\"\n\n[libraries]\n#...\ncompose-cloudy = { module = \"com.github.skydoves:cloudy\", version.ref = \"cloudy\" }\n```\n\n### Gradle\nAdd the dependency below to your **module**'s `build.gradle.kts` file:\n\n```gradle\ndependencies {\n    implementation(\"com.github.skydoves:cloudy:0.2.6\")\n    \n    // if you're using Version Catalog\n    implementation(libs.compose.cloudy)\n}\n```\n\n## Usage\n\nYou can implement blur effect with `Modifiy.cloudy()` composable function as seen in the below:\n\n```kotlin\nText(\n  modifier = Modifier.cloudy(),\n  text = \"This text is blurred\"\n)\n```\n\n\u003cimg align=\"right\" src=\"preview/img2.png\" width=\"290\"/\u003e\n\nYou can change the degree of the blur effect by changing the `radius` parameter of `Modifier.cloudy()` composable function.\n\n```kotlin\nColumn(\n  modifier = Modifier.cloudy(radius = 15)\n) {\n  Image(..)\n\n  Text(\n    modifier = Modifier\n      .fillMaxWidth()\n      .padding(8.dp),\n    text = posterModel.name,\n    fontSize = 40.sp,\n    color = MaterialTheme.colors.onBackground,\n    textAlign = TextAlign.Center\n  )\n\n  Text(\n    modifier = Modifier\n      .fillMaxWidth()\n      .padding(8.dp),\n    text = posterModel.description,\n    color = MaterialTheme.colors.onBackground,\n    textAlign = TextAlign.Center\n  )\n}\n```\n\n## Observing Blurring Status\n\nYou can monitor the status of the blurring effect by using the `onStateChanged` parameter, which provides `CloudyState`. This allows you to observe and respond to changes in the blurring effect's state effectively.\n\n```kotlin\nGlideImage(\n  modifier = Modifier\n    .size(400.dp)\n    .cloudy(\n      radius = 25,\n      onStateChanged = {\n        // ..\n      }\n    ),\n..\n```\n\n## Maintaining Blurring Effect on Responsive Composable\n\nThe `Modifier.cloudy` captures the bitmap of the composable node under the hood. If you need to use the cloudy modifier as an item in lists or similar structures, you should provide the same [graphic layer](https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/layer/GraphicsLayer) to ensure consistent rendering and performance.\n\n```kotlin\nval graphicsLayer = rememberGraphicsLayer()\n\nLazyVerticalGrid(\n  state = rememberLazyGridState(),\n  columns = GridCells.Fixed(2)\n) {\n  itemsIndexed(key = { index, item -\u003e item.id }, items = posters) { index, item -\u003e\n    HomePoster(\n      poster = item,\n      graphicsLayer = graphicsLayer\n    )\n  }\n}\n\n@Composable\nprivate fun HomePoster(\n  graphicsLayer: GraphicsLayer = rememberGraphicsLayer(),\n  poster: Poster\n) {\n\n    ConstraintLayout {\n      val (image, title, content) = createRefs()\n      GlideImage(\n        modifier = Modifier\n          .cloudy(radius = 15, graphicsLayer = graphicsLayer)\n          .aspectRatio(0.8f)\n          .constrainAs(image) {\n            centerHorizontallyTo(parent)\n            top.linkTo(parent.top)\n          }\n          ..\n```\n\n## Blur Effect with Network Images\n\nYou can easily implement blur effect with [Landscapist](https://github.com/skydoves/landscapist), which is a Jetpack Compose image loading library that fetches and displays network images with Glide, Coil, and Fresco. For more information, see the [Transformation](https://github.com/skydoves/landscapist#transformation) section.\n\n## Find this repository useful? :heart:\nSupport it by joining __[stargazers](https://github.com/skydoves/cloudy/stargazers)__ for this repository. :star: \u003cbr\u003e\nAlso, __[follow me](https://github.com/skydoves)__ on GitHub for my next creations! 🤩\n\n# License\n```xml\nDesigned and developed by 2022 skydoves (Jaewoong Eum)\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n   http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n","funding_links":["https://github.com/sponsors/skydoves"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskydoves%2Fcloudy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskydoves%2Fcloudy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskydoves%2Fcloudy/lists"}