Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

🌠 Transform between two Views, Activities, and Fragments, or a View to a Fragment with container transform animations for Android.

License

NotificationsYou must be signed in to change notification settings

skydoves/TransformationLayout


🌠 Transform views, activity, and fragments into other components with container transform animations.


GoogleLicenseAPIBuild StatusProfile

Download

Go to theReleases to download the demo APK.

Screenshots

Morphing Animation for Jetpack Compose

If you want to implement morphing animation in Jetpack Compose, check outOrbital.

Including in your project

Maven Central

Gradle

Add the dependency below to yourmodule'sbuild.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 usingTransformationLayout like the example code below:

<com.skydoves.transformationlayout.TransformationLayoutandroid: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, returningapp:transformation_fadeMode="in"// in, out, cross, throughapp:transformation_fitMode="auto"// auto, height, widthapp: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:

<com.skydoves.transformationlayout.TransformationLayoutandroid: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.FloatingActionButtonandroid: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.MaterialCardViewandroid: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 atargetView that should be transformed from theTransformationLayout. If you bind a targetView with aTransformationLayout, the targetView's visibility will beGONE by default.

app:transformation_targetView="@+id/myCardView"

You can also bind a targetView with aTransformationLayout usingbindTargetView 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.

// 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 aTransformationLayout is transformed or not usingOnTransformFinishListener.

transformationLayout.setOnTransformFinishListener {Toast.makeText(context,"is transformed:$it",Toast.LENGTH_SHORT).show()}

Here is theJava way.

transformationLayout.onTransformFinishListener =newOnTransformFinishListener() {@OverridepublicvoidonFinish(booleanisTransformed) {Toast.makeText(context,"is transformed:" +isTransformed,Toast.LENGTH_SHORT).show();  }};

Transform into an Activity

We can implement transformation between activities easily usingTransformationActivity andTransformationCompat.

Here is an example of transforming a floating action button to Activity.
We don't need to bind a targetView.

<com.skydoves.transformationlayout.TransformationLayoutandroid:id="@+id/transformationLayout"android:layout_width="wrap_content"android:layout_height="wrap_content"app:transformation_duration="550"><com.google.android.material.floatingactionbutton.FloatingActionButtonandroid: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 addonTransformationStartContainer() 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 beforesuper.onCreate.

