androidandroid-animationandroid-motionlayout
How to create slide animation in MotionLayout with constraints?
MotionLayout:
<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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
app:layoutDescription="@xml/activity_main_scene">
<FrameLayout
android:id="@+id/left_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0c0"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="right text"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="left text"
android:textColor="#33691E" />
</FrameLayout>
<FrameLayout
android:id="@+id/bar"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#c00"
tools:ignore="SpeakableTextPresentCheck"
tools:layout_editor_absoluteX="918dp">
<View
android:layout_width="50dp"
android:layout_height="match_parent"
android:clickable="false" />
</FrameLayout>
<FrameLayout
android:id="@+id/right_content"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#00c"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#fff"
android:layout_gravity="right"
android:text="right text"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#fff"
android:layout_gravity="left"
android:text="left text"
/>
</FrameLayout>
</androidx.constraintlayout.motion.widget.MotionLayout>
Scene:
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:motion="http://schemas.android.com/apk/res-auto"
>
<ConstraintSet android:id="@+id/start">
<Constraint android:id="@id/left_content"
android:layout_width="0dp"
android:layout_height="match_parent"
android:visibility="visible"
android:alpha="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/bar"
/>
<Constraint android:id="@id/bar"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layout_constraintRight_toRightOf="parent"
/>
<Constraint android:id="@id/right_content"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintLeft_toRightOf="@id/bar"
app:layout_constraintRight_toRightOf="parent"/>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint android:id="@id/left_content"
android:layout_width="0dp"
android:layout_height="match_parent"
android:alpha="1"
/>
<Constraint android:id="@id/bar"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layout_constraintLeft_toLeftOf="parent"
/>
<Constraint android:id="@id/right_content"
android:visibility="visible"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintLeft_toRightOf="@id/bar"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</ConstraintSet>
<Transition
app:constraintSetStart="@+id/start"
app:constraintSetEnd="@id/end">
<!-- <OnClick app:targetId="@id/bar" app:clickAction="toggle" />-->
<OnSwipe app:touchAnchorId="@id/bar" app:dragDirection="dragLeft" />
</Transition>
</MotionScene>
I need to apply translate animation like this using old animation:
<translate android:fromXDelta="0%"
android:toXDelta="-100%"
android:duration="150"
/>
The current animation is a resize of a dissapearing view but I need translation animation, how to achieve it?
Solution
Finally, I solved it, it is not easy to say at least: To achieve a slide animation without resizing of content you need 2 offscreen layouts which recreate imaginable place where visible content will be pushed or pulled.
The first offscreen buffer(positioned to the left of a visible layout) will be mirrored visible layout(not a full copy but blueprint of top level containers).
The second offscreen buffer(positioned to the right of the visible layout) will be a copy of visible layout.
Important: invisible part of a layout must be constrained as it is visible to user to avoid resize animation from 0 to a target size
It is hard to describe, but easier to show a result:
<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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
app:layoutDescription="@xml/activity_main_scene">
<View
android:id="@+id/off_screen_left"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<View
android:id="@+id/off_screen_left_content"
android:layout_width="0dp"
android:layout_height="0dp"
/>
<FrameLayout
android:id="@+id/off_screen_left_bar"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<View
android:layout_width="50dp"
android:layout_height="match_parent"
/>
</FrameLayout>
<View
android:id="@+id/off_screen_right"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<FrameLayout
android:id="@+id/off_screen_right_bar"
android:layout_width="wrap_content"
android:layout_height="match_parent"
>
<View android:layout_width="50dp"
android:layout_height="match_parent"
/>
</FrameLayout>
<View android:id="@+id/off_screen_right_content"
android:layout_width="0dp"
android:layout_height="0dp"
/>
<FrameLayout
android:id="@+id/left_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0c0"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="right text"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="left text"
android:textColor="#33691E" />
</FrameLayout>
<FrameLayout
android:id="@+id/bar"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#c00"
tools:ignore="SpeakableTextPresentCheck">
<View
android:layout_width="50dp"
android:layout_height="match_parent"
/>
</FrameLayout>
<FrameLayout
android:id="@+id/right_content"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#00c"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#fff"
android:layout_gravity="right"
android:text="right text"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#fff"
android:layout_gravity="left"
android:text="left text"
/>
</FrameLayout>
</androidx.constraintlayout.motion.widget.MotionLayout>
And scene:
<?xml version="1.0" encoding="utf-8"?>
<MotionScene
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:motion="http://schemas.android.com/apk/res-auto"
>
<ConstraintSet android:id="@+id/off_screens">
<Constraint android:id="@id/off_screen_left"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintRight_toLeftOf="parent"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="1"
/>
<Constraint android:id="@id/off_screen_left_bar"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layout_constraintLeft_toLeftOf="@id/off_screen_left"
/>
<Constraint android:id="@id/off_screen_left_content"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintLeft_toRightOf="@id/off_screen_left_bar"
app:layout_constraintRight_toRightOf="@id/off_screen_left"
/>
<Constraint android:id="@id/off_screen_right"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintLeft_toRightOf="parent"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="1"
/>
<Constraint android:id="@id/off_screen_right_bar"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layout_constraintRight_toRightOf="@id/off_screen_right"
/>
<Constraint android:id="@id/off_screen_right_content"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintLeft_toLeftOf="@id/off_screen_right"
app:layout_constraintRight_toLeftOf="@id/off_screen_right_bar"
/>
</ConstraintSet>
<ConstraintSet android:id="@+id/start"
app:deriveConstraintsFrom="@id/off_screens">
<Constraint android:id="@id/left_content"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/bar"
/>
<Constraint android:id="@id/bar"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layout_constraintRight_toRightOf="parent"
/>
<Constraint android:id="@id/right_content"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintLeft_toLeftOf="@id/off_screen_right_content"
app:layout_constraintRight_toRightOf="@id/off_screen_right_content"/>
</ConstraintSet>
<ConstraintSet android:id="@+id/end" app:deriveConstraintsFrom="@id/off_screens">
<Constraint android:id="@id/left_content"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintLeft_toLeftOf="@id/off_screen_left_content"
app:layout_constraintRight_toRightOf="@id/off_screen_left_content"
/>
<Constraint android:id="@id/bar"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layout_constraintLeft_toLeftOf="parent"
/>
<Constraint android:id="@id/right_content"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintLeft_toRightOf="@id/bar"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</ConstraintSet>
<Transition
app:constraintSetStart="@+id/start"
app:constraintSetEnd="@id/end">
<OnSwipe app:touchAnchorId="@id/bar"
app:dragDirection="dragLeft" />
</Transition>
</MotionScene>
Result animation:
