🌠 Transform into a different view or activity using morphing animations.

Jaewoong Eum

Last update: Jan 3, 2023

Related tags

Animations android kotlin material android-library transition android-ui motions skydoves

Overview

TransformationLayout

🌠 Transform into a different view or activity using morphing animations.
Using Transformation motions of new material version.

Download

Go to the Releases to download the demo APK.

Screenshots

Including in your project

Gradle

Add below codes to your root build.gradle file (not your module build.gradle file).

allprojects {
    repositories {
        mavenCentral()
    }
}

And add a dependency code to your module's build.gradle file.

dependencies {
    implementation "com.github.skydoves:transformationlayout:1.0.7"
}

Usage

Add following XML namespace inside your XML layout file.

xmlns:app="http://schemas.android.com/apk/res-auto"

TransformationLayout

Here is a basic example of implementing TransformationLayout.
We must wrap one or more views that we want to transform.

<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 views -->

</com.skydoves.transformationlayout.TransformationLayout>

Transform into a view

Here is a simple example of transform fab into a view.

<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

We can bind a targetView that will be transformed from the TransformationLayout using the below attribute in XML.
If you bind a targetView to the TransformationLayout, the targetView's visibility will be GONE.

app:transformation_targetView="@+id/myCardView"

Or we can bind a targetView using method.

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 a TransformationLayout is transformed or not using OnTransformFinishListener.

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.
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

Here is an example of transforming a floating action button to Activity.
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

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.
We should get a bundle using withActivity method. It needs a context and any name of transition.
The bundle must be used as startActivity's parameter.
We should put parcelable data to the intent using getParcelableParams() 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 use withView and withContext instead of withActivty.

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

Here is the Java way.

Bundle bundle = transformationLayout.withActivity(this, "myTransitionName");
Intent intent = new Intent(this, DetailActivity.class);
intent.putExtra("TransformationParams", transformationLayout.getParcelableParams());
startActivity(intent, bundle);

onTransformationEndContainer

And finally, we should add onTransformationEndContainer() to the Activity that will be started.
It must be added before super.onCreate.

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

Here is the Java way.

TransformationLayout.Params params = 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.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 call onTransformationStartContainer() in the Fragment A that has the floating action button.

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

Here is the Java way.

TransformationCompat.onTransformationStartContainer(this);

getBundle and addTransformation

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

val fragment = MainSingleDetailFragment()
val bundle = transformationLayout.getBundle("TransformationParams")
bundle.putParcelable(MainSingleDetailFragment.posterKey, poster)
fragment.arguments = bundle

requireFragmentManager()
  .beginTransaction()
  .addTransformation(transformationLayout)
  .replace(R.id.main_container, fragment, MainSingleDetailFragment.TAG)
  .addToBackStack(MainSingleDetailFragment.TAG)
  .commit()
}

Here is the Java way

MainSingleDetailFragment fragment = new MainSingleDetailFragment();
Bundle bundle = transformationLayout.getBundle("TransformationParams", "transitionName");
fragment.setArguments(bundle);

FragmentTransaction fragmentTransaction = 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 the TransformationLayout.
If you want to transform a recyclerView's item, set transiton name in onBindViewHolder.

transformationLayout.transitionName = "myTransitionName"

Here is the Java way.

transformationLayout.setTransitionName("myTransitionName");

onTransformationEndContainer in Fragment B

We should get a TransformationLayout.Params from the arguments, and call onTransformationEndContainer method.
It must be called in onCreate method.

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)

  val params = arguments?.getParcelable<TransformationLayout.Params>("TransformationParams")
  onTransformationEndContainer(params)
}

Here is the Java way.

TransformationLayout.Params params = 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 in onViewCreated.

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

TransformationLayout Attributes

Attributes	Type	Default	Description
targetView	resource id	none	Bind a targetView that will be transformed.
duration	Long	350L	Duration of the transformation.
pathMotion	Motion.ARC, Motion.LINEAR	default layout	Indicates that this transition should be drawn as the which path.
containerColor	Color	Color.TRANSPARENT	Set the container color to be used as the background of the morphing container.
allContainerColor	Color	Color.TRANSPARENT	The all container colors (start and end) to be used as the background of the morphing container.
scrimColor	Color	Color.TRANSPARENT	Set the color to be drawn under the morphing container.
direction	Direction.AUTO, Direction.ENTER, Direction.RETURN	Direction.AUTO	Set the direction to be used by this transform.
fadeMode	FadeMode.IN, FadeMode.OUT, FadeMode.CROSS, FadeMode.THROUGH	FadeMode.IN	Set the FadeMode to be used to swap the content of the start View with that of the end View.
fitMode	FitMode.AUTO, FitMode.WIDTH, FitMode.HEIGHT	FitMode.AUTO	Set the fitMode to be used when scaling the incoming content of the end View.
startElevation	Float	ELEVATION_NOT_SET	The elevation that will be used to render a shadow around the container at the start of the transition.
endElevation	Float	ELEVATION_NOT_SET	The elevation that will be used to render a shadow around the container at the end of the transition.
elevationShadowEnabled	Boolean	true if (version > Pie)	Whether shadows should be drawn around the container to approximate native elevation shadows on the start and end views.
holdAtEndEnabled	Boolean	false	Whether to hold the last frame at the end of the animation.

