Fade in, fade out not working in MotionLayout

Question

I'm trying to make an effect of fade in, fade out using alpha and motionLayout, but it seems that it's not working.

This is the imageView that I want to fade.

    <ImageView
    android:id="@+id/tijeras"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="8dp"
    android:contentDescription="@string/tijeras"
    android:src="@drawable/ic_tijeras" />
    </android.support.constraint.motion.MotionLayout>

And this is the motion file

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <Transition
        app:duration="2000"
        app:constraintSetStart="@+id/start"
        app:constraintSetEnd="@+id/end">
        <KeyFrameSet>
            <KeyAttribute
                app:framePosition="0"
                app:motionTarget="@id/tijeras"
                android:alpha="1.0"/>
            <KeyAttribute
                app:framePosition="50"
                app:motionTarget="@id/tijeras"
                android:alpha="0.0"/>
        </KeyFrameSet>
    </Transition>
    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@+id/tijeras"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:alpha="1.0"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/logo"/>
    </ConstraintSet>
    <ConstraintSet android:id="@+id/end">
        <Constraint android:id="@+id/tijeras"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:alpha="1.0"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/logo"/>
    </ConstraintSet>
</MotionScene>

I can see the image, but it's not doing the alpha in and out. Any idea? Do I need to trigger it for starting?

score 2 · Answer 1 · answered Dec 30 '19 at 22:09

It looks like you have set the alpha as 1.0 android:alpha="1.0" on both the start and end ConstraintSet.

You can more easily set the alpha to update with a CustomAttribute by removing alpha from the KeyAttribute and placing the following below your Transition element

<ConstraintSet android:id="@+id/start">
    <Constraint android:id="@+id/tijeras"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/logo">
        <CustomAttribute
            motion:attributeName="alpha"
            motion:customFloatValue="0.0" />
    </Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
    <Constraint android:id="@+id/tijeras"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:alpha="1.0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/logo">
        <CustomAttribute
            motion:attributeName="alpha"
            motion:customFloatValue="1.0" />
    </Constraint>
</ConstraintSet>

score 1 · Answer 2 · answered Sep 29 '19 at 15:15

I think that i have found the problem and the solution. So you are defining two ConstraintSet (start, end) and in both alpha = 1, it means that your view is visible in both of them right ? Now let's see your KeyFrameSet

<KeyFrameSet>
        <KeyAttribute
            app:framePosition="0"
            app:motionTarget="@id/tijeras"
            android:alpha="1.0"/>
        <KeyAttribute
            app:framePosition="50"
            app:motionTarget="@id/tijeras"
            android:alpha="0.0"/>
    </KeyFrameSet>

You're saying that at framePosition = 0 your view is visible (alpha=1), then in the middle of your transition (framePosition = 50 ) you are hiding your view (alpha=0). It means that when you are at framePosition = 100 (end of your transition) the alpha will be 1 again because in your ConstraintSet (end) is equal to 1.

So try to change it like this, instead of 50, framePosition = 100

<KeyFrameSet>
        <KeyAttribute
            app:framePosition="0"
            app:motionTarget="@id/tijeras"
            android:alpha="1.0"/>
        <KeyAttribute
            app:framePosition="100"
            app:motionTarget="@id/tijeras"
            android:alpha="0.0"/>
    </KeyFrameSet>

score 0 · Answer 3 · answered Oct 10 '20 at 13:36

There is no need setting a CustomAttribute, this solution should work:

BaseView

<!-- Other views -->

<ImageView
    android:id="@+id/tijeras"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="8dp"
    android:contentDescription="@string/tijeras"
    android:src="@drawable/ic_tijeras" />

Content Scene

<MotionScene xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">
    
     <Transition
        app:duration="2000"
        app:constraintSetStart="@+id/start"
        app:constraintSetEnd="@+id/end">

        <KeyFrameSet>
            <KeyAttribute
                app:framePosition="50"
                app:motionTarget="@id/tijeras"
                android:alpha="0.0"/> <!-- Set alpha to zero -->
        </KeyFrameSet>
    </Transition>

    <ConstraintSet android:id="@+id/start">
    <ConstraintSet android:id="@+id/end">
        <Constraint android:id="@id/tijeras" <!-- without + -->
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:alpha="0.0" <!-- set alpha to zero -->
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/logo"/>
    </ConstraintSet>

</MotionScene>

Fade in, fade out not working in MotionLayout

3 Answers3

BaseView

Content Scene