[ADDED] Trailer button for movie trailer and added some UI responsiveness.

Author: hossain-khan

app/src/main/java/com/hossainkhan/android/demo/ui/functionaldemo/MovieDetailsPreviewActivity.kt

@@ -23,6 +23,13 @@ import android.widget.ImageButton
 import android.widget.Toast
 import com.hossainkhan.android.demo.R
 import com.hossainkhan.android.demo.ui.layoutpreview.LayoutPreviewBaseActivity
+import android.content.Intent
+import android.content.res.ColorStateList
+import android.net.Uri
+import android.widget.ImageView
+import androidx.annotation.ColorRes
+import androidx.core.content.ContextCompat
+import androidx.core.widget.ImageViewCompat
 
 /**
  * Activity showcasing how visibility GONE affects constraints.
@@ -32,8 +39,16 @@ import com.hossainkhan.android.demo.ui.layoutpreview.LayoutPreviewBaseActivity
 class MovieDetailsPreviewActivity : LayoutPreviewBaseActivity() {
     private val generalClickListener = View.OnClickListener { view ->
         Toast.makeText(view.context, "You tapped on ${view}", Toast.LENGTH_SHORT).show()
+
+        // Some custom logic to make the UI alive!
+        when (view.id) {
+            R.id.rating_thumbs_up, R.id.rating_thumbs_down -> {
+                applyColorTint((view as ImageButton), R.color.white)
+            }
+        }
     }
 
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
 
@@ -42,14 +57,26 @@ class MovieDetailsPreviewActivity : LayoutPreviewBaseActivity() {
         val addToFav = findViewById<ImageButton>(R.id.rating_add_fav)
         val rentButton = findViewById<Button>(R.id.button_rent)
         val buyButton = findViewById<Button>(R.id.button_buy)
+        val trailer = findViewById<Button>(R.id.movie_trailer)
 
         // Apply generic toast listener to touchable views so that user gets feedback when they tap it
         applyToastListener(ratingThumbsUp, ratingThumbsDown, addToFav, rentButton, buyButton)
+
+        trailer.setOnClickListener {
+            val youtubeTrailerUrl = "https://www.youtube.com/watch?v=g4Hbz2jLxvQ"
+            startActivity(Intent(Intent.ACTION_VIEW, Uri.parse(youtubeTrailerUrl)))
+        }
     }
 
     private fun applyToastListener(vararg views: View) {
         views.forEach {
             it.setOnClickListener(generalClickListener)
         }
     }
+
+    private fun applyColorTint(view: ImageView, @ColorRes tintColor: Int) {
+        ImageViewCompat.setImageTintList(view,
+                ColorStateList.valueOf(ContextCompat.getColor(this.applicationContext, tintColor))
+        )
+    }
 }

app/src/main/res/drawable/ic_play_circle_outline_black_24dp.xml

@@ -0,0 +1,21 @@
+<!--
+  ~ Copyright (c) 2019 Hossain Khan
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<vector android:alpha="0.9" android:height="24dp" android:tint="#666666"
+    android:viewportHeight="24.0" android:viewportWidth="24.0"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#FF000000" android:pathData="M10,16.5l6,-4.5 -6,-4.5v9zM12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,20c-4.41,0 -8,-3.59 -8,-8s3.59,-8 8,-8 8,3.59 8,8 -3.59,8 -8,8z"/>
+</vector>

app/src/main/res/layout/demo_movie_details.xml

@@ -19,6 +19,9 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent">
 
+    <!--
+        NOTE: This is a complete demo of a video details view using `ConstraintLayout` and flat view hierarchy.
+    -->
     <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
@@ -42,13 +45,32 @@
 
         <!-- ================ END of guidelines =================== -->
 
+        <!-- ================  Begin top section with background, poster and meta info  ================ -->
+
+
+
         <ImageView
             android:id="@+id/thumbnail"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:scaleType="centerCrop"
             android:src="@drawable/spider_verse_background"
-            android:tint="#77999999"
+            android:tint="#99333333"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <Button
+            android:id="@+id/movie_trailer"
+            style="@style/Widget.AppCompat.Button.Borderless"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="8dp"
+            android:drawableStart="@drawable/ic_play_circle_outline_black_24dp"
+            android:drawablePadding="5dp"
+            android:drawableTint="@color/md_pink_300"
+            android:text="Trailer"
+            android:textColor="@color/md_grey_400"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
@@ -57,20 +79,17 @@
             android:id="@+id/poster"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_marginStart="8dp"
-            android:layout_marginTop="8dp"
             android:src="@drawable/spider_verse_poster"
             app:layout_constraintBottom_toBottomOf="@+id/thumbnail"
             app:layout_constraintStart_toStartOf="@+id/guideline_vertical_start"
-            app:layout_constraintTop_toTopOf="@+id/thumbnail" />
+            app:layout_constraintTop_toBottomOf="@+id/movie_trailer" />
 
         <TextView
             android:id="@+id/movie_title"
             style="@style/TextAppearance.AppCompat.Title.Inverse"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_marginStart="8dp"
-            android:layout_marginEnd="8dp"
             android:text="Spider-Man: Into The Spider-Verse"
             app:layout_constraintEnd_toEndOf="@id/guideline_vertical_end"
             app:layout_constraintStart_toEndOf="@+id/poster"

app/src/main/res/layout/list_item_layout_preview.xml

@@ -41,7 +41,7 @@
             app:layout_constraintTop_toTopOf="parent"
             tools:background="@color/md_amber_300"
             tools:ignore="ContentDescription"
-            tools:srcCompat="@drawable/ic_position_center_preview" />
+            tools:srcCompat="@drawable/thumb_positioning_center" />
 
         <TextView
             android:id="@+id/layout_preview_name"