TransformationLayout
š Transform between two Views, Activities, and Fragments, or a View to a Fragment with container transform animations for Android.
Install / Use
/learn @skydoves/TransformationLayoutREADME
Download
Go to the Releases to download the demo APK.
Screenshots
<p align="center"> <img src="/preview/preview0.gif" width="270"/> <img src="/preview/preview1.gif" width="270"/> <img src="/preview/preview2.gif" width="270"/> </p>Morphing Animation for Jetpack Compose
If you want to implement morphing animation in Jetpack Compose, check out Orbital.
Including in your project
Gradle
Add the dependency below to your module's build.gradle file:
dependencies {
implementation("com.github.skydoves:transformationlayout:1.1.6")
}
Usage
Add the XML namespace below inside your XML layout file:
xmlns:app="http://schemas.android.com/apk/res-auto"
TransformationLayout
TransformationLayout is an essential concept to transform your Views, Activities, and Fragments into other components. You must wrap one or more Views that are supposed to be transformed using TransformationLayout like the example code below:
<com.skydoves.transformationlayout.TransformationLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:transformation_targetView="@+id/my_cardView" // sets a target view.
app:transformation_duration="450" // sets a duration of the transformation.
app:transformation_direction="auto" // auto, entering, returning
app:transformation_fadeMode="in" // in, out, cross, through
app:transformation_fitMode="auto" // auto, height, width
app:transformation_pathMode="arc" // arc, linear
>
<!-- other complicated views -->
</com.skydoves.transformationlayout.TransformationLayout>
Transform into a view
For instance, you can transform a floating button into a CardView as you've seen in the example below:
<img src="https://user-images.githubusercontent.com/24237865/75549488-25321700-5a73-11ea-8908-609592907e84.gif" align="right" width="280"/><com.skydoves.transformationlayout.TransformationLayout
android:id="@+id/transformationLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:transformation_duration="550"
app:transformation_targetView="@+id/myCardView">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="@color/colorPrimary"
android:src="@drawable/ic_write"/>
</com.skydoves.transformationlayout.TransformationLayout>
<com.google.android.material.card.MaterialCardView
android:id="@+id/myCardView"
android:layout_width="240dp"
android:layout_height="312dp"
android:layout_marginLeft="30dp"
android:layout_marginTop="30dp"
app:cardBackgroundColor="@color/colorPrimary" />
Bind a TargetView
With the attribute below in your XML file, you can bind a targetView that should be transformed from the TransformationLayout. If you bind a targetView with a TransformationLayout, the targetView's visibility will be GONE by default.
app:transformation_targetView="@+id/myCardView"
You can also bind a targetView with a TransformationLayout using bindTargetView method like the code below:
transformationLayout.bindTargetView(myCardView)
Starting and finishing the transformation
After binding a targetView, we can start or finish transformation using the below methods.<br>
// start transformation when touching the fab.
fab.setOnClickListener {
transformationLayout.startTransform()
}
// finish transformation when touching the myCardView.
myCardView.setOnClickListener {
transformationLayout.finishTransform()
}
Here are other functionalities to starting and finishing transformation.
// starts and finishes transformation 1000 milliseconds later.
// If we use this method on onCreate() method, it will starts transformation automatically 200ms later.
transformationLayout.startTransformWithDelay(200)
transformationLayout.finishTransformWithDelay(200)
// starts and finishes transformation with stopping a parent layout.
transformationLayout.startTransform(parent)
transformationLayout.finishTransform(parent)
OnTransformFinishListener
We can listen a TransformationLayout is transformed or not using OnTransformFinishListener. <br>
transformationLayout.setOnTransformFinishListener {
Toast.makeText(context, "is transformed: $it", Toast.LENGTH_SHORT).show()
}
Here is the Java way.
transformationLayout.onTransformFinishListener = new OnTransformFinishListener() {
@Override public void onFinish(boolean isTransformed) {
Toast.makeText(context, "is transformed:" + isTransformed, Toast.LENGTH_SHORT).show();
}
};
Transform into an Activity
We can implement transformation between activities easily using TransformationActivity and TransformationCompat.
Here is an example of transforming a floating action button to Activity. <br> We don't need to bind a targetView.
<com.skydoves.transformationlayout.TransformationLayout
android:id="@+id/transformationLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:transformation_duration="550">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="@color/colorPrimary"
android:src="@drawable/ic_write"/>
</com.skydoves.transformationlayout.TransformationLayout>
onTransformationStartContainer
We should add onTransformationStartContainer() to the Activity that has the floating action button. If your view is in the fragment, the code should be added to the fragment's Activity. It must be called before super.onCreate.
override fun onCreate(savedInstanceState: Bundle?) {
onTransformationStartContainer() // should be called before super.onCreate().
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
Here is the Java way.
TransformationCompat.onTransformationStartContainer(this);
TransformationAppCompatActivity
Extends TransformationAppCompatActivity or TransformationActivity to your activity that will be transformed.
class DetailActivity : TransformationAppCompatActivity()
Here is the Java way.
public class DetailActivity extends TransformationAppCompatActivity
TransformationCompat
And start the DetailActivity using the TransformationCompat.startActivity method.
val intent = Intent(context, DetailActivity::class.java)
TransformationCompat.startActivity(transformationLayout, intent)
Here is the Java way.
Intent intent = new Intent(context, DetailActivity.class);
TransformationCompat.startActivity(transformationLayout, intent);
Manually Transform into an Activity
<img src="/preview/preview2.gif" align="right" width="270"/>Here is an example of transforming a floating action button to Activity. <br> We don't need to bind a targetView.
<com.skydoves.transformationlayout.TransformationLayout
android:id="@+id/transformationLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:transformation_duration="550">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="@color/colorPrimary"
android:src="@drawable/ic_write"/>
</com.skydoves.transformationlayout.TransformationLayout>
onTransformationStartContainer
We should add onTransformationStartContainer() to the Activity that has the floating action button. If your view is in the fragment, the code should be added to the fragment's Activity. It must be called before super.onCreate.
override fun onCreate(savedInstanceState: Bundle?) {
onTransformationStartContainer() // should be called before super.onCreate().
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
Here is the Java way.
TransformationCompat.onTransformationStartContainer(this);
startActivity
And we should call startActivity with bundle and intent data.<br>
We should get a bundle using withActivity method. It needs a context and any name of transition. <br>
The bundle must be used as startActivity's parameter.<br>
We should put parcelable data to the intent using `getParcel
