Animation with motion layout Android

Question

I'm trying to implement below animation with MotionLayout but at the end I'm messing up.

Animation that I want

Answer 1

It is vague making it difficult to create a response for you.

The easy approach is the big flat UI:

Step 1

Start with a layout with ConstraintLayout in the design surface Recreated the UI as you see at the start. Keeping the UI as flat as possible. (no children of children) Name each View with an id. Views that are on the screen at the end but not the beginning should be created and marked gone.

Step 2

Copy the layout file name it "temp.xml" Edit the layout to create the look at the end. Do not delete or create any widgets.

1. Toggle visibility
2. Adjust constraints to position it correctly
3. Adjust elevation

When you think you have both the start and end looking good

Step 3

Take the Starting layout and convert it to MoionLayout (Right click on ConstraintLayout in design surface)

• Select on the "end" box (ConstraintSet)
• Select a view in "ConstraintSet (end)" table
• Click on edit pen and Select "Create All Constraints"
• Open the MotionScene in the xml directory
• Edit the <ConstraintSet android:id="@+id/end"> section
• Looking at your "temp.xml" and coping all the android:layout... attributes"
• If this is done the animation should transition between the two looks.
• But the movements will be all wrong!

** Step 4**

Customize the transition Use keyPosition & KeyAttribute which can be created graphically by clicking on the timeline.

** Tips about your specific transition **

• It would be easier to create two "Earn free coins" one invisible than to move the first one.
• Darken the background buy creating a full screen view that goes from Alpha 0 to Alpha 0.3

Look at the MotionTags series to see various parts. They are set up in small 2-4 min tutorials If you Google you will find many examples.