title: Android MotionLayout Swipe to reveal
body: <p>I have a list of items  that can be swiped away using a <code>MotionLayout</code>. I wanted to implement an animation similar to the one in the Gmail android app, where when you swipe an email away, there is that colored background that gets revealed. So what I tried is to place an <code>ImageView</code> in the <code>MotionLayout</code>under the view that moves, so that when that view goes away it will reveal the <code>ImageView</code> beneath.</p>
  <p>Here is the layout of the element:</p>
  <pre><code>&lt;androidx.constraintlayout.motion.widget.MotionLayout
          android:id=&quot;@+id/reading_list_item_motion&quot;
          android:layout_width=&quot;match_parent&quot;
          android:layout_height=&quot;72dp&quot;
          app:layoutDescription=&quot;@xml/reading_list_item_scene&quot;&gt;
  
          &lt;!-- The image under the element that moves --&gt;
          &lt;ImageView
              android:id=&quot;@+id/reading_list_item_back&quot;
              android:layout_width=&quot;match_parent&quot;
              android:layout_height=&quot;72dp&quot;
              app:layout_constraintEnd_toEndOf=&quot;parent&quot;
              app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
              app:layout_constraintTop_toTopOf=&quot;parent&quot;
              app:layout_constraintStart_toStartOf=&quot;parent&quot;
              tools:srcCompat=&quot;@tools:sample/backgrounds/scenic&quot; /&gt;
  
          &lt;androidx.constraintlayout.widget.ConstraintLayout
              android:id=&quot;@+id/reading_list_item_layout&quot;
              android:layout_width=&quot;match_parent&quot;
              android:layout_height=&quot;72dp&quot;
              android:gravity=&quot;center&quot;
              android:paddingLeft=&quot;@dimen/search_result_padding&quot;
              android:paddingRight=&quot;@dimen/search_result_padding&quot;
              app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
              app:layout_constraintEnd_toEndOf=&quot;parent&quot;
              app:layout_constraintStart_toStartOf=&quot;parent&quot;
              app:layout_constraintTop_toTopOf=&quot;parent&quot;&gt;
  
              &lt;ImageView
                  android:id=&quot;@+id/reading_list_item_icon&quot;
                  android:layout_width=&quot;@dimen/ic_search_result&quot;
                  android:layout_height=&quot;@dimen/ic_search_result&quot;
                  android:layout_gravity=&quot;center&quot;
                  android:layout_marginStart=&quot;8dp&quot;
                  android:layout_marginTop=&quot;4dp&quot;
                  android:layout_weight=&quot;1&quot;
                  android:contentDescription=&quot;Search result icon&quot;
                  app:error=&quot;@{@drawable/ic_default_search_result}&quot;
                  app:imageUrl=&quot;@{book.best_book.small_image_url}&quot;
                  app:layout_constraintEnd_toStartOf=&quot;@id/reading_list_item_info_layout&quot;
                  app:layout_constraintHorizontal_bias=&quot;0.0&quot;
                  app:layout_constraintStart_toStartOf=&quot;parent&quot;
                  app:layout_constraintTop_toTopOf=&quot;parent&quot;
                  app:srcCompat=&quot;@drawable/ic_default_search_result&quot; /&gt;
  
              &lt;LinearLayout
                  android:id=&quot;@+id/reading_list_item_info_layout&quot;
                  android:layout_width=&quot;316dp&quot;
                  android:layout_height=&quot;0dp&quot;
                  android:layout_marginStart=&quot;8dp&quot;
                  android:layout_marginTop=&quot;4dp&quot;
                  android:layout_weight=&quot;1&quot;
                  android:orientation=&quot;vertical&quot;
                  app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
  
                  app:layout_constraintHorizontal_bias=&quot;0.4&quot;
                  app:layout_constraintStart_toEndOf=&quot;@+id/reading_list_item_icon&quot;
                  app:layout_constraintTop_toTopOf=&quot;parent&quot;
                  app:layout_constraintVertical_bias=&quot;0.6&quot;&gt;
  
                  &lt;TextView
                      android:id=&quot;@+id/reading_list_item_title&quot;
                      android:layout_width=&quot;match_parent&quot;
                      android:layout_height=&quot;wrap_content&quot;
                      android:ellipsize=&quot;end&quot;
                      android:maxLines=&quot;2&quot;
                      android:singleLine=&quot;false&quot;
                      android:text=&quot;@{book.best_book.title}&quot;
                      android:textColor=&quot;@color/textSecondary&quot;
                      android:textSize=&quot;18sp&quot;
                      android:textStyle=&quot;bold&quot; /&gt;
  
                  &lt;TextView
                      android:id=&quot;@+id/reading_list_item_author&quot;
                      android:layout_width=&quot;match_parent&quot;
                      android:layout_height=&quot;wrap_content&quot;
                      android:ellipsize=&quot;end&quot;
                      android:singleLine=&quot;true&quot;
                      android:text='@{&quot;by &quot; + book.best_book.author.name }'
                      android:textColor=&quot;@color/textSecondary&quot; /&gt;
  
              &lt;/LinearLayout&gt;
          &lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;
  
  
      &lt;/androidx.constraintlayout.motion.widget.MotionLayout&gt;
  </code></pre>
  <p>Even though in the Design editor the image appears to be there, and if I play the <code>MotionLayout</code> transition everything behaves as expected, when starting the app the <code>ImageView</code> is nowhere to be seen.</p>
  <p>Another approach that I thought of would be to append the <code>ImageView</code> at the end of the view that moves, so that when it starts to go off-screen, the <code>ImageView</code> comes in view. I am not sure how could I implement this though since the <code>ImageView</code> should be as wide as the screen and <code>match_parent</code> obviously wouldn't work</p>
  <p>Does anyone have any idea how can I implement this animation?</p>
  <p>Thanks in advance!</p>
  <p>Edit: Here is an image of how I'd like it to look. The more the item goes of screen, the more of the red background gets revealed.
  <a href="https://i.stack.imgur.com/vgW5H.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vgW5H.jpg" alt="enter image description here" /></a></p>
  <p>Here is the MotionScene xml:</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
  &lt;MotionScene xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
      xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot;&gt;
  
      &lt;ConstraintSet android:id=&quot;@+id/start&quot;&gt;
          &lt;Constraint
              android:id=&quot;@+id/reading_list_item_layout&quot;
              android:layout_width=&quot;match_parent&quot;
              android:layout_height=&quot;72dp&quot;
              app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
              app:layout_constraintEnd_toEndOf=&quot;parent&quot;
              app:layout_constraintStart_toStartOf=&quot;parent&quot;
              app:layout_constraintTop_toTopOf=&quot;parent&quot; /&gt;
          &lt;Constraint
              app:layout_editor_absoluteY=&quot;1dp&quot;
              android:id=&quot;@+id/imageView&quot; /&gt;
      &lt;/ConstraintSet&gt;
  
      &lt;ConstraintSet android:id=&quot;@+id/end&quot;&gt;
          &lt;Constraint
              android:id=&quot;@+id/reading_list_item_layout&quot;
              app:layout_constraintEnd_toEndOf=&quot;parent&quot;
              android:layout_width=&quot;0dp&quot;
              android:layout_height=&quot;72dp&quot;
              app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
              app:layout_constraintTop_toTopOf=&quot;parent&quot;
              app:layout_constraintStart_toEndOf=&quot;parent&quot; /&gt;
      &lt;/ConstraintSet&gt;
  
      &lt;Transition
          app:constraintSetEnd=&quot;@id/end&quot;
          app:constraintSetStart=&quot;@+id/start&quot;&gt;
          &lt;OnSwipe
              app:dragDirection=&quot;dragRight&quot;
              app:touchAnchorId=&quot;@id/reading_list_item_layout&quot;
              app:touchAnchorSide=&quot;left&quot; /&gt;
      &lt;/Transition&gt;
  &lt;/MotionScene&gt;
  </code></pre>