Skip to content

Instantly share code, notes, and snippets.

@saurabharora90
Created September 30, 2018 07:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save saurabharora90/93e6a0b7afce0459c5e27d529d1f1c24 to your computer and use it in GitHub Desktop.
Save saurabharora90/93e6a0b7afce0459c5e27d529d1f1c24 to your computer and use it in GitHub Desktop.
Motion Layout Example - Building the example shown at Google IO: https://youtu.be/ytZteMo4ETk?t=31m59s
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
app:layoutDescription="@xml/scene_05"
android:layout_height="match_parent">
<ImageView
android:id="@+id/ivDusk"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
android:src="@drawable/dusk"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<ImageView
android:id="@+id/ivInfo"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toBottomOf="@id/ivDusk"
app:layout_constraintEnd_toEndOf="@id/ivDusk"
app:srcCompat="@android:drawable/ic_menu_info_details" />
<ImageView
android:id="@+id/ivArrow"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginEnd="8dp"
android:rotation="90"
app:layout_constraintBottom_toBottomOf="@id/ivInfo"
app:layout_constraintEnd_toStartOf="@id/ivInfo"
app:layout_constraintTop_toTopOf="@id/ivInfo"
app:srcCompat="@android:drawable/arrow_up_float" />
<TextView
android:id="@+id/tvDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="Information"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="@id/ivDusk"
app:layout_constraintTop_toBottomOf="@+id/ivDusk" />
<TextView
android:id="@+id/tvLorem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tristique, urna vel efficitur condimentum, odio est scelerisque orci, sit amet cursus risus lacus ut leo. Curabitur aliquet, sapien eget finibus efficitur, orci libero dignissim est, et aliquet dolor sapien interdum massa. Curabitur lacinia arcu ut ante laoreet consequat. Mauris id massa sed quam accumsan elementum sed non eros. Proin nec ligula vitae est sollicitudin aliquam."
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@id/tvDescription"
app:layout_constraintTop_toBottomOf="@+id/tvDescription" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.6" />
</androidx.constraintlayout.motion.widget.MotionLayout>
<?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">
<Transition
app:constraintSetEnd="@+id/end"
app:constraintSetStart="@+id/start"
app:duration="1000">
<OnSwipe
app:dragDirection="dragUp"
app:touchAnchorId="@+id/ivDusk"
app:touchAnchorSide="bottom" />
<KeyFrameSet>
<KeyPosition
app:framePosition="20"
app:keyPositionType="pathRelative"
app:percentY="-0.2"
app:target="@+id/ivArrow" />
<KeyAttribute
android:alpha="0"
app:framePosition="0"
app:target="@+id/tvDescription" />
<KeyAttribute
android:alpha="0"
app:framePosition="0"
app:target="@+id/tvLorem" />
<KeyAttribute
android:alpha="1"
app:framePosition="100"
app:target="@+id/tvDescription" />
<KeyAttribute
android:alpha="1"
app:framePosition="100"
app:target="@+id/tvLorem" />
</KeyFrameSet>
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/ivDusk"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@+id/ivArrow"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginEnd="8dp"
android:rotation="90"
app:layout_constraintBottom_toBottomOf="@id/ivInfo"
app:layout_constraintEnd_toStartOf="@id/ivInfo"
app:layout_constraintTop_toTopOf="@id/ivInfo" />
<Constraint
android:id="@+id/ivInfo"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toBottomOf="@id/ivDusk"
app:layout_constraintEnd_toEndOf="@id/ivDusk">
<CustomAttribute
app:attributeName="ColorFilter"
app:customColorValue="#FFFFFF" />
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@+id/ivDusk"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="@id/guideline3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@+id/ivArrow"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="16dp"
android:rotation="180"
app:layout_constraintBottom_toBottomOf="@id/ivDusk"
app:layout_constraintEnd_toEndOf="@id/ivDusk" />
<Constraint
android:id="@+id/ivInfo"
android:layout_width="48dp"
android:layout_height="48dp"
app:layout_constraintBottom_toBottomOf="@id/ivDusk"
app:layout_constraintEnd_toEndOf="@id/ivDusk"
app:layout_constraintStart_toStartOf="@id/ivDusk"
app:layout_constraintTop_toBottomOf="@id/ivDusk">
<CustomAttribute
app:attributeName="ColorFilter"
app:customColorValue="#FF0000" />
</Constraint>
</ConstraintSet>
</MotionScene>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment