title: How to handle <OnClick> and onClickListener in MotionLayout similar to Youtube
body: <p>I have been trying to understand how MotionLayout works and after some trying I have a question as to how OnClick works for a View.</p>
  
  <p>I have something that I tried from <a href="https://developer.android.com/training/constraint-layout/motion-layout-examples" rel="nofollow noreferrer">official examples</a>. I tried something similar to the youtube swiping. </p>
  
  <p><code>scene_24.xml</code></p>
  
  <p></p>
  
  <pre><code>&lt;Transition
      motion:constraintSetEnd="@+id/end"
      motion:constraintSetStart="@+id/start"
      motion:duration="1000"
      motion:motionInterpolator="linear"&gt;
  
      &lt;OnSwipe
          motion:dragDirection="dragUp"
          motion:touchAnchorSide="bottom"
          motion:touchRegionId="@+id/top_image_container" /&gt;
  
      &lt;ConstraintSet android:id="@id/start"&gt;
  
          &lt;Constraint
              android:id="@id/top_image_container"
              android:layout_width="0dp"
              android:layout_height="320dp"
              motion:layout_constraintEnd_toEndOf="parent"
              motion:layout_constraintStart_toStartOf="parent"
              motion:layout_constraintTop_toTopOf="parent" /&gt;
  
          &lt;Constraint
              android:id="@id/top_image"
              android:layout_width="0dp"
              android:layout_height="0dp"
              motion:layout_constraintBottom_toBottomOf="@id/top_image_container"
              motion:layout_constraintEnd_toEndOf="@id/top_image_container"
              motion:layout_constraintStart_toStartOf="@id/top_image_container"
              motion:layout_constraintTop_toTopOf="@id/top_image_container" /&gt;
  
          &lt;Constraint
              android:id="@id/recyclerview_container"
              android:layout_width="0dp"
              android:layout_height="0dp"
              motion:layout_constraintBottom_toBottomOf="parent"
              motion:layout_constraintEnd_toEndOf="parent"
              motion:layout_constraintStart_toStartOf="parent"
              motion:layout_constraintTop_toBottomOf="@id/top_image_container" /&gt;
  
          &lt;Constraint
              android:id="@id/recyclerview_front"
              android:layout_width="0dp"
              android:layout_height="0dp"
              motion:layout_constraintBottom_toBottomOf="parent"
              motion:layout_constraintEnd_toEndOf="parent"
              motion:layout_constraintStart_toStartOf="parent"
              motion:layout_constraintTop_toBottomOf="@id/top_image_container" /&gt;
  
          &lt;Constraint android:id="@+id/image_play"&gt;
              &lt;PropertySet motion:alpha="0" /&gt;
          &lt;/Constraint&gt;
  
          &lt;Constraint android:id="@+id/image_clear"&gt;
              &lt;PropertySet motion:alpha="0" /&gt;
          &lt;/Constraint&gt;
  
          &lt;Constraint
              android:id="@id/bottom_nav"
              android:layout_width="0dp"
              android:layout_height="wrap_content"
              motion:layout_constraintLeft_toLeftOf="parent"
              motion:layout_constraintRight_toRightOf="parent"
              motion:layout_constraintTop_toBottomOf="parent" /&gt;
      &lt;/ConstraintSet&gt;
  
      &lt;ConstraintSet android:id="@id/end"&gt;
  
          &lt;Constraint
              android:id="@id/top_image_container"
              android:layout_width="0dp"
              android:layout_height="52dp"
              android:layout_marginStart="8dp"
              android:layout_marginEnd="8dp"
              android:layout_marginBottom="8dp"
              motion:layout_constraintBottom_toTopOf="@id/bottom_nav"
              motion:layout_constraintEnd_toEndOf="parent"
              motion:layout_constraintStart_toStartOf="parent" /&gt;
  
          &lt;Constraint
              android:id="@id/top_image"
              android:layout_width="0dp"
              android:layout_height="0dp"
              android:layout_marginTop="2dp"
              android:layout_marginBottom="2dp"
              motion:layout_constraintBottom_toBottomOf="@id/top_image_container"
              motion:layout_constraintDimensionRatio="H,1:2.5"
              motion:layout_constraintStart_toStartOf="@id/top_image_container"
              motion:layout_constraintTop_toTopOf="@id/top_image_container" /&gt;
  
          &lt;Constraint
              android:id="@id/recyclerview_container"
              android:layout_width="0dp"
              android:layout_height="0dp"
              android:layout_marginStart="8dp"
              android:layout_marginEnd="8dp"
              android:layout_marginBottom="8dp"
              motion:layout_constraintBottom_toTopOf="@id/bottom_nav"
              motion:layout_constraintEnd_toEndOf="parent"
              motion:layout_constraintStart_toStartOf="parent"
              motion:layout_constraintTop_toBottomOf="@id/top_image_container" /&gt;
  
          &lt;Constraint
              android:id="@id/recyclerview_front"
              android:layout_width="0dp"
              android:layout_height="0dp"
              android:alpha="0"
              motion:layout_constraintBottom_toBottomOf="@id/top_image_container"
              motion:layout_constraintEnd_toEndOf="@id/top_image_container"
              motion:layout_constraintStart_toStartOf="@id/top_image_container"
              motion:layout_constraintTop_toBottomOf="@id/top_image_container" /&gt;
  
          &lt;Constraint android:id="@+id/image_play"&gt;
              &lt;PropertySet motion:alpha="1" /&gt;
          &lt;/Constraint&gt;
  
          &lt;Constraint android:id="@id/image_clear"&gt;
              &lt;PropertySet motion:alpha="1" /&gt;
          &lt;/Constraint&gt;
  
  
          &lt;Constraint
              android:id="@id/bottom_nav"
              android:layout_width="0dp"
              android:layout_height="wrap_content"
              android:background="?android:attr/windowBackground"
              motion:layout_constraintBottom_toBottomOf="parent"
              motion:layout_constraintLeft_toLeftOf="parent"
              motion:layout_constraintRight_toRightOf="parent" /&gt;
      &lt;/ConstraintSet&gt;
  
      &lt;KeyFrameSet&gt;
  
          &lt;KeyPosition
              motion:curveFit="linear"
              motion:framePosition="90"
              motion:motionTarget="@id/top_image"
              motion:percentWidth="0"
              motion:percentX="0" /&gt;
  
          &lt;KeyPosition
              motion:curveFit="linear"
              motion:framePosition="90"
              motion:motionTarget="@id/top_image_container"
              motion:percentWidth="0" /&gt;
  
          &lt;KeyPosition
              motion:curveFit="linear"
              motion:framePosition="90"
              motion:motionTarget="@id/recyclerview_container"
              motion:percentWidth="0" /&gt;
  
          &lt;KeyAttribute
              android:alpha="0"
              motion:framePosition="75"
              motion:motionTarget="@id/recyclerview_front" /&gt;
  
          &lt;KeyAttribute
              android:alpha="0.10"
              motion:framePosition="90"
              motion:motionTarget="@id/image_clear" /&gt;
  
          &lt;KeyAttribute
              android:alpha="0.10"
              motion:framePosition="90"
              motion:motionTarget="@id/image_play" /&gt;
      &lt;/KeyFrameSet&gt;
  &lt;/Transition&gt;
  </code></pre>
  
  <p></p>
  
  <p><code>motion_layout_anim</code>:</p>
  
  <pre><code>&lt;androidx.constraintlayout.motion.widget.MotionLayout 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:id="@+id/motionLayout"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="#444"
      app:layoutDescription="@xml/scene_24"
      tools:ignore="contentDescription"
      &gt;
  
      &lt;androidx.constraintlayout.widget.ConstraintLayout
          android:id="@+id/top_image_container"
          android:layout_width="match_parent"
          android:layout_height="320dp"
          android:background="?android:attr/windowBackground"
          app:layout_constrainedWidth="true"
          app:layout_constraintTop_toTopOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintEnd_toEndOf="parent" /&gt;
  
      &lt;com.google.android.youtube.player.YouTubePlayerView
          android:id="@+id/top_image"
          android:layout_width="0dp"
          android:layout_height="0dp"
          app:layout_constraintTop_toTopOf="@id/top_image_container"
          app:layout_constraintBottom_toBottomOf="@id/top_image_container"
          app:layout_constraintStart_toStartOf="@id/top_image_container"
          app:layout_constraintEnd_toEndOf="@id/top_image_container" /&gt;
  &lt;!--    &lt;ImageView
          android:id="@+id/image_play"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginEnd="16dp"
          app:srcCompat="@drawable/ic_play_arrow_gray_32dp"
          android:alpha="0"
          app:layout_constraintEnd_toStartOf="@id/image_clear"
          app:layout_constraintTop_toTopOf="@id/top_image_container"
          app:layout_constraintBottom_toBottomOf="@id/top_image_container"
          /&gt;
  
      &lt;ImageView
          android:id="@+id/image_clear"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginEnd="16dp"
          app:srcCompat="@drawable/ic_clear_gray_32dp"
          android:alpha="0"
          app:layout_constraintEnd_toEndOf="@id/top_image_container"
          app:layout_constraintBottom_toBottomOf="@id/top_image_container"
          app:layout_constraintTop_toTopOf="@id/top_image_container"
          /&gt;--&gt;
  
      &lt;FrameLayout
          android:id="@+id/recyclerview_container"
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:background="?android:attr/windowBackground"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toBottomOf="@id/top_image_container"
          /&gt;
  
      &lt;androidx.recyclerview.widget.RecyclerView
          android:id="@+id/recyclerview_front"
          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_toBottomOf="@id/top_image_container" /&gt;
  
      &lt;com.google.android.material.bottomnavigation.BottomNavigationView
          android:id="@+id/bottom_nav"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:background="?android:attr/windowBackground"
          app:layout_constraintTop_toBottomOf="parent"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintRight_toRightOf="parent"
          app:menu="@menu/bottom_nav_menu"
          /&gt;
  &lt;/androidx.constraintlayout.motion.widget.MotionLayout&gt;
  </code></pre>
  
  <p>Coming to the point now, I have <strong>three</strong> questions:</p>
  
  <ul>
  <li>if I use <a href="https://developers.google.com/youtube/android/player/" rel="nofollow noreferrer">youtube</a> player and if I place those play icon and close, my player does not work as I get this. How does Youtube work then (provided I took this example from the official documentation)? </li>
  </ul>
  
  <blockquote>
    <p>W/YouTubeAndroidPlayerAPI: YouTube video playback stopped due to unauthorized overlay on top of player. The YouTubePlayerView is obscured by android.widget.ImageView{3ae28d60 V.ED.... ........ 704,320-704,320 #7f09009f app:id/image_play}. The obscuring view is inside the player view's interior zone. The distance (px) between each edge of the obscuring view and each corresponding interior zone edge is: left: 704, top: 320, right: 64, bottom: 320. .</p>
  </blockquote>
  
  <ul>
  <li>My video stops when I minimize i.e, use the <code>OnSwipe</code> and the player becomes smaller. I tried to understand <a href="https://developers.google.com/youtube/android/player/reference/com/google/android/youtube/player/YouTubePlayer.ErrorReason" rel="nofollow noreferrer">this</a> but I just wonder how they play it in the official Youtube app.</li>
  </ul>
  
  <blockquote>
    <p>W/YouTubeAndroidPlayerAPI: YouTube video playback stopped due to the player's view being too small. The YouTubePlayerView is 384dp wide (minimum is 200dp) and 87dp high (minimum is 110dp).</p>
  </blockquote>
  
  <ul>
  <li>Last but not the least and the most important how exactly do I make the Youtube player to pause/play and use any other controls when I use <code>motion:touchRegionId="@+id/top_image_container"</code> when I use it either the player becomes unclickable/unfocussable or even after using the <code>touchRegionId</code> the player can only be swiped down from the empty place below(why though).</li>
  </ul>
  
  <p><strong>P.S:</strong> What I have tested and tried, though doesn't work.</p>
  
  <ol>
  <li><a href="https://stackoverflow.com/questions/55603808/motionlayout-motionscene-onclick-overrides-setonclicklistener">MotionLayout: MotionScene OnClick overrides setOnClickListener</a></li>
  <li><a href="https://stackoverflow.com/questions/52339024/can-we-use-onswipe-and-onclick-in-the-same-transition-for-android-motionlayout">Can we use OnSwipe and OnClick in the same &lt;Transition&gt; for Android MotionLayout?</a></li>
  </ol>