Additional 🎈

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

Find this library useful? ❤️

Support it by joining stargazers for this repository. ⭐
And follow 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.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.

Comments

Animation flashes when background is white
Library Version v1.0.6

Multiple devices, and emulators

I'm using the animation from a button to an Activity, I tried both examples (with and without a bundle) as described in the readme, and when the background of the destination activity is dark (as all the examples are), it works fine, but when I leave the destinations activity background blank (white) it flashes for a moment.
opened by fefereliezer 6

RecyclerView item disappears after Transformation

Library Version 1.04
Affected Device(s) [Huawei 4C, android 6.0.0]

when i Transform into DetailsActivity from a RecyclerView and then come back to RecyclerView, the item that i Clicked on will disappear

MovieDetialsActivity:

class MovieDetailsActivity : TransformationAppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_movie_details)

        intent.getParcelableExtra<Movie>(MOVIE_DETAILS_KEY)?.let {
            movieDetailsPoster.loadFromUrl(it.poster)
            movieDetailsTitle.text = it.title
        }
    }

    companion object {

        private const val MOVIE_DETAILS_KEY = "key:movie-details"

        fun startActivity(
            context: Context,
            transformationLayout: TransformationLayout,
            movie: Movie
        ) {
            val intent = Intent(context, MovieDetailsActivity::class.java)
            intent.putExtra(MOVIE_DETAILS_KEY, movie)
            TransformationCompat.startActivity(transformationLayout, intent)
        }
    }

}

calling Transform to MovieDetailsActivity from RecyclerViewCallback:

private fun showMovieDetails(movie: Movie, transformationLayout: TransformationLayout,  position: Int) {
   context?.let { MovieDetailsActivity.startActivity(it, transformationLayout, movie) }
}

RecyclerView item layout:

<?xml version="1.0" encoding="utf-8"?>
<com.skydoves.transformationlayout.TransformationLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/searchMoviesItem"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:transformation_duration="500"
    app:transformation_pathMode="arc">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:layout_margin="2dp">

        <ImageView
            android:id="@+id/searchMoviesItemPoster"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </FrameLayout>

</com.skydoves.transformationlayout.TransformationLayout>

opened by masterj3y 5

Material latest version is not supported

I am currently using the implementation 'com.google.android.material: material: 1.3.0-alpha01' but there is something wrong with it, I had difficulty applying it to my project. I downgraded to determine which version started after the problem and found that this library is running in the latest implementation 'com.google.android.material: material: 1.2.0-alpha06'. Please can you update the library according to the latest versions of addictions?

opened by AydroidDev 5
Animation Glitch when back button is pressed
Please complete the following information:

Library Version : 1.0.7 and Material : 1.3.0

Affected Device(s) : Pixel 3a XL with Android 10 and Pixel 4a with Android 11

Describe the Bug:

I have a button which start an activity, when I click on it the transition is smooth and works perfectly but when I press the back Button, the animation is glitching for a fraction of a second.

Video
opened by AdamLBS 3
Animation is misplaced and jitters abnormally
Library Version [ v1.0.8]

Affected Device(s) [Redmi Note4 with Android 6.0]

Run the demo on the latest master to reproduce

https://user-images.githubusercontent.com/6415942/115809604-fcab7000-a41e-11eb-9440-2d4d7ad5ae58.mp4
opened by sangsais 2
Transition for DialogFragment

Hey! This is awesome. As you mention in :https://github.com/skydoves/TransformationLayout/issues/8#issuecomment-639301730_ , how DialogFragment work? Thank you a lot .

This library can be used only between View, Fragment, Activity, and DialogFragment. Thank you :)

Originally posted by @skydoves in https://github.com/skydoves/TransformationLayout/issues/8#issuecomment-639301730

opened by XWayne 2

Activity A to Activity B

1583029997038mza it has a little shake

Thanks for your library , could you please help me ,this is my code

