CODEWITHSUNDEEP
androidandroid-layoutandroid-motionlayout
Tudor S.
Tudor S.

Reputation: 819

MotionLayout progress jumps from 0 to 1 without intermediate steps

I have a MotionLayout with a TransitionListener and progress seems to go from 0 to 1 for my MotionScene:

<MotionScene xmlns:app="http://schemas.android.com/apk/res-auto"
             xmlns:android="http://schemas.android.com/apk/res/android">

    <Transition
        app:constraintSetStart="@id/header_expanded"
        app:constraintSetEnd="@id/header_condensed"
        app:duration="2000">

        <OnSwipe
             app:touchAnchorId="@id/view_pager"
            app:dragDirection="dragDown"
            app:touchAnchorSide="top"/>

        <KeyFrameSet>
            <KeyAttribute
                android:elevation="@dimen/header_elevation_expanded"
                app:framePosition="0"
                app:target="@id/header"/>

            <KeyAttribute
                android:elevation="@dimen/header_elevation_expanded"
                app:framePosition="90"
                app:target="@id/header"/>


            <KeyAttribute
                android:elevation="@dimen/header_elevation_collapsed"
                app:framePosition="100"
                app:target="@id/header" />
        </KeyFrameSet>
    </Transition>

    <ConstraintSet android:id="@+id/header_expanded">
        <Constraint
            android:id="@+id/guideline_expanded_state"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.5" />

    </ConstraintSet>

    <ConstraintSet android:id="@+id/header_condensed">
        <Constraint
            android:id="@+id/guideline_expanded_state"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.18" />
    </ConstraintSet>
</MotionScene>

If print the progress in the log it seems to jump from 0 to 1. I have tried changing the duration, or just changing the constraints for the header view to a different guideline but it doesn't seemt o affect the progress.

The only weird thing that I see in the logs is the fact that it cannot find the OnSwipe touchAnchorId view.

W/MotionLayout: WARNING could not find view id com.pitchero.ph:id/view_pager

The layout using this MotionScence is below:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/container"
                                                      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"
                                                      android:background="@color/activity_background"
                                                      app:layoutDescription="@xml/motion_scene_team">

    <com.github.florent37.shapeofview.shapes.DiagonalView
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:elevation="@dimen/menu_header_elevation_expanded"
        app:layout_constraintBottom_toTopOf="@+id/guideline_expanded_state"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:shape_diagonal_angle="@dimen/header_angle"
        app:shape_diagonal_direction="left"
        app:shape_diagonal_position="bottom">

        <View
            android:id="@+id/background"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/redE64"/>

    </com.github.florent37.shapeofview.shapes.DiagonalView>

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/transparent"
        app:layout_collapseMode="pin">

        <LinearLayout
            android:id="@+id/toolbar_title_container"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:elevation="5dp"
            android:gravity="center"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/toolbar_image"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginEnd="7dp"
                android:visibility="gone"/>

            <TextView
                android:id="@+id/title"
                style="@style/title.white"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:ellipsize="end"
                android:gravity="center"
                android:includeFontPadding="true"
                android:maxLines="1"
                tools:text="Help Center"/>
        </LinearLayout>
    </androidx.appcompat.widget.Toolbar>

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs_bar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/transparent"
        android:elevation="2dp"
        android:textAlignment="center"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/toolbar"
        app:tabBackground="@color/transparent"
        app:tabIndicatorColor="@color/white"
        app:tabSelectedTextColor="@color/white"
        app:tabTextColor="@color/white_50_percent"/>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tabs_bar"/>

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_expanded_state"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5"/>

</androidx.constraintlayout.motion.widget.MotionLayout>

I don't really understand why this is happening in this particular case. I suspect it's because it cannot find the ViewPager but I don't see why that would happen.

Also, I'm using the following version of the ConstraintLayout libs:

implementation 'androidx.constraintlayout:constraintlayout:2.0.0-alpha3'

implementation 'androidx.constraintlayout:constraintlayout-solver:2.0.0-alpha3'

Any help would be much appreciated, thank you!

Upvotes: 3

Views: 3116

Answers (1)

Sandip Savaliya
Sandip Savaliya

Reputation: 784

You have implemented MotionLayout in a wrong way, first of all, you must not use Guideline to set animation, You can use ViewGroup containers or View for Animation.

Next thing, you must define all ContraintSet which are referencing another layout. For ex.

 <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tabs_bar"/>

Here you are using app:layout_constraintTop_toBottomOf="@id/tabs_bar" as a reference, so if you are animating That viewpager, you will need to add ConstraintSet for both of them, Then only you can get rid of that warning. :)

Upvotes: 1

Related Questions