{ } Declarative Kotlin DSL for choreographing Android transitions
APACHE-2.0 License
Kotlin DSL for choreographing Android Transitions
TransitionManager
makes it easy to animate simple changes to layout without needing to explicitly calculate and specify from
and to
like Animator
or Animation
expects. When you call TransitionManager.beginDelayedTransition(layout, transition)
before updating a layout, the framework automatically does a diff on before and after states and animates the difference.
Transition X
is intended to simplify construction of these Transition
instances to take full advantage of the framework and provide a clear, concise, type safe and extensible DSL using Kotlin language features.
I highly recommend reading the introduction blog post on my blog.
build.gradle
file.allprojects {
repositories {
jcenter()
}
}
build.gradle
file.dependencies{
implementation 'in.arunkumarsampath:transition-x:1.1.0'
}
As shown above, instead of creating XML files and later inflating them using TransitionInflator
, it is possible to create Transition
instances directly using tranistionSet{}
block provided by the DSL.
With Transition X, the construction and usage can be greatly simplified with a prepareTransition
extension added to ViewGroup
.
For example:
constraintLayout.prepareTransition {
fadeOut {
startDelay = 100
}
moveResize {
pathMotion = ArcMotion()
}
fadeIn()
+textView // Add textView as target using '+' operator
exclude<RecyclerView>() // Exclude all recyclerViews
ease {
standardEasing // Applies FastOutSlowInInterpolator
}
}
// Performing layout changes here will be animated just like
// calling TransitionManager.beginDelayedTransition()
All blocks are type-safe and has IDE auto complete support thanks to Kotlin.
TransitionSet's can be built programmatically like shown below.
val transition = TransitionSet().apply {
addTransition(ChangeBounds().apply {
startDelay = 100
setPathMotion(ArcMotion())
})
}
The Transition X equivalent would be:
val transition = transitionSet {
moveResize {
startDelay = 100
pathMotion = ArcMotion()
}
}
Some of the transition names are opinionated to better express their intent and promote clear code. Here ChangeBounds
transition usually animates a View
's height, width, or location on screen hence the name moveResize
to better convey what it does.
In case you have a custom transition class and want to use with the DSL, it is easy to do so.
public no arg
constructor then the transition can be added using customTransition<Type: Transition>{}
method, transition-x takes care of instantiating the transition. Below example shows usage of ChangeCardColor
which animates a CardView
's cardBackground
property.constraintLayout.prepareTransition {
customTransition<ChangeCardColor> {
+colorChangeCardView
}
}
public no arg
constructor then, you can instantiate the transition yourself and then use customTransition(transition) {}
instead to add the transition and configure it.In addition to the common properties like startDelay
, interpolator
, etc, if your transition has custom properties then customProperties {}
block can be used.
constraintLayout.prepareTransition {
customTransition<ChangeCardColor> {
+colorChangeCardView
customProperties {
myProperty = "hi"
}
}
}
The DSL provides simplified syntax to deal with targets by talking to Transition
's add/exclude/remove API.
+
operator or add()
to add targets of type String (Transition Name)
or View
or Resource Id
.transitionSet {
+"TransitionName"
+userIconView
add(userIconView)
}
-
operator or remove()
to remove targets of type String (Transition Name)
or View
or Resource Id
.transitionSet {
-"TransitionName"
-userIconView
remove(userIconView)
}
exclude
and excludeChildren
methods are provided for excluding targets which can be useful in advanced transitions. It can be used on Views
, Resource Ids
or Type
transitionSet {
exclude<RecyclerView>()
exclude(R.id.accentBackground)
excludeChildren(constraintLayout)
}
interpolator
property.transitionSet {
moveResize()
slide()
interpolator = FastOutLinearInInterpolator()
}
ease
block to add interpolators recommended by material design spec.
standardEasing
- Recommended for views that move within visible area of the layout. Uses FastOutSlowInInterpolator
decelerateEasing
- Recommended for views that appear/enter outside visible bounds of the layout. Uses LinearOutSlowInInterpolator
accelerateEasing
- Recommended for Views that exit visible bounds of the layout. Uses FastOutLinearInInterpolator
transitionSet {
moveResize()
ease {
decelerateEasing
}
}
Often, for fined grained transitions it it necessary to add different transition sets for different targets. It is simple to nest multiple transition sets just by using transitionSet {}
recursively.
transitionSet {
auto {
+"View 1"
}
transitionSet {
moveResize()
slide()
+"View 2"
}
transitionSet {
sequentially()
fadeOut()
moveResize()
fadeIn()
}
}
Transition-X makes it easy to react to Transition
lifecycle by providing lifecycle methods like onEnd
, onStart
which internally uses Transition.addListener
.
Example:
rootCoordinatorLayout.prepareTransition {
onStart {
// Transition Started!
}
moveResize {
+image1
}
onEnd {
// Transition Ended!
}
}
The library packages additional transitions not present in the support library and the plan is to add more commonly used transitions to provide a full package. Currently the following transitions are packaged:
ChangeText
: Animates changes to a TextView.text
property.ChangeColor
: Animates changes to View.background
if it is a ColorDrawable
or changes to TextView.textColor
if the target is a TextView
.transitionSet {
fadeOut()
moveResize {
startDelay = 50
ease {
standardEasing
}
}
fadeIn {
startDelay = 50
}
changeColor {
navItems.map { it.text }.forEach { text -> add(text) }
+constraintLayout
}
customTransition<ChangeImageTint> {
navItems.map { it.icon }.forEach { icon -> add(icon) }
}
}
Contributions are welcome! I would greatly appreciate creating an issue to discuss major changes before submitting a PR directly. How you can help:
Copyright 2019, Arunkumar.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.