overridefunonCreate(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

ExtendsTransformationAppCompatActivity orTransformationActivity to your activity that will be transformed.

classDetailActivity :TransformationAppCompatActivity()

Here is the Java way.

publicclassDetailActivityextendsTransformationAppCompatActivity

TransformationCompat

And start theDetailActivity using theTransformationCompat.startActivity method.

val intent=Intent(context,DetailActivity::class.java)TransformationCompat.startActivity(transformationLayout, intent)

Here is the Java way.

Intentintent =newIntent(context,DetailActivity.class);TransformationCompat.startActivity(transformationLayout,intent);

Manually Transform into an Activity

Here is an example of transforming a floating action button to Activity.
We don't need to bind a targetView.

<com.skydoves.transformationlayout.TransformationLayoutandroid:id="@+id/transformationLayout"android:layout_width="wrap_content"android:layout_height="wrap_content"app:transformation_duration="550"><com.google.android.material.floatingactionbutton.FloatingActionButtonandroid: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 addonTransformationStartContainer() 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 beforesuper.onCreate.

overridefunonCreate(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 callstartActivity with bundle and intent data.
We should get abundle usingwithActivity method. It needs a context and any name of transition.
Thebundle must be used asstartActivity's parameter.
We should put parcelable data to the intent usinggetParcelableParams() method.
The extra name of the parcelable data can be anything, and it will be reused later.

fab.setOnClickListener {val bundle= transformationLayout.withActivity(this,"myTransitionName")val intent=Intent(this,DetailActivity::class.java)    intent.putExtra("TransformationParams", transformationLayout.getParcelableParams())    startActivity(intent, bundle)}

If we want to get bundle data in RecyclerView or other classes,
we can usewithView andwithContext instead ofwithActivty.

// usage in the RecyclerView.AdapteroverridefunonBindViewHolder(holder:PosterViewHolder,position:Int) {val bundle= transformationLayout.withView(holder.itemView,"myTransitionName")}

Here is theJava way.

Bundlebundle =transformationLayout.withActivity(this,"myTransitionName");Intentintent =newIntent(this,DetailActivity.class);intent.putExtra("TransformationParams",transformationLayout.getParcelableParams());startActivity(intent,bundle);

onTransformationEndContainer

And finally, we should addonTransformationEndContainer() to the Activity that will be started.
It must be added beforesuper.onCreate.

overridefunonCreate(savedInstanceState:Bundle?) {    onTransformationEndContainer(intent.getParcelableExtra("TransformationParams"))super.onCreate(savedInstanceState)    setContentView(R.layout.activity_detail)}

Here is theJava way.

TransformationLayout.Paramsparams =getIntent().getParcelableExtra("TransformationParams");TransformationCompat.onTransformationEndContainer(this,params);

Transform into a Fragment

We can implement transformation between fragments for a single Activity application.
Here is an example of transforming a floating action button in Fragment A to Fragment B.

<com.skydoves.transformationlayout.TransformationLayoutandroid:id="@+id/transformationLayout"android:layout_width="wrap_content"android:layout_height="wrap_content"app:transformation_duration="550"><com.google.android.material.floatingactionbutton.FloatingActionButtonandroid: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 callonTransformationStartContainer() in the Fragment A that has the floating action button.

overridefunonCreate(savedInstanceState:Bundle?) {super.onCreate(savedInstanceState)  onTransformationStartContainer()}

Here is the Java way.

TransformationCompat.onTransformationStartContainer(this);

getBundle and addTransformation

We should get a bundle from theTransformationLayout and put it into the argument.
And in the fragment manager's transaction, we should add theTransformationLayout usingaddTransformation method.

val fragment=MainSingleDetailFragment()val bundle= transformationLayout.getBundle("TransformationParams")bundle.putParcelable(MainSingleDetailFragment.posterKey, poster)fragment.arguments= bundlerequireFragmentManager()  .beginTransaction()  .addTransformation(transformationLayout)  .replace(R.id.main_container, fragment,MainSingleDetailFragment.TAG)  .addToBackStack(MainSingleDetailFragment.TAG)  .commit()}

Here is the Java way

MainSingleDetailFragmentfragment =newMainSingleDetailFragment();Bundlebundle =transformationLayout.getBundle("TransformationParams","transitionName");fragment.setArguments(bundle);FragmentTransactionfragmentTransaction =requireFragmentManager().beginTransaction();TransformationCompat.addTransformation(fragmentTransaction,transformationLayout,"transitionName");fragmentTransaction.replace(R.id.main_container,fragment,MainSingleDetailFragment.TAG)    .addToBackStack(MainSingleDetailFragment.TAG)    .commit();

Transition name in Fragment A

We must set a specific transition name to theTransformationLayout.
If you want to transform a recyclerView's item, set transiton name inonBindViewHolder.

transformationLayout.transitionName="myTransitionName"

Here is the Java way.

transformationLayout.setTransitionName("myTransitionName");

onTransformationEndContainer in Fragment B

We should get aTransformationLayout.Params from the arguments, and callonTransformationEndContainer method.
It must be called inonCreate method.

overridefunonCreate(savedInstanceState:Bundle?) {super.onCreate(savedInstanceState)val params= arguments?.getParcelable<TransformationLayout.Params>("TransformationParams")  onTransformationEndContainer(params)}

Here is the Java way.

TransformationLayout.Paramsparams =getArguments().getParcelable("TransformationParams");TransformationCompat.onTransformationEndContainer(this,params);

Transition name in Fragment B

And finally set the specific transition name (same as the transformationLayot in Fragment A)
to the target view in Fragment B inonViewCreated.

overridefunonViewCreated(view:View,savedInstanceState:Bundle?) {super.onViewCreated(view, savedInstanceState)     detail_container.transitionName="myTransitionName"}

TransformationLayout Attributes

AttributesTypeDefaultDescription
targetViewresource idnoneBind a targetView that will be transformed.
durationLong350LDuration of the transformation.
pathMotionMotion.ARC, Motion.LINEARdefault layoutIndicates that this transition should be drawn as the which path.
containerColorColorColor.TRANSPARENTSet the container color to be used as the background of the morphing container.
allContainerColorColorColor.TRANSPARENTThe all container colors (start and end) to be used as the background of the morphing container.
scrimColorColorColor.TRANSPARENTSet the color to be drawn under the morphing container.
directionDirection.AUTO, Direction.ENTER, Direction.RETURNDirection.AUTOSet the direction to be used by this transform.
fadeModeFadeMode.IN, FadeMode.OUT, FadeMode.CROSS, FadeMode.THROUGHFadeMode.INSet the FadeMode to be used to swap the content of the start View with that of the end View.
fitModeFitMode.AUTO, FitMode.WIDTH, FitMode.HEIGHTFitMode.AUTOSet the fitMode to be used when scaling the incoming content of the end View.
startElevationFloatELEVATION_NOT_SETThe elevation that will be used to render a shadow around the container at the start of the transition.
endElevationFloatELEVATION_NOT_SETThe elevation that will be used to render a shadow around the container at the end of the transition.
elevationShadowEnabledBooleantrue if (version > Pie)Whether shadows should be drawn around the container to approximate native elevation shadows on the start and end views.
holdAtEndEnabledBooleanfalseWhether to hold the last frame at the end of the animation.

Additional 🎈

You can reference the usage of the TransformationLayout in another repositoryMarvelHeroes.
A demo application based on modern Android application tech-stacks and MVVM architecture.

screenshot

Find this library useful? ❤️

Support it by joiningstargazers for this repository. ⭐
Andfollow me for my next creations! 🤩

License

Copyright 2020 skydoves (Jaewoong Eum)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.0Unless required by applicable law or agreed to in writing, softwaredistributed 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 andlimitations under the License.

About

🌠 Transform between two Views, Activities, and Fragments, or a View to a Fragment with container transform animations for Android.

Topics

Resources

License

Code of conduct

Contributing

Stars

Watchers

Forks

Contributors3

  •  
  •  
  •  

Languages

[8]ページ先頭
©2009-2025 Movatter.jp