ActivityA: `public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {

    TransitionExtensionKt.onTransformationStartContainer(this);

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);


    TextView tv = findViewById(R.id.tv);
    final TransformationLayout tLayout = findViewById(R.id.tLayout);

    tv.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Bundle bundle = tLayout.withActivity(MainActivity.this, "myTransitionName");
            Intent intent = new Intent(MainActivity.this, Main2Activity.class);
            intent.putExtra("TransformationParams", tLayout.getParcelableParams());
            startActivity(intent, bundle);
        }
    });


}

ActivityB: `public class Main2Activity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {

    TransformationLayout.Params params = getIntent().getParcelableExtra("TransformationParams");
    TransitionExtensionKt.onTransformationEndContainer(this, params);

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main2);

}

minSdkVersion 21 targetSdkVersion 29

What's the problem

opened by zhangqifan1 2

java.lang.NoClassDefFoundError:

I have direct fetch the code and run without build error, then app crash either vm or my phone. I can't found the issues. here is the output, I know it come from other app but it seem like the real problem coming from this libaray. the orignal project in HERE

2021-05-06 14:11:38.439 5267-5267/com.skydoves.marvelheroes E/AndroidRuntime: FATAL EXCEPTION: main Process: com.skydoves.marvelheroes, PID: 5267 java.lang.NoClassDefFoundError: Failed resolution of: Lcom/google/android/material/transition/MaterialContainerTransformSharedElementCallback; at com.skydoves.transformationlayout.TransitionExtensionKt.onTransformationStartContainer(TransitionExtension.kt:31) at com.skydoves.marvelheroes.view.ui.main.MainActivity.onCreate(MainActivity.kt:30) at android.app.Activity.performCreate(Activity.java:6662) at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1118) at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2599) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2707) at android.app.ActivityThread.-wrap12(ActivityThread.java) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1460) at android.os.Handler.dispatchMessage(Handler.java:102) at android.os.Looper.loop(Looper.java:154) at android.app.ActivityThread.main(ActivityThread.java:6077) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:866) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:756) Caused by: java.lang.ClassNotFoundException: Didn't find class "com.google.android.material.transition.MaterialContainerTransformSharedElementCallback" on path: DexPathList[[zip file "/data/app/com.skydoves.marvelheroes-2/base.apk"],nativeLibraryDirectories=[/data/app/com.skydoves.marvelheroes-2/lib/x86, /system/lib, /vendor/lib]] at dalvik.system.BaseDexClassLoader.findClass(BaseDexClassLoader.java:56) at java.lang.ClassLoader.loadClass(ClassLoader.java:380) at java.lang.ClassLoader.loadClass(ClassLoader.java:312) at com.skydoves.transformationlayout.TransitionExtensionKt.onTransformationStartContainer(TransitionExtension.kt:31) at com.skydoves.marvelheroes.view.ui.main.MainActivity.onCreate(MainActivity.kt:30) at android.app.Activity.performCreate(Activity.java:6662) at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1118) at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2599) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2707) at android.app.ActivityThread.-wrap12(ActivityThread.java) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1460) at android.os.Handler.dispatchMessage(Handler.java:102) at android.os.Looper.loop(Looper.java:154) at android.app.ActivityThread.main(ActivityThread.java:6077) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:866) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:756)

opened by wolfheros 1
Nested transitions
Say you have 3 activities: A, B and C

In activity A the user clicks to start activity B.

In activity B the user clicks to start Activity C.

Now the user presses back twice.

How can you preserve the first transition?
opened by Bryanx 1
Transition noo work when return to Fragment with RecyclerView

I have a grid recyclerview in fragment, which hosted in viewpager. Transition normally works when i open DetailFragment, but no transition effect when press back button...What i'm missing? I use ListAdapter.

//frag with recyclerview override fun onCreate(savedInstanceState: Bundle?) { onTransformationStartContainer() super.onCreate(savedInstanceState) }

// put bundle fun newInstance(artist_id: Int, transformationLayout:TransformationLayout): ArtistInfo { val fragment = ArtistInfo() fragment.transition_name=transformationLayout.transitionName val bundle = transformationLayout?.getBundle("TransformationParams") bundle.putInt("artist_id", artist_id) fragment.arguments = bundle return fragment } // detailfrag override fun onCreate(savedInstanceState: Bundle?) { val params = arguments?.getParcelable<TransformationLayout.Params>("TransformationParams") onTransformationEndContainer(params) super.onCreate(savedInstanceState)

// loading new fragment val transaction = supportFragmentManager.beginTransaction() .addTransformation(transformationLayout) .replace(R.id.albumFragcontainer, fragment, tag) .addToBackStack(tag) .commit()

opened by Avgur123 1
Duplicate Value

