{"id":20881449,"url":"https://github.com/js-bhavyansh/shared_element_transition","last_synced_at":"2025-12-28T02:11:16.079Z","repository":{"id":248359225,"uuid":"828448673","full_name":"js-bhavyansh/Shared_Element_Transition","owner":"js-bhavyansh","description":"Implemented shared element transitions with Compose Animation, type-safe navigation, and Coil for fetching image from internet.","archived":false,"fork":false,"pushed_at":"2024-07-14T09:34:14.000Z","size":111,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-19T10:08:01.960Z","etag":null,"topics":["android","animation","coil","coil-image-loader","compose-animation","jetpack-compose","kotlin-serialization","shared-element-transition"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/js-bhavyansh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-14T07:20:06.000Z","updated_at":"2024-12-25T17:20:35.000Z","dependencies_parsed_at":"2024-07-14T10:59:02.171Z","dependency_job_id":null,"html_url":"https://github.com/js-bhavyansh/Shared_Element_Transition","commit_stats":null,"previous_names":["bhavyansh03-tech/shared_element_transition","js-bhavyansh/shared_element_transition"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-bhavyansh%2FShared_Element_Transition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-bhavyansh%2FShared_Element_Transition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-bhavyansh%2FShared_Element_Transition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-bhavyansh%2FShared_Element_Transition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/js-bhavyansh","download_url":"https://codeload.github.com/js-bhavyansh/Shared_Element_Transition/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243258498,"owners_count":20262300,"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","animation","coil","coil-image-loader","compose-animation","jetpack-compose","kotlin-serialization","shared-element-transition"],"created_at":"2024-11-18T07:24:55.565Z","updated_at":"2025-12-28T02:11:16.033Z","avatar_url":"https://github.com/js-bhavyansh.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Shared Element Transition with Jetpack Compose\n\nThis project demonstrates how to implement shared element transitions using Jetpack Compose Animation and type-safe navigation with serialization. It also utilizes Coil to fetch images from the internet through URLs.\n\n## Features\n\n- **Shared Element Transition:** Smooth and customizable transitions between composable elements.\n- **Type-safe Navigation:** Robust navigation between screens using Kotlin serialization.\n- **Image Loading with Coil:** Efficient image loading from URLs.\n\n## Screenshots\n\n\u003cimg src=\"https://github.com/user-attachments/assets/46f49444-7fc5-468c-9527-7c07e6d68dda\" alt=\"First Screenshot\" style=\"width: 200px; height: auto; margin-right: 10px;\"\u003e\n\n## Installation\n\n1. Clone the repository:\n    ```sh\n    git clone https://github.com/Bhavyansh03-tech/Shared_Element_Transition.git\n    ```\n\n2. Open the project in Android Studio.\n\n3. Sync the project with Gradle files.\n\n## Usage\n\n### Dependencies\n\nAdd the following dependencies in your `libs.versions.toml` file:\n\n```toml\n[versions]\n# COIL COMPOSE :-\u003e\ncoil = \"2.6.0\"\n# ANIMATION :-\u003e\nanimation = \"1.7.0-beta05\"\nfoundation = \"1.7.0-beta05\"\n# NAVIGATION :-\u003e\nnavigationCompose = \"2.8.0-beta05\"\nkotlinxSerializationJson = \"1.7.1\"\n\n[libraries]\n# ANIMATION :-\u003e\nandroidx-animation = { module = \"androidx.compose.animation:animation\", version.ref = \"animation\" }\nandroidx-animation-core = { module = \"androidx.compose.animation:animation-core\", version.ref = \"animation\" }\nandroidx-foundation = { module = \"androidx.compose.foundation:foundation\", version.ref = \"foundation\" }\n# NAVIGATION :-\u003e\nandroidx-navigation-compose = { group = \"androidx.navigation\", name = \"navigation-compose\", version.ref = \"navigationCompose\" }\nkotlinx-serialization-json = { module = \"org.jetbrains.kotlinx:kotlinx-serialization-json\", version.ref = \"kotlinxSerializationJson\" }\n# COIL COMPOSE :-\u003e\ncoil = { module = \"io.coil-kt:coil-compose\", version.ref = \"coil\" }\n\n[plugins]\n# COMPOSE COMPILER :-\u003e\ncompose-compiler = { id = \"org.jetbrains.kotlin.plugin.compose\", version.ref = \"kotlin\" }\n# NAVIGATION\nkotlin-serialization = { id = \"org.jetbrains.kotlin.plugin.serialization\", version.ref = \"kotlin\" }\n```\n\n### Kotlin Serialization\n\nTo use Kotlin serialization, first, annotate your data class with `@Serializable`:\n\n```kotlin\nimport kotlinx.serialization.Serializable\n\n@Serializable object Home\n@Serializable data class Detail(\n    val imageIdArg: Int = 1\n)\n```\nThen, pass the serialized data through the navigation:\n\n```kotlin\ncomposable\u003cDetail\u003e {\n        val args = it.toRoute\u003cDetail\u003e()\n        DetailScreen(\n              animatedVisibilityScope = this@composable,\n              imageId = args.imageIdArg, // Passing Image Id As Argument.\n              onClick = { navController.popBackStack() }  // Going back to previous activity by removing it from back stack.\n        )\n}\n```\n\n### Shared Element Transition\n\nShared element transitions are implemented for both images and text. Below is an example of how to achieve this:\n\n```kotlin\n@OptIn(ExperimentalSharedTransitionApi::class)\n@Composable\nfun SharedTransitionScope.DetailScreen(\n    animatedVisibilityScope: AnimatedVisibilityScope,\n    imageId: Int,\n    onClick: () -\u003e Unit\n) {\n    Column(modifier = Modifier.fillMaxSize()) {\n        AsyncImage(\n            modifier = Modifier\n                .sharedElement(\n                    state = rememberSharedContentState(key = \"image-${imageId}\"),\n                    animatedVisibilityScope = animatedVisibilityScope\n                )\n                .fillMaxWidth()\n                .height(350.dp)\n                .clickable { onClick() },\n            model = imageList[imageId - 1].photo,\n            contentDescription = null,\n            contentScale = ContentScale.Crop\n        )\n\n        Box(\n            modifier = Modifier\n                .fillMaxSize()\n                .padding(all = 12.dp)\n        ) {\n            Text(\n                modifier = Modifier\n                    .sharedBounds(\n                        sharedContentState = rememberSharedContentState(key = \"text-${imageId}\"),\n                        animatedVisibilityScope = animatedVisibilityScope\n                    ),\n                text = imageList[imageId - 1].title,\n                fontSize = MaterialTheme.typography.titleLarge.fontSize,\n                fontWeight = FontWeight.Medium\n            )\n        }\n    }\n}\n```\n\n#### Image Transition\n```kotlin\nAsyncImage(\n      modifier = Modifier\n          .sharedElement(\n              state = rememberSharedContentState(key = \"image-${imageId}\"),\n              animatedVisibilityScope = animatedVisibilityScope\n          )\n          .fillMaxWidth()\n          .height(350.dp)\n          .clickable { onClick() },\n      model = imageList[imageId - 1].photo,\n      contentDescription = null,\n      contentScale = ContentScale.Crop\n)\n```\n\n#### Text Transition\n\n```kotlin\nText(\n    modifier = Modifier\n        .sharedBounds(\n            sharedContentState = rememberSharedContentState(key = \"text-${imageId}\"),\n            animatedVisibilityScope = animatedVisibilityScope\n        ),\n    text = imageList[imageId - 1].title,\n    fontSize = MaterialTheme.typography.titleLarge.fontSize,\n    fontWeight = FontWeight.Medium\n)\n```\n\n\n## Contributing\n\nContributions are welcome! Please fork the repository and submit a pull request for any improvements or bug fixes.\n\n1. Fork the repository.\n2. Create your feature branch (`git checkout -b feature/your-feature`).\n3. Commit your changes (`git commit -am 'Add some feature'`).\n4. Push to the branch (`git push origin feature/your-feature`).\n5. Create a new Pull Request.\n\n## Contact\n\nFor questions or feedback, please contact [@Bhavyansh03-tech](https://github.com/Bhavyansh03-tech).\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjs-bhavyansh%2Fshared_element_transition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjs-bhavyansh%2Fshared_element_transition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjs-bhavyansh%2Fshared_element_transition/lists"}