Reputation: 819
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
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