Hi, i'm interesting with this library, but i got some error duplicate. I'm already using google material 1.3.0-alpha01 and this library version is 1.0.5, so when i build my app some error came up.

Could you tell me what is wrong with this? Thank you

opened by satriawarn 1
The card will offset after back to HomeFragment
Library Version [v1.1.0]

Affected Device(s) [LG G with Android 5.0.2, also found on some low-end devices]

The card will offset after back to HomeFragment while using demo project. See below:

https://user-images.githubusercontent.com/29533679/128883658-2fa87845-1cea-4893-b831-c86c601c77e4.mp4

It‘s really strange, any idea?

Thanks!
opened by Bradmrhong 2
The dialog goes away when another activity or fragment comes to the foreground.
Please complete the following information:

Library Version [v1.0.9]

Affected Device(s) [e.g. Samsung Galaxy s9 with Android 9.0]

Describe the Bug:

When a another activity or fragment comes to the foreground and you navigate back, the dialog's visibility is gone.

Expected Behavior:

I expexted the dialog to persist even after the lifecycle event occur.
opened by Carrieukie 0

It not working with navigation component

Please complete the following information:

Library Version [e.g. v1.0.7]
Affected Device(s) [e.g. Android 10.0]

Describe the Bug: I using navigation component call Home fragment => Home Detail Fragment, it not working with navigation component. Can you please give me more instructions

====>RecyclerView Adapter

 holder.binding.transformationLayout.transitionName = data[position].id.toString()
        holder.binding.layoutRoot.setOnClickListener {
            onItemClickListener?.let {
                onItemClickListener?.onItemClick(
                    holder.binding.transformationLayout,
                    holder.binding.transformationLayout,
                    data[position]
                )
            }
        }

====>Home Fragment

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


  val bundle = itemView.getBundle(Constants.PARAMS_LAYOUT_KEY)
        bundle.putParcelable("detail_feature_key", item)
        val extras = FragmentNavigatorExtras(view to Constants.PARAMS_LAYOUT_KEY)
        findNavController().navigate(
            R.id.action_global_homeFeatureDetailFragment,
            bundle,
            null,
            extras
        )

=====>Home Detail Fragment

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        sharedElementEnterTransition = TransitionInflater.from(context).inflateTransition(android.R.transition.move)
        arguments?.let {
            paramsLayout = it.getParcelable(PARAMS_LAYOUT_KEY)
            if(paramsLayout != null) {
                onTransformationEndContainer(paramsLayout)
            }
        }
    }

opened by Sang-Nguyen-Sunny 2

Releases(1.1.1)

1.1.1(Nov 6, 2021)
🎉 Released a new stable 1.1.1! 🎉

What's new?

Migrated material version to 1.5.0-alpha05.

Removed buildConfig option on the transformationlayout module.

Source code(tar.gz)
Source code(zip)
1.1.0(Jul 5, 2021)
🎉 Released a new version 1.1.0! 🎉

What's New?

Migrated to material version 1.4.0 stable.

Source code(tar.gz)
Source code(zip)
1.0.9(May 29, 2021)
🎉 Released a new version 1.0.9! 🎉

What's new?

Updated material version to 1.4.0-beta01.

Concealed internal functionalities for Java APIs.

Source code(tar.gz)
Source code(zip)
1.0.8(Mar 29, 2021)
🎉 Released a new version 1.0.8!

What's New?

Updated to use material 1.4.0-alpha.

Source code(tar.gz)
Source code(zip)
1.0.7(Jan 9, 2021)
🎉 Released a new version 1.0.7! 🎉

What's new?

Updated material version to 1.3.0-beta01.

Migrated to kotlin-parcelize plugin internally.

Updated kotlin version to 1.4.20 internally.

Source code(tar.gz)
Source code(zip)

1.0.6(Sep 12, 2020)

🎉 Released a new version 1.0.6! 🎉

What's New?

Added extensions related functionalities to TransformationCompat for supporting Java.

TransformationCompat.startActivity(transformationLayout, intent)
TransformationCompat.startActivityForResult(transformationLayout, intent)
TransformationCompat.onTransformationStartContainer(activity)
TransformationCompat.onTransformationEndContainer(activity, transformationParams)
TransformationCompat.onTransformationStartContainer(fragment)
TransformationCompat.onTransformationEndContainer(fragment, transformationParams)
TransformationCompat.addTransformation(fragmentTransaction, transformationLayout, transitionName)

Added onTransformationEndContainerApplyParams functionality in TransformationCompat. After starts a new activity by using startActivity or startActivityForResult in TransformationCompat, apply the TransformationLayout.Params on an Activity.

