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:
- "Too many positional arguments: 2 excepted, but 3 found. try removing the extra arguments" . please help me:(
- Open external links in the browser with android webview
- Targeting SDK Android Q results in Failed to finalize session : INSTALL_FAILED_INVALID_APK: Failed to extract native libraries, res=-2
- Android app, How to support 64-bit architectures?
- Is there a way to don't include .so file if I use created ndk lib?
- How to access sub elements of a custom FrameLayout in a library project?
- > Task :app:checkDebugDuplicateClasses FAILED
- Remove Default padding around checkboxes in Jetpack Compose new update
- Generate SHA-1 for Flutter/React-Native/Android-Native app
- How to automatically convert if-else if statement to switch
- Is this the correct way to have different values/styles for different versions
- Installing two apk using one apk
- While installing cmdline-tools for flutter on Ubuntu, get KeyError: ('cmdline-tools', 'latest')
- App inspection does not detect any devices
- Temporary block when using Credential Manager to Sign in with Google
- Change Padding on Borderless Buttons
- After adding large png images .SO created leading to increase in app size
- Can't add android library to JCenter
- How to start an application using Android ADB tools
- How do load images in Glide with Animation
- How to get the icon for an Android permission?
- Kotlin How do I update the throughput when the application is closing?
- can't delete file from external storage in android programmatically
- com.google.firebase.database.DatabaseException: Failed to convert value of type java.lang.Boolean to String What is it about?
- Due to Android Service and AlarmManager app getting crashed
- How to create youtube's double-tap gesture on Android?
- Using Manage_External_Storage with .net Maui
- Applying Flutters app_plugin_loader Gradle plugin imperatively using the apply script method which is deprecated, will be removed in a future release
- How to measure the size of a Coil AsyncImage with ContentScale.Fit, once loaded?
- Passing long value to Java with JNI