Use Elements of Linear Layout in Motion Layout

Question

I want to use linearlayout in motionlayout but I have problem. When I want give animation to elements of linearlayout , I can't give any animations to elemnts that they are in linearlayout and i can just give animation to linearlayout. This is main xml file:

 <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout 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:id="@+id/motion_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/activity_main_scene"
    tools:context=".MainActivity"
    tools:showpath="true" >

    <LinearLayout
        android:id="@+id/linearLayout5"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <Button
            android:id="@+id/button16"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:text="onClick" />

        <Button
            android:id="@+id/button17"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:text="onClick" />

        <Button
            android:id="@+id/button18"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:text="onClick" />
    </LinearLayout>
</androidx.constraintlayout.motion.widget.MotionLayout>

and this is layoutDescription file :

<?xml version="1.0" encoding="utf-8"?>
<MotionScene 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">
       <KeyFrameSet>

       </KeyFrameSet>
    </Transition>

    <ConstraintSet android:id="@+id/start" >
        <Constraint
            motion:layout_constraintEnd_toEndOf="parent"
            android:id="@+id/linearLayout4" />
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
    </ConstraintSet>
</MotionScene>

Motion layout can only animate its direct children. If you want to run any animations on your buttons you'll need to flatten the view hierarchy aka remove linear layout and put them in motion layout directly. — Pawel, Oct 03 '21 at 22:57
I just want to add this: Don't use *DP* directly, use dimen resources — Noah, Oct 03 '21 at 23:33
Because i want to make animation logo with Views that they in my linearlayout and buttons in my code is example. @Noah — Poorya Alishah Kamandi, Oct 04 '21 at 06:29
Have you tried replacing LinearLayout with another MotionLayout? You'd need two Scene files then, but it should be possible. — hdort, Oct 04 '21 at 07:08
@PooryaAlishahKamandi sure, the official Android Motion Layout example page has multiple examples with nested MotionLayouts — hdort, Oct 04 '21 at 09:18

score 0 · Accepted Answer · answered Oct 09 '21 at 15:43

On ViewGroup (e.g. MotionLayout) cannot manipulate the Views of another ViewGroup. In your case the LinearLayout defines the position of its views. (That's its job)

You have several solutions:

Nested MotionLayouts
Flow
Build ConstraintSets that have the same behavior as LinearLayout

Nested MotionLayouts

You would need to have two MotionScene files. Have the progress of one affect the progress of another. (Add in ConstraintSet <ConstraintOverrid android:id:="child" motion:motionProgress="0 or 1" >

Flow

Flow allows you to flatten the hierarchy but achieve behaviors like linear layout There are many articles on this the most direct to your need is "ConstraintLayout Flow, Bye Bye to LinerLayout" Since MotionLayout implements all the features of ConstraintLayout so this will work.

Note. To retain separation and reuse (If that was the goal you can put the views in a separate include.

Emulate LinearLayout with constraints

This is the lightest. Create a vertical chain and constrain the start and end to the parent. (Most introductions to ConstraintLayout describe this.

Use Elements of Linear Layout in Motion Layout

1 Answers1

Nested MotionLayouts

Flow

Emulate LinearLayout with constraints