CODEWITHSUNDEEP
androidandroid-transitionsandroid-motionlayout
Roberto Gimenez
Roberto Gimenez

Reputation: 304

Fade in, fade out not working in MotionLayout

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?

Upvotes: 7

Views: 4164

Answers (3)

Andrew
Andrew

Reputation: 4712

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>

Upvotes: 0

kjanderson2
kjanderson2

Reputation: 1359

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>

Upvotes: 2

Matteo Pasotti
Matteo Pasotti

Reputation: 79

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>

Upvotes: 1

Related Questions