diff --git a/.idea/assetWizardSettings.xml b/.idea/assetWizardSettings.xml
index 11a95a8..c05c711 100644
--- a/.idea/assetWizardSettings.xml
+++ b/.idea/assetWizardSettings.xml
@@ -158,7 +158,7 @@
                                 <PersistentState>
                                   <option name="values">
                                     <map>
-                                      <entry key="url" value="jar:file:/Applications/Android%20Studio.app/Contents/plugins/android/lib/android.jar!/images/material_design_icons/av/ic_play_circle_outline_black_24dp.xml" />
+                                      <entry key="url" value="jar:file:/Applications/Android%20Studio%203.5%20Preview.app/Contents/plugins/android/lib/android.jar!/images/material_design_icons/av/ic_play_arrow_black_24dp.xml" />
                                     </map>
                                   </option>
                                 </PersistentState>
@@ -168,14 +168,8 @@
                         </option>
                         <option name="values">
                           <map>
-                            <entry key="assetSourceType" value="FILE" />
-                            <entry key="color" value="666666" />
-                            <entry key="height" value="18" />
-                            <entry key="opacityPercent" value="90" />
-                            <entry key="outputName" value="ic_baseline_4k_24dp" />
-                            <entry key="overrideSize" value="true" />
-                            <entry key="sourceFile" value="$USER_HOME$/Downloads/baseline-4k-24px.svg" />
-                            <entry key="width" value="18" />
+                            <entry key="outputName" value="ic_play_arrow_black_42dp" />
+                            <entry key="sourceFile" value="$USER_HOME$/Downloads/ted-2.svg" />
                           </map>
                         </option>
                       </PersistentState>
diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
index 961fd3f..1565ab4 100644
--- a/app/src/main/AndroidManifest.xml
+++ b/app/src/main/AndroidManifest.xml
@@ -40,6 +40,9 @@
         <activity
             android:name="com.hossainkhan.android.demo.ui.functionaldemo.MovieDetailsPreviewActivity"
             android:parentActivityName="com.hossainkhan.android.demo.ui.browse.LayoutBrowseActivity" />
+        <activity
+            android:name="com.hossainkhan.android.demo.ui.functionaldemo.TedTalkPlaybackActivity"
+            android:parentActivityName="com.hossainkhan.android.demo.ui.browse.LayoutBrowseActivity" />
     </application>
 
 </manifest>