Activiy A

TransformationCompat.startActivity(transformationLayout, intent)

Activity B

TransformationCompat,onTransformationEndContainerApplyParams(activity)

onTransformationEndContainerApplyParams() // kotlin extension

Used compile SDK version 30 and kotlin version 1.4.0 stable
Used single abstract method conversions to listener interfaces.
Used JvmSynthetic for hiding kotlin lambda functions in Java for using without adding a kotlin dependency.

Source code(tar.gz)
Source code(zip)
transformationlayout-1.0.6.aar(72.82 KB)

1.0.5(Jul 24, 2020)
🎉 Released a new version 1.0.5! 🎉

What's New?

Migrated Google-Material version to 1.3.0-alpha02.

Added allContainerColors, startElevation, endElevation, elevationShadowEnabled, holdAtEndEnabled to the params, and attributes.

Source code(tar.gz)
Source code(zip)
transformationlayout-1.0.5.aar(73.48 KB)

1.0.4(Apr 20, 2020)

Released version 1.0.4.

What's the difference?

We can transform a view or fragment into a fragment.

How to use?

Here is some example of transformation RecyclerView item in Fragment A into Fragment B.

FragmentA

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // [Step1]: apply onTransformationStartContainer.
    onTransformationStartContainer()
}

  /** This function will be called from the [PosterSingleAdapter.PosterDelegate]'s onBindViewHolder. */
  override fun onItemClick(poster: Poster, itemView: TransformationLayout) {
    val fragment = MainSingleDetailFragment()
    // [Step2]: getBundle from the TransformationLayout.
    val bundle = itemView.getBundle(MainSingleDetailFragment.paramsKey)
    bundle.putParcelable(MainSingleDetailFragment.posterKey, poster)
    fragment.arguments = bundle

    requireFragmentManager()
      .beginTransaction()
      // [Step3]: addTransformation using the TransformationLayout.
      .addTransformation(itemView)
      .replace(R.id.main_container, fragment, MainSingleDetailFragment.TAG)
      .addToBackStack(MainSingleDetailFragment.TAG)
      .commit()
  }

RecyclerView.Adapter

transformationLayout.transitionName = item.name

If you want to transform view (not a recyclerView's item), set transiton name in on onViewCreated.

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    transformationLayout.transitionName = item.name
}

FragmentB

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    // [Step1]: apply onTransformationEndContainer using TransformationLayout.Params.
    val params = arguments?.getParcelable<TransformationLayout.Params>(paramsKey)
    onTransformationEndContainer(params)
  }

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
   
    // [Step2]: sets a transition name to the target view.
    detail_container.transitionName = poster.name
}

Source code(tar.gz)
Source code(zip)
transformationlayout-1.0.4.aar(63.09 KB)

1.0.3(Mar 22, 2020)
Released version 1.0.3.

What's the difference?

Added TransformationCompat, TransformationActivity and TransformationAppCompatActivity. We can transform into an Activity easier using them.

How to use?

onTransformationStartContainer

Here is the same as before. We should add onTransformationStartContainer() to the Activity that has the floating action button.

override fun onCreate(savedInstanceState: Bundle?) { onTransformationStartContainer() // should be called before super.onCreate(). super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) }

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.INSTANCE.startActivity(transformationLayout, intent);
Source code(tar.gz)
Source code(zip)
transformationlayout-1.0.3.aar(70.93 KB)
1.0.2(Mar 17, 2020)
Released version 1.0.2.

What's difference?

startTransform(), startTransformWithDelay(delay: Long), finishTransform(), finishTransformWithDelay(delay: Long) functionalites are added.

startTransform and finishTransform

So we don't need to put container parameter to startTransform() and finishTransform methods.

// start transformation when touching the fab. fab.setOnClickListener { transformationLayout.startTransform() }

startTransformWithDelay and finishTransformWithDelay

We can start transformation with delaying.

override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_detail) // starts transformation automatically 200ms later. transformationLayout.startTransformWithDelay(200) }
Source code(tar.gz)
Source code(zip)
transformationlayout-1.0.2.aar(66.47 KB)
1.0.1(Feb 29, 2020)
Released version 1.0.1.

What is difference?

withView, withContext functionalities are added.

We can use it instead of withActivity in non-activity class like what RecyclerView.Adapter.
Source code(tar.gz)
Source code(zip)
app-debug.apk(3.51 MB)
transformationlayout-1.0.1.aar(62.74 KB)
1.0.0(Feb 28, 2020)

Released the first version 1.0.0.
Source code(tar.gz)
Source code(zip)
transformationlayout-1.0.0.aar(61.71 KB)