mtcn / motionlayoutexamples

:cool: Motion layout animation examples

MotionLayoutExamples

This is a sample app demonstrating UX/UI animations using MotionLayout.

Demos

Name	Demo
Basic Collapsing Toolbar
Collapsing Toolbar with Text Interpolation
Collapsing Toolbar with Cover Image
Complex Animation Example inspired by: Mi Smart Home - Outside view
Multiple Animation Example inspired by: DailyArt App

Resources

• Introduction to MotionLayout
• MotionLayout Offical docs

How to contribute?

• Check out contribution guidelines 👉CONTRIBUTING.md

License

Copyright 2018 Metecan Duyal

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

motionlayoutexamples's Issues

MotionLayout make app laggy when animation starts in some devices

I'm using motion layout in my project and animation starts with lag in some devices like HTC Desire 820, Samsung J5 2017 (the devices that I test myself).
in my layout description file, scaleX, scaleY, alpha and views position changed

here is my layout description source
`

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

<ConstraintSet android:id="@+id/start">

    <Constraint
        android:id="@id/mock_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        motion:layout_constraintEnd_toEndOf="parent"
        motion:layout_constraintTop_toTopOf="parent"
        motion:layout_constraintBottom_toBottomOf="parent"/>

    <Constraint
        android:id="@id/cv_content"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:rotation="0"
        android:alpha="1"
        motion:layout_constraintRight_toLeftOf="@+id/button"
        motion:layout_constraintTop_toTopOf="parent"
        motion:layout_constraintWidth_default="percent"/>

    <Constraint
        android:id="@id/content"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:rotation="0"
        motion:layout_constraintRight_toLeftOf="@+id/button"
        motion:layout_constraintTop_toTopOf="parent"
        motion:layout_constraintWidth_default="percent"/>


    <Constraint
        android:id="@id/v_activity_main_content"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        motion:layout_constraintEnd_toEndOf="parent"
        motion:layout_constraintTop_toTopOf="parent"
        motion:layout_constraintBottom_toBottomOf="parent"
        motion:layout_constraintStart_toEndOf="parent"/>

    <Constraint
        android:id="@id/cv_content_shadow"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:alpha="0"
        motion:layout_constraintRight_toRightOf="@+id/content_space"
        motion:layout_constraintTop_toTopOf="parent"
        motion:layout_constraintWidth_default="percent"
        motion:layout_constraintWidth_percent="1" />

    <Constraint
        android:id="@id/content_shadow"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:alpha="0"
        motion:layout_constraintRight_toRightOf="@+id/content_space"
        motion:layout_constraintTop_toTopOf="parent"
        motion:layout_constraintWidth_default="percent"
        motion:layout_constraintWidth_percent="1" />

</ConstraintSet>

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

    <Constraint
        android:id="@id/mock_view"
        motion:layout_constraintWidth_default="percent"
        motion:layout_constraintWidth_percent="0.6"
        android:layout_height="0dp"
        motion:layout_constraintEnd_toEndOf="parent"
        motion:layout_constraintTop_toTopOf="parent"
        motion:layout_constraintBottom_toBottomOf="parent"/>

    <Constraint
        android:id="@id/cv_content"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:rotation="0"
        android:scaleX="0.72"
        android:scaleY="0.75"
        android:alpha="1"
        motion:layout_constraintRight_toLeftOf="@+id/button"
        motion:layout_constraintTop_toTopOf="parent"
        motion:layout_constraintWidth_default="percent"
        motion:layout_constraintWidth_percent="1" />

    <Constraint
        android:id="@id/content"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:rotation="0"
        android:scaleX="0.72"
        android:scaleY="0.72"
        motion:layout_constraintRight_toLeftOf="@+id/button"
        motion:layout_constraintTop_toTopOf="parent"
        motion:layout_constraintWidth_default="percent"
        motion:layout_constraintWidth_percent="1" />

    <Constraint
        android:id="@id/cv_content_shadow"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:scaleX="0.62"
        android:scaleY="0.65"
        android:alpha="0.3"
        motion:layout_constraintRight_toRightOf="@+id/content_space"
        motion:layout_constraintTop_toTopOf="parent"
        motion:layout_constraintWidth_default="percent"
        motion:layout_constraintWidth_percent="1" />

    <Constraint
        android:id="@id/content_shadow"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:scaleX="0.62"
        android:scaleY="0.62"
        android:alpha="0.3"
        motion:layout_constraintRight_toRightOf="@+id/content_space"
        motion:layout_constraintTop_toTopOf="parent"
        motion:layout_constraintWidth_default="percent"
        motion:layout_constraintWidth_percent="1" />

    <Constraint
        android:id="@id/v_activity_main_content"
        android:layout_width="0dp"
        android:scaleX="0.75"
        android:scaleY="0.75"
        android:layout_height="match_parent"
        motion:layout_constraintRight_toLeftOf="@+id/button"
        motion:layout_constraintTop_toTopOf="parent"
        motion:layout_constraintWidth_default="percent"
        motion:layout_constraintWidth_percent="1"/>

</ConstraintSet>

`

here is a video that shows lag
https://drive.google.com/file/d/1ucnXWONejnssdlHSKN1qijL1UR03eKFj/view?usp=sharing

Collapsing Toolbar with cover image

When image is collapsed the theme of status bar did not change . How to change the status bar theme when toolbar is collapsed .