\ No newline at end of file
diff --git a/app/src/main/java/com/hossainkhan/android/demo/data/LayoutDataStore.kt b/app/src/main/java/com/hossainkhan/android/demo/data/LayoutDataStore.kt
index 69505eb..9b1dfd7 100644
--- a/app/src/main/java/com/hossainkhan/android/demo/data/LayoutDataStore.kt
+++ b/app/src/main/java/com/hossainkhan/android/demo/data/LayoutDataStore.kt
@@ -176,7 +176,28 @@ class LayoutDataStore @Inject constructor(
                     layoutResourceId = R.layout.demo_movie_details,
                     thumbnailResourceId = R.drawable.spider_verse_poster,
                     title = "Demo: Movie Details",
-                    description = "A demo screen containing movie details. Rotate device to see constraints in action.")
+                    description = "A demo screen containing movie details. Rotate device to see constraints in action."),
+
+            /*
+             * This is a demo of TED Talk video playback screen.
+             *   ___________________
+             * )=|                 |     /
+             *   |    TED Talks    |====||
+             *   |                 |====||
+             *   |                 |+    \
+             *   -------------------
+             *          (--)
+             *         *    *
+             *        *      *
+             *       *        *
+             *      *          *
+             *     *            *
+             */
+            LayoutInformation(
+                    layoutResourceId = R.layout.demo_ted_talk_playback,
+                    thumbnailResourceId = R.drawable.ic_ted_talks_logo,
+                    title = "Demo: TED Talk Preview Screen",
+                    description = "A demo screen containing TED talks video playback screen with different controls.")
 
 
             /*
diff --git a/app/src/main/java/com/hossainkhan/android/demo/di/ActivityBindingModule.kt b/app/src/main/java/com/hossainkhan/android/demo/di/ActivityBindingModule.kt
index ad96348..7b364f9 100644
--- a/app/src/main/java/com/hossainkhan/android/demo/di/ActivityBindingModule.kt
+++ b/app/src/main/java/com/hossainkhan/android/demo/di/ActivityBindingModule.kt
@@ -17,6 +17,7 @@
 package com.hossainkhan.android.demo.di
 
 import com.hossainkhan.android.demo.ui.functionaldemo.MovieDetailsPreviewActivity
+import com.hossainkhan.android.demo.ui.functionaldemo.TedTalkPlaybackActivity
 import com.hossainkhan.android.demo.ui.layoutpreview.LayoutChainStyleActivity
 import com.hossainkhan.android.demo.ui.layoutpreview.LayoutDimensionMinMaxActivity
 import com.hossainkhan.android.demo.ui.layoutpreview.LayoutGuidelineBarrierActivity
@@ -27,9 +28,9 @@ import dagger.Module
 import dagger.android.ContributesAndroidInjector
 
 /**
- * We want Dagger.Android to create a Subcomponent which has a parent Component of whichever 
- * module ActivityBindingModule is on, in our case that will be [DemoApplicationComponent]. 
- * 
+ * We want Dagger.Android to create a Subcomponent which has a parent Component of whichever
+ * module ActivityBindingModule is on, in our case that will be [DemoApplicationComponent].
+ *
  * The beautiful part about this setup is that you never need to tell [DemoApplicationComponent]
  * that it is going to have all these subcomponents nor do you need to tell these subcomponents
  * that [DemoApplicationComponent] exists.
@@ -78,4 +79,8 @@ abstract class ActivityBindingModule {
     @ActivityScope
     @ContributesAndroidInjector
     abstract fun layoutMovieDetailsPreviewActivity(): MovieDetailsPreviewActivity
+
+    @ActivityScope
+    @ContributesAndroidInjector
+    abstract fun layoutTedTalkPlaybackPreviewActivity(): TedTalkPlaybackActivity
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/hossainkhan/android/demo/ui/browse/LayoutBrowseViewModel.kt b/app/src/main/java/com/hossainkhan/android/demo/ui/browse/LayoutBrowseViewModel.kt
index 1c96090..ae96860 100644
--- a/app/src/main/java/com/hossainkhan/android/demo/ui/browse/LayoutBrowseViewModel.kt
+++ b/app/src/main/java/com/hossainkhan/android/demo/ui/browse/LayoutBrowseViewModel.kt
@@ -23,6 +23,7 @@ import com.hossainkhan.android.demo.R
 import com.hossainkhan.android.demo.data.AppDataStore
 import com.hossainkhan.android.demo.data.LayoutInformation
 import com.hossainkhan.android.demo.ui.functionaldemo.MovieDetailsPreviewActivity
+import com.hossainkhan.android.demo.ui.functionaldemo.TedTalkPlaybackActivity
 import com.hossainkhan.android.demo.ui.layoutpreview.LayoutChainStyleActivity
 import com.hossainkhan.android.demo.ui.layoutpreview.LayoutDimensionMinMaxActivity
 import com.hossainkhan.android.demo.ui.layoutpreview.LayoutGuidelineBarrierActivity
@@ -73,6 +74,9 @@ class LayoutBrowseViewModel(
             R.layout.demo_movie_details -> {
                 browseNavigator.loadLayoutPreview(MovieDetailsPreviewActivity::class.java, layoutResId)
             }
+            R.layout.demo_ted_talk_playback -> {
+                browseNavigator.loadLayoutPreview(TedTalkPlaybackActivity::class.java, layoutResId)
+            }
             else -> {
                 // By default it loads the preview activity with the layout requested.
                 browseNavigator.loadLayoutPreview(layoutResId)
diff --git a/app/src/main/java/com/hossainkhan/android/demo/ui/functionaldemo/TedTalkPlaybackActivity.kt b/app/src/main/java/com/hossainkhan/android/demo/ui/functionaldemo/TedTalkPlaybackActivity.kt
new file mode 100644
index 0000000..ca52a4b
--- /dev/null
+++ b/app/src/main/java/com/hossainkhan/android/demo/ui/functionaldemo/TedTalkPlaybackActivity.kt
@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+
+package com.hossainkhan.android.demo.ui.functionaldemo
+
+import android.os.Bundle
+import android.view.View
+import android.widget.ImageButton
+import android.widget.Toast
+import com.hossainkhan.android.demo.R
+import com.hossainkhan.android.demo.ui.layoutpreview.LayoutPreviewBaseActivity
+
+class TedTalkPlaybackActivity : LayoutPreviewBaseActivity() {
+    private val generalClickListener = View.OnClickListener { view ->
+        Toast.makeText(view.context, "You tapped on ${view}", Toast.LENGTH_SHORT).show()
+    }
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+
+        // Apply generic toast listener to touchable views so that user gets feedback when they tap it
+        applyToastListener(
+                findViewById<ImageButton>(R.id.action_prev_track),
+                findViewById<ImageButton>(R.id.action_rewind15),
+                findViewById<ImageButton>(R.id.action_play_pause),
+                findViewById<ImageButton>(R.id.action_forward15),
+                findViewById<ImageButton>(R.id.action_next_track)
+        )
+    }
+
+    private fun applyToastListener(vararg views: View) {
+        views.forEach {
+            it.setOnClickListener(generalClickListener)
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/res/drawable-xxxhdpi/thumb_roger_hanlon.png b/app/src/main/res/drawable-xxxhdpi/thumb_roger_hanlon.png
new file mode 100644
index 0000000..14d0b24
Binary files /dev/null and b/app/src/main/res/drawable-xxxhdpi/thumb_roger_hanlon.png differ
diff --git a/app/src/main/res/drawable-xxxhdpi/thumb_ted_talk.png b/app/src/main/res/drawable-xxxhdpi/thumb_ted_talk.png
new file mode 100644
index 0000000..7128efa
Binary files /dev/null and b/app/src/main/res/drawable-xxxhdpi/thumb_ted_talk.png differ
diff --git a/app/src/main/res/drawable/circle.xml b/app/src/main/res/drawable/circle.xml
new file mode 100644
index 0000000..6503aea
--- /dev/null
+++ b/app/src/main/res/drawable/circle.xml
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+  ~ 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.
+  -->
+
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="oval">
+
+    <size
+        android:width="64dp"
+        android:height="64dp" />
+
+    <solid android:color="@color/md_red_700" />
+</shape>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/ic_forward_30_black_42dp.xml b/app/src/main/res/drawable/ic_forward_30_black_42dp.xml
new file mode 100644
index 0000000..218837a
--- /dev/null
+++ b/app/src/main/res/drawable/ic_forward_30_black_42dp.xml
@@ -0,0 +1,20 @@
+<!--
+  ~ 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:height="42dp" android:viewportHeight="24.0"
+    android:viewportWidth="24.0" android:width="42dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#FF000000" android:pathData="M9.6,13.5h0.4c0.2,0 0.4,-0.1 0.5,-0.2s0.2,-0.2 0.2,-0.4v-0.2s-0.1,-0.1 -0.1,-0.2 -0.1,-0.1 -0.2,-0.1h-0.5s-0.1,0.1 -0.2,0.1 -0.1,0.1 -0.1,0.2v0.2h-1c0,-0.2 0,-0.3 0.1,-0.5s0.2,-0.3 0.3,-0.4 0.3,-0.2 0.4,-0.2 0.4,-0.1 0.5,-0.1c0.2,0 0.4,0 0.6,0.1s0.3,0.1 0.5,0.2 0.2,0.2 0.3,0.4 0.1,0.3 0.1,0.5v0.3s-0.1,0.2 -0.1,0.3 -0.1,0.2 -0.2,0.2 -0.2,0.1 -0.3,0.2c0.2,0.1 0.4,0.2 0.5,0.4s0.2,0.4 0.2,0.6c0,0.2 0,0.4 -0.1,0.5s-0.2,0.3 -0.3,0.4 -0.3,0.2 -0.5,0.2 -0.4,0.1 -0.6,0.1c-0.2,0 -0.4,0 -0.5,-0.1s-0.3,-0.1 -0.5,-0.2 -0.2,-0.2 -0.3,-0.4 -0.1,-0.4 -0.1,-0.6h0.8v0.2s0.1,0.1 0.1,0.2 0.1,0.1 0.2,0.1h0.5s0.1,-0.1 0.2,-0.1 0.1,-0.1 0.1,-0.2v-0.5s-0.1,-0.1 -0.1,-0.2 -0.1,-0.1 -0.2,-0.1h-0.6v-0.7zM15.3,14.2c0,0.3 0,0.6 -0.1,0.8l-0.3,0.6s-0.3,0.3 -0.5,0.3 -0.4,0.1 -0.6,0.1 -0.4,0 -0.6,-0.1 -0.3,-0.2 -0.5,-0.3 -0.2,-0.3 -0.3,-0.6 -0.1,-0.5 -0.1,-0.8v-0.7c0,-0.3 0,-0.6 0.1,-0.8l0.3,-0.6s0.3,-0.3 0.5,-0.3 0.4,-0.1 0.6,-0.1 0.4,0 0.6,0.1 0.3,0.2 0.5,0.3 0.2,0.3 0.3,0.6 0.1,0.5 0.1,0.8v0.7zM14.4,13.4v-0.5s-0.1,-0.2 -0.1,-0.3 -0.1,-0.1 -0.2,-0.2 -0.2,-0.1 -0.3,-0.1 -0.2,0 -0.3,0.1l-0.2,0.2s-0.1,0.2 -0.1,0.3v2s0.1,0.2 0.1,0.3 0.1,0.1 0.2,0.2 0.2,0.1 0.3,0.1 0.2,0 0.3,-0.1l0.2,-0.2s0.1,-0.2 0.1,-0.3v-1.5zM4,13c0,4.4 3.6,8 8,8s8,-3.6 8,-8h-2c0,3.3 -2.7,6 -6,6s-6,-2.7 -6,-6 2.7,-6 6,-6v4l5,-5 -5,-5v4c-4.4,0 -8,3.6 -8,8z"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_play_arrow_black_42dp.xml b/app/src/main/res/drawable/ic_play_arrow_black_42dp.xml
new file mode 100644
index 0000000..c927ebe
--- /dev/null
+++ b/app/src/main/res/drawable/ic_play_arrow_black_42dp.xml
@@ -0,0 +1,20 @@
+<!--
+  ~ 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:height="42dp" android:viewportHeight="24.0"
+    android:viewportWidth="24.0" android:width="42dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#FF000000" android:pathData="M8,5v14l11,-7z"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_replay_30_black_42dp.xml b/app/src/main/res/drawable/ic_replay_30_black_42dp.xml
new file mode 100644
index 0000000..9cf95d9
--- /dev/null
+++ b/app/src/main/res/drawable/ic_replay_30_black_42dp.xml
@@ -0,0 +1,20 @@
+<!--
+  ~ 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:height="42dp" android:viewportHeight="24.0"
+    android:viewportWidth="24.0" android:width="42dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#FF000000" android:pathData="M12,5L12,1L7,6l5,5L12,7c3.3,0 6,2.7 6,6s-2.7,6 -6,6 -6,-2.7 -6,-6L4,13c0,4.4 3.6,8 8,8s8,-3.6 8,-8 -3.6,-8 -8,-8zM9.6,13.5h0.4c0.2,0 0.4,-0.1 0.5,-0.2s0.2,-0.2 0.2,-0.4v-0.2s-0.1,-0.1 -0.1,-0.2 -0.1,-0.1 -0.2,-0.1h-0.5s-0.1,0.1 -0.2,0.1 -0.1,0.1 -0.1,0.2v0.2h-1c0,-0.2 0,-0.3 0.1,-0.5s0.2,-0.3 0.3,-0.4 0.3,-0.2 0.4,-0.2 0.4,-0.1 0.5,-0.1c0.2,0 0.4,0 0.6,0.1s0.3,0.1 0.5,0.2 0.2,0.2 0.3,0.4 0.1,0.3 0.1,0.5v0.3s-0.1,0.2 -0.1,0.3 -0.1,0.2 -0.2,0.2 -0.2,0.1 -0.3,0.2c0.2,0.1 0.4,0.2 0.5,0.4s0.2,0.4 0.2,0.6c0,0.2 0,0.4 -0.1,0.5s-0.2,0.3 -0.3,0.4 -0.3,0.2 -0.5,0.2 -0.4,0.1 -0.6,0.1c-0.2,0 -0.4,0 -0.5,-0.1s-0.3,-0.1 -0.5,-0.2 -0.2,-0.2 -0.3,-0.4 -0.1,-0.4 -0.1,-0.6h0.8v0.2s0.1,0.1 0.1,0.2 0.1,0.1 0.2,0.1h0.5s0.1,-0.1 0.2,-0.1 0.1,-0.1 0.1,-0.2v-0.5s-0.1,-0.1 -0.1,-0.2 -0.1,-0.1 -0.2,-0.1h-0.6v-0.7zM15.3,14.2c0,0.3 0,0.6 -0.1,0.8l-0.3,0.6s-0.3,0.3 -0.5,0.3 -0.4,0.1 -0.6,0.1 -0.4,0 -0.6,-0.1 -0.3,-0.2 -0.5,-0.3 -0.2,-0.3 -0.3,-0.6 -0.1,-0.5 -0.1,-0.8v-0.7c0,-0.3 0,-0.6 0.1,-0.8l0.3,-0.6s0.3,-0.3 0.5,-0.3 0.4,-0.1 0.6,-0.1 0.4,0 0.6,0.1 0.3,0.2 0.5,0.3 0.2,0.3 0.3,0.6 0.1,0.5 0.1,0.8v0.7zM14.5,13.4v-0.5c0,-0.1 -0.1,-0.2 -0.1,-0.3s-0.1,-0.1 -0.2,-0.2 -0.2,-0.1 -0.3,-0.1 -0.2,0 -0.3,0.1l-0.2,0.2s-0.1,0.2 -0.1,0.3v2s0.1,0.2 0.1,0.3 0.1,0.1 0.2,0.2 0.2,0.1 0.3,0.1 0.2,0 0.3,-0.1l0.2,-0.2s0.1,-0.2 0.1,-0.3v-1.5z"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_skip_next_black_42dp.xml b/app/src/main/res/drawable/ic_skip_next_black_42dp.xml
new file mode 100644
index 0000000..8e848bb
--- /dev/null
+++ b/app/src/main/res/drawable/ic_skip_next_black_42dp.xml
@@ -0,0 +1,25 @@
+<!--
+  ~ 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 xmlns:android="http://schemas.android.com/apk/res/android"
+        android:width="42dp"
+        android:height="42dp"
+        android:viewportWidth="24.0"
+        android:viewportHeight="24.0">
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M6,18l8.5,-6L6,6v12zM16,6v12h2V6h-2z"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_skip_previous_black_42dp.xml b/app/src/main/res/drawable/ic_skip_previous_black_42dp.xml
new file mode 100644
index 0000000..ecae220
--- /dev/null
+++ b/app/src/main/res/drawable/ic_skip_previous_black_42dp.xml
@@ -0,0 +1,25 @@
+<!--
+  ~ 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 xmlns:android="http://schemas.android.com/apk/res/android"
+        android:width="42dp"
+        android:height="42dp"
+        android:viewportWidth="24.0"
+        android:viewportHeight="24.0">
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M6,6h2v12L6,18zM9.5,12l8.5,6L18,6z"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_ted_talks_logo.xml b/app/src/main/res/drawable/ic_ted_talks_logo.xml
new file mode 100644
index 0000000..9934c9d
--- /dev/null
+++ b/app/src/main/res/drawable/ic_ted_talks_logo.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="44.544dp"
+    android:viewportHeight="26.572" android:viewportWidth="71.607"
+    android:width="120dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#ed1c24" android:pathData="M0,7.08h6.893v19.41h8.64L15.533,7.08h6.91v-7.08L0,0v7.08zM23.359,26.572h22.464v-7.066L31.938,19.506v-2.686l13.885,0.011L45.823,9.795L31.938,9.795L31.938,7.096l13.885,-0.009v-7.086L23.359,0.001v26.571zM59.903,0L46.685,0v26.489L58.34,26.489c9.051,0 13.267,-5.173 13.267,-13.311 -0.001,-6.687 -3.053,-13.178 -11.704,-13.178zM57.903,19.732h-3.359L54.544,6.7h2.778c5.779,0 6.289,4.696 6.289,6.368 0,2.489 -0.728,6.664 -5.708,6.664z"/>
+</vector>
diff --git a/app/src/main/res/layout/demo_ted_talk_playback.xml b/app/src/main/res/layout/demo_ted_talk_playback.xml
new file mode 100644
index 0000000..0badc45
--- /dev/null
+++ b/app/src/main/res/layout/demo_ted_talk_playback.xml
@@ -0,0 +1,339 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+  ~ 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.
+  -->
+
+
+<!--
+    About this layout:
+    ====================
+    This layout is somewhat close view of TED app's video playback screen in portrait mode.
+    This layout uses following ConstraintLayout features:
+    * Horizontal chains - Playback controls row, time control
+    * Vertical chains - Author info block
+    * Aspect ratio - video image view
+-->
+<androidx.core.widget.NestedScrollView 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:fillViewport="true">
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent">
+
+
+        <!-- Vertical guideline to separate the labels and text fields
+        from left and right edge of the screen. -->
+        <androidx.constraintlayout.widget.Guideline
+            android:id="@+id/guideline_vertical_left"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:orientation="vertical"
+            app:layout_constraintGuide_percent="0.05" />
+
+        <androidx.constraintlayout.widget.Guideline
+            android:id="@+id/guideline_vertical_right"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:orientation="vertical"
+            app:layout_constraintGuide_percent="0.95" />
+
+        <!-- ================ End of vertical guideline ================== -->
+
+
+        <!--
+            A black view that covers the full width to match the thumbnail extra space
+            This is required because the thumbnail is constraint by aspect ratio, so
+            when in landscape mode, the thumbnail does not stretch and maintains aspect ratio.
+        -->
+        <View
+            android:layout_width="0dp"
+            android:layout_height="@dimen/ted_talk_thumbnail_height"
+            android:background="@color/md_black_1000"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <ImageView
+            android:id="@+id/video_player_thumbnail"
+            android:layout_width="0dp"
+            android:layout_height="@dimen/ted_talk_thumbnail_height"
+            android:src="@drawable/thumb_ted_talk"
+            app:layout_constraintDimensionRatio="W,16:9"
+            app:layout_constraintEnd_toEndOf="@id/guideline_vertical_right"
+            app:layout_constraintStart_toStartOf="@id/guideline_vertical_left"
+            app:layout_constraintTop_toTopOf="parent"
+            tools:background="#888" />
+
+        <!-- ========= End of Thumbnail Related Views ============ -->
+
+
+        <!--
+             Begin Video Content Title and Subtitle
+             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+        -->
+        <TextView
+            android:id="@+id/author"
+            style="@style/TextAppearance.AppCompat.Small"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="24dp"
+            android:gravity="center_horizontal"
+            android:text="Roger Hanlon"
+            app:layout_constraintEnd_toEndOf="@id/guideline_vertical_right"
+            app:layout_constraintStart_toStartOf="@id/guideline_vertical_left"
+            app:layout_constraintTop_toBottomOf="@+id/video_player_thumbnail" />
+
+        <TextView
+            android:id="@+id/talk_title"
+            style="@style/TextAppearance.AppCompat.Title"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="8dp"
+            android:gravity="center_horizontal"
+            android:text="The amazing brains and morphing skin of octopuses and other cephalopods"
+            app:layout_constraintEnd_toEndOf="@id/guideline_vertical_right"
+            app:layout_constraintStart_toStartOf="@id/guideline_vertical_left"
+            app:layout_constraintTop_toBottomOf="@+id/author" />
+
+        <!-- ========= End of Title and Subtitle Related Views ============ -->
+
+
+        <!--
+             Begin Playback Control Views
+             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+             All the controls (Skip Next, Prev, Play, etc) are chained together horizontally
+             Chain style is "packed" so they always stick together even in landscape orientation.
+        -->
+
+        <ImageButton
+
+            android:id="@+id/action_prev_track"
+            style="@style/Widget.AppCompat.Button.Borderless"
+            android:layout_width="64dp"
+            android:layout_height="wrap_content"
+            android:src="@drawable/ic_skip_previous_black_42dp"
+            android:tint="@color/md_grey_500"
+            app:layout_constraintBottom_toBottomOf="@+id/action_rewind15"
+            app:layout_constraintEnd_toStartOf="@+id/action_rewind15"
+            app:layout_constraintHorizontal_bias="0.5"
+            app:layout_constraintHorizontal_chainStyle="packed"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="@+id/action_rewind15" />
+
+        <ImageButton
+
+            android:id="@+id/action_rewind15"
+            style="@style/Widget.AppCompat.Button.Borderless"
+            android:layout_width="64dp"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="8dp"
+            android:src="@drawable/ic_replay_30_black_42dp"
+            android:tint="@color/md_grey_500"
+            app:layout_constraintBottom_toBottomOf="@+id/action_play_pause"
+            app:layout_constraintEnd_toStartOf="@+id/action_play_pause"
+            app:layout_constraintHorizontal_bias="0.5"
+            app:layout_constraintStart_toEndOf="@+id/action_prev_track"
+            app:layout_constraintTop_toTopOf="@+id/action_play_pause" />
+
+
+        <ImageButton
+            android:id="@+id/action_play_pause"
+            style="@style/Widget.AppCompat.Button.Borderless"
+            android:layout_width="78dp"
+            android:layout_height="78dp"
+            android:layout_marginStart="8dp"
+            android:layout_marginTop="24dp"
+            android:layout_marginEnd="8dp"
+            android:background="@drawable/circle"
+            android:foreground="?attr/selectableItemBackground"
+            android:src="@drawable/ic_play_arrow_black_42dp"
+            android:tint="@color/md_white_1000"
+            app:layout_constraintEnd_toStartOf="@+id/action_forward15"
+            app:layout_constraintHorizontal_bias="0.5"
+            app:layout_constraintStart_toEndOf="@+id/action_rewind15"
+            app:layout_constraintTop_toBottomOf="@+id/talk_title" />
+
+        <ImageButton
+
+            android:id="@+id/action_forward15"
+            style="@style/Widget.AppCompat.Button.Borderless"
+            android:layout_width="64dp"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="8dp"
+            android:src="@drawable/ic_forward_30_black_42dp"
+            app:layout_constraintBottom_toBottomOf="@+id/action_play_pause"
+            app:layout_constraintEnd_toStartOf="@+id/action_next_track"
+            app:layout_constraintHorizontal_bias="0.5"
+            app:layout_constraintStart_toEndOf="@+id/action_play_pause"
+            app:layout_constraintTop_toTopOf="@+id/action_play_pause" />
+
+        <ImageButton
+
+            android:id="@+id/action_next_track"
+            style="@style/Widget.AppCompat.Button.Borderless"
+            android:layout_width="64dp"
+            android:layout_height="wrap_content"
+            android:src="@drawable/ic_skip_next_black_42dp"
+            app:layout_constraintBottom_toBottomOf="@+id/action_forward15"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0.5"
+            app:layout_constraintStart_toEndOf="@+id/action_forward15"
+            app:layout_constraintTop_toTopOf="@+id/action_forward15" />
+
+        <!-- ========= End of Playback Control Related Views ============ -->
+
+
+        <!--
+             Begin Playback Time Seekbar and Time Preview
+             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+             Seekbar and time labels are also chained together horizontally
+             The seekbar takes the maximum available space.
+        -->
+
+        <SeekBar
+            android:id="@+id/progressBar"
+            style="?android:attr/progressBarStyleHorizontal"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="32dp"
+            android:progress="35"
+            app:layout_constraintEnd_toStartOf="@+id/time_total"
+            app:layout_constraintHorizontal_bias="0.5"
+            app:layout_constraintStart_toEndOf="@+id/time_elapsed"
+            app:layout_constraintTop_toBottomOf="@+id/action_play_pause" />
+
+        <TextView
+            android:id="@+id/time_elapsed"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="02:56"
+            app:layout_constraintBottom_toBottomOf="@+id/progressBar"
+            app:layout_constraintEnd_toStartOf="@+id/progressBar"
+            app:layout_constraintHorizontal_bias="0.5"
+            app:layout_constraintStart_toStartOf="@id/guideline_vertical_left"
+            app:layout_constraintTop_toTopOf="@+id/progressBar" />
+
+        <TextView
+            android:id="@+id/time_total"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="11:38"
+            app:layout_constraintBottom_toBottomOf="@+id/progressBar"
+            app:layout_constraintEnd_toEndOf="@id/guideline_vertical_right"
+            app:layout_constraintHorizontal_bias="0.5"
+            app:layout_constraintStart_toEndOf="@+id/progressBar"
+            app:layout_constraintTop_toTopOf="@+id/progressBar" />
+
+        <!-- ========= End of Playback Seekbar Related Views ============ -->
+
+
+        <!--
+             Begin About Author Section
+             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+             Most of the views are stacked one after another vertically.
+             The author name and position is chaned vertically and centered with the thumbnail image.
+        -->
+
+        <TextView
+            android:id="@+id/author_section_title"
+            style="@style/TextAppearance.AppCompat.Large"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="16dp"
+            android:text="About the speaker"
+            app:layout_constraintLeft_toLeftOf="@id/guideline_vertical_left"
+            app:layout_constraintTop_toBottomOf="@id/content_divider_top" />
+
+
+        <ImageView
+            android:id="@+id/author_thumbnail"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="8dp"
+            android:background="@drawable/thumb_roger_hanlon"
+            app:layout_constraintLeft_toRightOf="@id/guideline_vertical_left"
+            app:layout_constraintTop_toBottomOf="@id/author_section_title" />
+
+
+        <TextView
+            android:id="@+id/author_name"
+            style="@style/TextAppearance.AppCompat.Body1"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="16dp"
+            android:text="Roger Hanlon"
+            android:textStyle="bold"
+            app:layout_constraintBottom_toTopOf="@+id/author_title"
+            app:layout_constraintLeft_toRightOf="@id/author_thumbnail"
+            app:layout_constraintTop_toTopOf="@+id/author_thumbnail"
+            app:layout_constraintVertical_chainStyle="packed" />
+
+        <TextView
+            android:id="@+id/author_title"
+            style="@style/TextAppearance.AppCompat.Small"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="Marine biologist"
+            app:layout_constraintBottom_toBottomOf="@+id/author_thumbnail"
+            app:layout_constraintStart_toStartOf="@id/author_name"
+            app:layout_constraintTop_toBottomOf="@id/author_name" />
+
+        <TextView
+            android:id="@+id/author_description"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="8dp"
+            android:hyphenationFrequency="full"
+            android:text="As a Senior Scientist at the Marine Biological Laboratory in Woods Hole, Massachusetts, Roger Hanlon delves into the undersea world of chameleon-like, color-changing marine animals — and the practical applications that will emerge when we crack their secrets."
+            app:layout_constraintLeft_toRightOf="@id/guideline_vertical_left"
+            app:layout_constraintRight_toLeftOf="@id/guideline_vertical_right"
+            app:layout_constraintTop_toBottomOf="@id/author_thumbnail" />
+
+
+        <!-- Horizontal line at top and bottom of author info views -->
+        <View
+            android:id="@+id/content_divider_top"
+            android:layout_width="0dp"
+            android:layout_height="1dp"
+            android:layout_marginTop="32dp"
+            android:background="@color/md_grey_300"
+            app:layout_constraintLeft_toLeftOf="@id/guideline_vertical_left"
+            app:layout_constraintRight_toRightOf="@id/guideline_vertical_right"
+            app:layout_constraintTop_toBottomOf="@id/progressBar" />
+
+        <View
+            android:id="@+id/content_divider_bottom"
+            android:layout_width="0dp"
+            android:layout_height="1dp"
+            android:layout_marginTop="16dp"
+            android:background="@color/md_grey_300"
+            app:layout_constraintLeft_toLeftOf="@id/guideline_vertical_left"
+            app:layout_constraintRight_toRightOf="@id/guideline_vertical_right"
+            app:layout_constraintTop_toBottomOf="@id/author_description" />
+
+        <Space
+            android:layout_width="0dp"
+            android:layout_height="20dp"
+            app:layout_constraintLeft_toLeftOf="parent"
+            app:layout_constraintRight_toRightOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/content_divider_bottom" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</androidx.core.widget.NestedScrollView>
\ No newline at end of file
diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml
index ce306d7..0b87ef8 100644
--- a/app/src/main/res/values/dimens.xml
+++ b/app/src/main/res/values/dimens.xml
@@ -28,6 +28,7 @@
     <dimen name="box_size_small">40dp</dimen>
     <dimen name="box_size_medium">80dp</dimen>
     <dimen name="box_size_large">120dp</dimen>
+    <dimen name="ted_talk_thumbnail_height">220dp</dimen>
 
     <item name="grid_column_count" type="integer">1</item>
 </resources>
\ No newline at end of file