ImageViews with KyrieDrawables disappear during Transitions

[GSala]

With implementation 'com.github.alexjlockwood:kyrie:0.2.0'

I have run into an issue where the ImageViews that have a KyrieDrawable disappear when running a Transition through TransitionManager.beginDelayedTransition(). To better observe this behavior (bug?) I have recorded the following two gifs:

With val drawable = KyrieDrawable.create(context, resId)

With val drawable = AppCompatResources.getDrawable(context, resId):

As you can see, when using Kyrie, the image disappears before the transition is done, but that doesn't happen using AndroidX's vector drawables.

The full code :
MainActivity.kt

class MainActivity : AppCompatActivity() {

    private lateinit var container: FrameLayout

    private lateinit var firstView: View
    private lateinit var secondView: View


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

        container = findViewById(R.id.container)

        val inflater = LayoutInflater.from(this)

        firstView = inflater.inflate(R.layout.view_one, container, false) as ViewGroup
        secondView = inflater.inflate(R.layout.view_two, container, false) as ViewGroup

        firstView.findViewById<ImageView>(R.id.image).setVectorDrawable(R.drawable.ic_android_black_24dp)
        firstView.findViewById<Button>(R.id.button).setOnClickListener(::onClick)
        secondView.findViewById<ImageView>(R.id.image).setVectorDrawable(R.drawable.ic_android_black_24dp)
        secondView.findViewById<Button>(R.id.button).setOnClickListener(::onClick)

        container.addView(firstView)
    }

    fun onClick(view: View) {
        val transition = TransitionSet().apply {
            duration = 1000
            addTransition(Slide(Gravity.END).apply {
                mode = Slide.MODE_IN
                interpolator = LinearInterpolator()
            })
            addTransition(Slide(Gravity.START).apply {
                mode = Slide.MODE_OUT
                interpolator = LinearInterpolator()
            })
            setMatchOrder(Transition.MATCH_INSTANCE)
        }
        TransitionManager.beginDelayedTransition(container, transition)
        if (container.getChildAt(0) == firstView) {
            container.removeAllViews()
            container.addView(secondView)
        } else {
            container.removeAllViews()
            container.addView(firstView)
        }
    }

    fun ImageView.setVectorDrawable(@DrawableRes resId: Int) {
//        val drawable = KyrieDrawable.create(context, resId)
        val drawable = AppCompatResources.getDrawable(context, resId)
        setImageDrawable(drawable)
    }

activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

view_one.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Potatoes"
        android:textSize="24sp"
        app:layout_constraintBottom_toTopOf="@+id/image"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/image"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:tint="@color/colorPrimary"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        tools:src="@drawable/ic_android_black_24dp" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="AAAAAAAAAH"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/image" />


</androidx.constraintlayout.widget.ConstraintLayout>

view_two.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Sandwich"
        android:textSize="24sp"
        app:layout_constraintBottom_toTopOf="@+id/image"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/image"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:tint="#F00"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        tools:src="@drawable/ic_android_black_24dp" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="MOOOOOOOOOO"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/image" />


</androidx.constraintlayout.widget.ConstraintLayout>

ic_android_black_24.dp.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M6,18c0,0.55 0.45,1 1,1h1v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L11,19h2v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L16,19h1c0.55,0 1,-0.45 1,-1L18,8L6,8v10zM3.5,8C2.67,8 2,8.67 2,9.5v7c0,0.83 0.67,1.5 1.5,1.5S5,17.33 5,16.5v-7C5,8.67 4.33,8 3.5,8zM20.5,8c-0.83,0 -1.5,0.67 -1.5,1.5v7c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5v-7c0,-0.83 -0.67,-1.5 -1.5,-1.5zM15.53,2.16l1.3,-1.3c0.2,-0.2 0.2,-0.51 0,-0.71 -0.2,-0.2 -0.51,-0.2 -0.71,0l-1.48,1.48C13.85,1.23 12.95,1 12,1c-0.96,0 -1.86,0.23 -2.66,0.63L7.85,0.15c-0.2,-0.2 -0.51,-0.2 -0.71,0 -0.2,0.2 -0.2,0.51 0,0.71l1.31,1.31C6.97,3.26 6,5.01 6,7h12c0,-1.99 -0.97,-3.75 -2.47,-4.84zM10,5L9,5L9,4h1v1zM15,5h-1L14,4h1v1z" />
</vector>

[alexjlockwood]

Thanks for reporting! I will look into it tonight!

It would be helpful if you could post a zip file containing the sample project to the bug report, if that's possible. :)

Also, were you able to reproduce this issue on only certain APIs? i.e. Does it also happen on API 21 for example?

[alexjlockwood]

My suspicion is that it is because of this line of code: https://github.com/alexjlockwood/kyrie/blob/master/kyrie/src/main/java/com/github/alexjlockwood/kyrie/KyrieDrawable.kt#L239

I think we can probably just remove that if statement if it is in fact the cause of the bug.

[GSala]

Here's the zip file with the project

I've tried API 25 / 27 / 28 and Q and all have the same behavior. Haven't tried the minimum (21)

[alexjlockwood]

Just published 0.2.1 which should fix the issue. Let me know if you still see the issue. :)