Jetpack Compose library for implementing motion system in Material Components for Android.
A library which provides motion patterns support for Jetpack Compose.
A library which provides motion patterns support for Jetpack Navigation Compose.
Licensed under the Apache 2.0 license. See LICENSE for details.
I have 4 navigation routes: first, second, third, fourth.
When i try to navigate first -> second -> third -> fourth, the transitions behave normally as it should.
However when i try to navigate back (back press) first <- second <- third <- fourth, the only transition that behave normally is the first pop backstack (in this case third <- fourth), other pop backstack just overlaps the current backstack.
I'm not sure how to explain it well but i have included a sample project for testing it here and a video here
It is expected that transition animations can be applied to navigation-compose after some time. The following link is related to this.
Then, it seems that it needs to be changed to a form that can be combined with navigation-compose.
enhancementOn v0.7.4, the back press behavior issue is fixed but when using navigation.navigateUp() it still occured.
I have 3 routes, for example: splash, main, search. When i'm navigating splash -> main -> search, i called navigation.navigateUp() on search. It returns to main then splash reappears again.
The splash route should not reappears after calling navigation.navigateUp() on search.
Add any other context about the problem here.
The navigation sample usage does not actually work, as rememberSlideDistance() cannot be called from the lambda, it needs to be in a composable function
Steps to reproduce the behavior: Implement the usage sample
It works
bugExplicit API mode:
@JvmSynthetic:
Excludes Explicit API mode for test codes:
Import version catalogs into buildSrc:
var visible: Boolean by remember { mutableStateOf(false) }
Box(
modifier = Modifier.circularReveal(
visible = visible,
center = { fullSize ->
Offset(x = 1f * fullSize.width, y = 0f * fullSize.height) // TopRight
},
)
) { ... }
https://user-images.githubusercontent.com/3405740/176953579-4704985a-706a-4681-b41d-123067c2719f.mp4
Explicit API mode:
Built to work with Jetpack Compose 1.4.0-alpha01
Built to work with Jetpack Compose 1.3.0
Built to work with Jetpack Compose 1.3.0-beta01
Built to work with Jetpack Compose 1.3.0-alpha03
Built to work with Jetpack Compose 1.2.1
Built to work with Jetpack Compose 1.2.0
Built to work with Jetpack Compose 1.3.0-alpha01
circularReveal modifier in 'core' library!var visible: Boolean by remember { mutableStateOf(false) }
Box(
modifier = Modifier.circularReveal(
visible = visible,
center = { fullSize ->
Offset(x = 1f * fullSize.width, y = 0f * fullSize.height) // TopRight
},
)
) { ... }
For the full codes, refer to CircularRevealScreen.kt file.
With this version, you can easily migrate to this library from accompanist-navigation-animation. If you are interested, check out the migration guide. đ
dependencies {
implementation "io.github.fornewid:material-motion-compose-navigation:<version>"
- implementation "io.github.fornewid:material-motion-compose-core:<version>"
}
MotionSpec is deprecated and use ContentTransform insteadIf you were already using this library, you must migrate your codes. Please check out the migration guide.
MotionSpec (#168) @fornewidcircularReveal modifier (#166) @fornewidBuilt to work with Jetpack Compose 1.2.0-rc03
Built to work with Jetpack Compose 1.2.0-rc02
Built to work with Jetpack Compose 1.2.0-rc01
Built to work with Jetpack Compose 1.2.0-beta03
Built to work with Jetpack Compose 1.2.0-beta02
Built to work with Jetpack Compose 1.2.0-beta01
compose-material dependency from library modules (#154) @fornewidBuilt to work with Jetpack Compose 1.2.0-alpha08
Now 'Material Motion for Jetpack Compose' is available on Maven Central! :tada: :tada: :tada:
repositories {
- maven { url "https://jitpack.io" }
+ mavenCentral()
}
dependencies {
- implementation "com.github.fornewid.material-motion-compose:core:<version>"
+ implementation "io.github.fornewid:material-motion-compose-core:<version>"
- implementation "com.github.fornewid.material-motion-compose:navigation:<version>"
+ implementation "io.github.fornewid:material-motion-compose-navigation:<version>"
}
Built to work with Jetpack Compose 1.1.1
Now 'Material Motion for Jetpack Compose' is available on Maven Central! :tada: :tada: :tada:
repositories {
- maven { url "https://jitpack.io" }
+ mavenCentral()
}
dependencies {
- implementation "com.github.fornewid.material-motion-compose:core:<version>"
+ implementation "io.github.fornewid:material-motion-compose-core:<version>"
- implementation "com.github.fornewid.material-motion-compose:navigation:<version>"
+ implementation "io.github.fornewid:material-motion-compose-navigation:<version>"
}
Built to work with Jetpack Compose 1.2.0-alpha08
(1) Add AnimatedContentScope and AnimatedVisiblityScope in MaterialMotion.
MaterialMotion(
targetState = state,
- motionSpec = when (state.motionSpecType) {
- MotionSpecType.SharedAxis -> materialSharedAxisY()
- MotionSpecType.FadeThrough -> materialFadeThrough()
- }
+ motionSpec = {
+ when (targetState.motionSpecType) {
+ MotionSpecType.SharedAxis -> materialSharedAxisY()
+ MotionSpecType.FadeThrough -> materialFadeThrough()
+ }
+ }
) { currentState ->
(2) Add AnimatedContentScope and AnimatedVisiblityScope in MaterialMotionNavHost.
MaterialMotionNavHost(
navController,
startDestination = "library",
- enterMotionSpec = { _, _ -> translateXIn({ it }) },
- exitMotionSpec = { _, _ -> materialElevationScaleOut() },
- popEnterMotionSpec = { _, _ -> materialElevationScaleIn() },
- popExitMotionSpec = { _, _ -> translateXOut({ it }) }
+ enterMotionSpec = { translateXIn({ it }) },
+ exitMotionSpec = { materialElevationScaleOut() },
+ popEnterMotionSpec = { materialElevationScaleIn() },
+ popExitMotionSpec = { translateXOut({ it }) }
) {
composable(
"first",
- enterMotionSpec = { _, _ -> holdIn() },
- exitMotionSpec = { _, _ -> holdOut() },
+ enterMotionSpec = { holdIn() },
+ exitMotionSpec = { holdOut() },
) { ... }
navigation(
"second",
"subGraph",
- enterMotionSpec = { _, _ -> translateYIn({ it }) },
- exitMotionSpec = { _, _ -> translateYOut({ it }) },
+ enterMotionSpec = { translateYIn({ it }) },
+ exitMotionSpec = { translateYOut({ it }) },
) {
composable("second") { ... }
}
}
(3) Lambdas in Enter/ExitMotionSpec factories have been moved to the last position in the param list.
- translateXIn({ it })
+ translateXIn { it }
- translateXOut({ it })
+ translateXOut { it }
- translateYIn({ it })
+ translateYIn { it }
- translateYOut({ it })
+ translateYOut { it }
AnimatedContentScope in MaterialMotion (#133) @fornewidBuilt to work with Jetpack Compose 1.1.1
(1) Add AnimatedContentScope and AnimatedVisiblityScope in MaterialMotion.
MaterialMotion(
targetState = state,
- motionSpec = when (state.motionSpecType) {
- MotionSpecType.SharedAxis -> materialSharedAxisY()
- MotionSpecType.FadeThrough -> materialFadeThrough()
- }
+ motionSpec = {
+ when (targetState.motionSpecType) {
+ MotionSpecType.SharedAxis -> materialSharedAxisY()
+ MotionSpecType.FadeThrough -> materialFadeThrough()
+ }
+ }
) { currentState ->
(2) Add AnimatedContentScope and AnimatedVisiblityScope in MaterialMotionNavHost.
MaterialMotionNavHost(
navController,
startDestination = "library",
- enterMotionSpec = { _, _ -> translateXIn({ it }) },
- exitMotionSpec = { _, _ -> materialElevationScaleOut() },
- popEnterMotionSpec = { _, _ -> materialElevationScaleIn() },
- popExitMotionSpec = { _, _ -> translateXOut({ it }) }
+ enterMotionSpec = { translateXIn({ it }) },
+ exitMotionSpec = { materialElevationScaleOut() },
+ popEnterMotionSpec = { materialElevationScaleIn() },
+ popExitMotionSpec = { translateXOut({ it }) }
) {
composable(
"first",
- enterMotionSpec = { _, _ -> holdIn() },
- exitMotionSpec = { _, _ -> holdOut() },
+ enterMotionSpec = { holdIn() },
+ exitMotionSpec = { holdOut() },
) { ... }
navigation(
"second",
"subGraph",
- enterMotionSpec = { _, _ -> translateYIn({ it }) },
- exitMotionSpec = { _, _ -> translateYOut({ it }) },
+ enterMotionSpec = { translateYIn({ it }) },
+ exitMotionSpec = { translateYOut({ it }) },
) {
composable("second") { ... }
}
}
(3) Lambdas in Enter/ExitMotionSpec factories have been moved to the last position in the param list.
- translateXIn({ it })
+ translateXIn { it }
- translateXOut({ it })
+ translateXOut { it }
- translateYIn({ it })
+ translateYIn { it }
- translateYOut({ it })
+ translateYOut { it }
AnimatedContentScope in MaterialMotion (#132) @fornewidBuilt to work with Jetpack Compose 1.2.0-alpha07
Built to work with Jetpack Compose 1.2.0-alpha06
Built to work with Jetpack Compose 1.2.0-alpha05
Built to work with Jetpack Compose 1.1.1
Built to work with Jetpack Compose 1.2.0-alpha04
Built to work with Jetpack Compose 1.1.1
Built to work with Jetpack Compose 1.2.0-alpha03
Built to work with Jetpack Compose 1.2.0-alpha02
Built to work with Jetpack Compose 1.2.0-alpha01
Built to work with Jetpack Compose 1.1.0
Built to work with Jetpack Compose 1.1.0-rc03
Built to work with Jetpack Compose 1.1.0-rc01
Built to work with Jetpack Compose 1.1.0-beta04
SlideTodo A simple 'Slide to Unlock' Material widget for Android, written in Jetpack Compose you can find source code here Getting Started allprojects
MDC-Android Compose Theme Adapter A library that enables reuse of Material Components for Android XML themes for theming in Jetpack Compose. The basis
How To Use Step 1: Add the JitPack repository to your build file. Add it in your root build.gradle / build.gradle.kts at the end of repositories: Groo
Owl sample This sample is a Jetpack Compose implementation of Owl, a Material De
ToDo Task App ToDo Task App is a sample Android app built with Jetpack Compose.
Material You using Jetpack Compose. How to keep M2 alongside with M3 in a project. Repo to play with Material Themes and MDC
ComposeSetting This is a basic Compose setting library that provides a basic Material3 setting components It also provides a persistent state system b
?? ?? ?? Compose flocking Ants(boids) ?? ?? ?? Jetpack compose Boids | Flocking Insect. bird or Fish simulation using Jetpack Compose Desktop ?? , usi
Why Not Compose! A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!
Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Androidâs modern toolkit for building native UI.
JetBMICalculator This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Co
Jetpack-Compose-Demo Instagram Profile UI using Jetpack Compose
Jetpack-compose-animations-examples This repository consists of 4 animations: St
Jetpack Compose Navigation Set of utils to help with integrating Jetpack Compose
Jetpack Compose UIs This is a collection of some UIs using Jetpack Compose. It i
Authentication A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose Scree
An application that i developed with a aim of learning Jetpack compose and many other jetpack libraries, The application make use of jikan Api which displays a list of animations,there more details and even trailers of the animations.
Multiplatform Compose A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many comp
k5-compose k5-compose is a sketchy port of P5.js for Jetpack Compose Desktop. This library provides you a playground to play with your sketches so you
7 Aug 8, 2022
409 Dec 24, 2022
9 Sep 9, 2022
1 Feb 26, 2022
0 Jan 17, 2022
3 Jul 28, 2022
13 Nov 10, 2022
38 Sep 25, 2022
186 Jan 1, 2023
382 Jan 5, 2023
3 Dec 31, 2022
1 Aug 11, 2022
180 Jan 2, 2023
5 Apr 5, 2022
3 Dec 15, 2022
5 Dec 29, 2022
10 Nov 23, 2022
548 Jan 7, 2023
176 Nov 22, 2022