Skip to content
This repository was archived by the owner on Aug 22, 2024. It is now read-only.

Commit 1c178b9

Browse files
hossain-khanhossain-khan
committed
[UPDATE] [#98] Re-organized views according to order.
Added some inline documentations. Fixes #98
1 parent abfaa41 commit 1c178b9

File tree

4 files changed

+132
-98
lines changed

4 files changed

+132
-98
lines changed

‎app/src/main/java/com/hossainkhan/android/demo/data/LayoutDataStore.kt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ class LayoutDataStore @Inject constructor(
196196
LayoutInformation(
197197
layoutResourceId = R.layout.demo_ted_talk_playback,
198198
thumbnailResourceId = R.drawable.ic_ted_talks_logo,
199-
title = "Demo: TED Talk Video",
199+
title = "Demo: TED Talk Preview Screen",
200200
description = "A demo screen containing TED talks video playback screen with different controls.")
201201

202202

‎app/src/main/res/drawable-xxxhdpi/thumb_roger_hanlon.png

38.3 KB
Loading

‎app/src/main/res/layout/demo_ted_talk_playback.xml

Lines changed: 130 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -32,17 +32,96 @@
3232
android:layout_width="match_parent"
3333
android:layout_height="match_parent"
3434
android:fillViewport="true">
35-
<!--
36-
FIXME =============================================================================
37-
TODO: Re-organize elements according to UI flow
38-
FIXME =============================================================================
39-
-->
4035

4136
<androidx.constraintlayout.widget.ConstraintLayout
4237
android:layout_width="match_parent"
4338
android:layout_height="match_parent">
4439

4540

41+
<!-- Vertical guideline to separate the labels and text fields
42+
from left and right edge of the screen. -->
43+
<androidx.constraintlayout.widget.Guideline
44+
android:id="@+id/guideline_vertical_left"
45+
android:layout_width="0dp"
46+
android:layout_height="0dp"
47+
android:orientation="vertical"
48+
app:layout_constraintGuide_percent="0.05" />
49+
50+
<androidx.constraintlayout.widget.Guideline
51+
android:id="@+id/guideline_vertical_right"
52+
android:layout_width="0dp"
53+
android:layout_height="0dp"
54+
android:orientation="vertical"
55+
app:layout_constraintGuide_percent="0.95" />
56+
57+
<!-- ================ End of vertical guideline ================== -->
58+
59+
60+
<!--
61+
A black view that covers the full width to match the thumbnail extra space
62+
This is required because the thumbnail is constraint by aspect ratio, so
63+
when in landscape mode, the thumbnail does not stretch and maintains aspect ratio.
64+
-->
65+
<View
66+
android:layout_width="0dp"
67+
android:layout_height="@dimen/ted_talk_thumbnail_height"
68+
android:background="@color/md_black_1000"
69+
app:layout_constraintEnd_toEndOf="parent"
70+
app:layout_constraintStart_toStartOf="parent"
71+
app:layout_constraintTop_toTopOf="parent" />
72+
73+
<ImageView
74+
android:id="@+id/video_player_thumbnail"
75+
android:layout_width="0dp"
76+
android:layout_height="@dimen/ted_talk_thumbnail_height"
77+
android:src="@drawable/thumb_ted_talk"
78+
app:layout_constraintDimensionRatio="W,16:9"
79+
app:layout_constraintEnd_toEndOf="@id/guideline_vertical_right"
80+
app:layout_constraintStart_toStartOf="@id/guideline_vertical_left"
81+
app:layout_constraintTop_toTopOf="parent"
82+
tools:background="#888" />
83+
84+
<!-- ========= End of Thumbnail Related Views ============ -->
85+
86+
87+
<!--
88+
Begin Video Content Title and Subtitle
89+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
90+
-->
91+
<TextView
92+
android:id="@+id/author"
93+
style="@style/TextAppearance.AppCompat.Small"
94+
android:layout_width="0dp"
95+
android:layout_height="wrap_content"
96+
android:layout_marginTop="24dp"
97+
android:gravity="center_horizontal"
98+
android:text="Roger Hanlon"
99+
app:layout_constraintEnd_toEndOf="@id/guideline_vertical_right"
100+
app:layout_constraintStart_toStartOf="@id/guideline_vertical_left"
101+
app:layout_constraintTop_toBottomOf="@+id/video_player_thumbnail" />
102+
103+
<TextView
104+
android:id="@+id/talk_title"
105+
style="@style/TextAppearance.AppCompat.Title"
106+
android:layout_width="0dp"
107+
android:layout_height="wrap_content"
108+
android:layout_marginTop="8dp"
109+
android:gravity="center_horizontal"
110+
android:text="The amazing brains and morphing skin of octopuses and other cephalopods"
111+
app:layout_constraintEnd_toEndOf="@id/guideline_vertical_right"
112+
app:layout_constraintStart_toStartOf="@id/guideline_vertical_left"
113+
app:layout_constraintTop_toBottomOf="@+id/author" />
114+
115+
<!-- ========= End of Title and Subtitle Related Views ============ -->
116+
117+
118+
<!--
119+
Begin Playback Control Views
120+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
121+
All the controls (Skip Next, Prev, Play, etc) are chained together horizontally
122+
Chain style is "packed" so they always stick together even in landscape orientation.
123+
-->
124+
46125
<ImageButton
47126

48127
android:id="@+id/action_prev_track"
@@ -75,7 +154,6 @@
75154

76155

77156
<ImageButton
78-
79157
android:id="@+id/action_play_pause"
80158
style="@style/Widget.AppCompat.Button.Borderless"
81159
android:layout_width="78dp"
@@ -119,27 +197,15 @@
119197
app:layout_constraintStart_toEndOf="@+id/action_forward15"
120198
app:layout_constraintTop_toTopOf="@+id/action_forward15" />
121199

122-
123-
<!-- A black view that covers the full witdth to match the thumbnail extra space -->
124-
<View
125-
android:layout_width="0dp"
126-
android:layout_height="220dp"
127-
android:background="@color/md_black_1000"
128-
app:layout_constraintEnd_toEndOf="parent"
129-
app:layout_constraintStart_toStartOf="parent"
130-
app:layout_constraintTop_toTopOf="parent" />
131-
<ImageView
132-
android:id="@+id/video_player_thumbnail"
133-
android:layout_width="0dp"
134-
android:layout_height="220dp"
135-
android:src="@drawable/thumb_ted_talk"
136-
app:layout_constraintDimensionRatio="W,16:9"
137-
app:layout_constraintEnd_toEndOf="@id/guideline_vertical_right"
138-
app:layout_constraintStart_toStartOf="@id/guideline_vertical_left"
139-
app:layout_constraintTop_toTopOf="parent"
140-
tools:background="#888" />
200+
<!-- ========= End of Playback Control Related Views ============ -->
141201

142202

203+
<!--
204+
Begin Playback Time Seekbar and Time Preview
205+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
206+
Seekbar and time labels are also chained together horizontally
207+
The seekbar takes the maximum available space.
208+
-->
143209

144210
<SeekBar
145211
android:id="@+id/progressBar"
@@ -153,32 +219,6 @@
153219
app:layout_constraintStart_toEndOf="@+id/time_elapsed"
154220
app:layout_constraintTop_toBottomOf="@+id/action_play_pause" />
155221

156-
157-
<TextView
158-
android:id="@+id/talk_title"
159-
style="@style/TextAppearance.AppCompat.Title"
160-
android:layout_width="0dp"
161-
android:layout_height="wrap_content"
162-
android:layout_marginTop="8dp"
163-
android:gravity="center_horizontal"
164-
android:text="The amazing brains and morphing skin of octopuses and other cephalopods"
165-
app:layout_constraintEnd_toEndOf="@id/guideline_vertical_right"
166-
app:layout_constraintStart_toStartOf="@id/guideline_vertical_left"
167-
app:layout_constraintTop_toBottomOf="@+id/author" />
168-
169-
170-
<TextView
171-
android:id="@+id/author"
172-
style="@style/TextAppearance.AppCompat.Small"
173-
android:layout_width="0dp"
174-
android:layout_height="wrap_content"
175-
android:layout_marginTop="24dp"
176-
android:gravity="center_horizontal"
177-
android:text="Roger Hanlon"
178-
app:layout_constraintEnd_toEndOf="@id/guideline_vertical_right"
179-
app:layout_constraintStart_toStartOf="@id/guideline_vertical_left"
180-
app:layout_constraintTop_toBottomOf="@+id/video_player_thumbnail" />
181-
182222
<TextView
183223
android:id="@+id/time_elapsed"
184224
android:layout_width="wrap_content"
@@ -201,30 +241,44 @@
201241
app:layout_constraintStart_toEndOf="@+id/progressBar"
202242
app:layout_constraintTop_toTopOf="@+id/progressBar" />
203243

244+
<!-- ========= End of Playback Seekbar Related Views ============ -->
245+
246+
247+
<!--
248+
Begin About Author Section
249+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
250+
Most of the views are stacked one after another vertically.
251+
The author name and position is chaned vertically and centered with the thumbnail image.
252+
-->
253+
254+
<TextView
255+
android:id="@+id/author_section_title"
256+
style="@style/TextAppearance.AppCompat.Large"
257+
android:layout_width="wrap_content"
258+
android:layout_height="wrap_content"
259+
android:layout_marginTop="16dp"
260+
android:text="About the speaker"
261+
app:layout_constraintLeft_toLeftOf="@id/guideline_vertical_left"
262+
app:layout_constraintTop_toBottomOf="@id/content_divider_top" />
263+
264+
204265
<ImageView
205266
android:id="@+id/author_thumbnail"
206-
android:layout_width="48dp"
207-
android:layout_height="48dp"
267+
android:layout_width="wrap_content"
268+
android:layout_height="wrap_content"
208269
android:layout_marginTop="8dp"
209-
android:background="@drawable/circle"
270+
android:background="@drawable/thumb_roger_hanlon"
210271
app:layout_constraintLeft_toRightOf="@id/guideline_vertical_left"
211272
app:layout_constraintTop_toBottomOf="@id/author_section_title" />
212273

213274

214-
<Space
215-
android:layout_width="0dp"
216-
android:layout_height="20dp"
217-
app:layout_constraintLeft_toLeftOf="parent"
218-
app:layout_constraintRight_toRightOf="parent"
219-
app:layout_constraintTop_toBottomOf="@id/content_divider_bottom" />
220-
221275
<TextView
222276
android:id="@+id/author_name"
223277
style="@style/TextAppearance.AppCompat.Body1"
224278
android:layout_width="wrap_content"
225279
android:layout_height="wrap_content"
226280
android:layout_marginStart="16dp"
227-
android:text="Neha Madhira and Haley Stack"
281+
android:text="Roger Hanlon"
228282
android:textStyle="bold"
229283
app:layout_constraintBottom_toTopOf="@+id/author_title"
230284
app:layout_constraintLeft_toRightOf="@id/author_thumbnail"
@@ -249,58 +303,37 @@
249303
android:hyphenationFrequency="full"
250304
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."
251305
app:layout_constraintLeft_toRightOf="@id/guideline_vertical_left"
252-
253306
app:layout_constraintRight_toLeftOf="@id/guideline_vertical_right"
254307
app:layout_constraintTop_toBottomOf="@id/author_thumbnail" />
255308

256-
<TextView
257-
android:id="@+id/author_section_title"
258-
style="@style/TextAppearance.AppCompat.Large"
259-
android:layout_width="wrap_content"
260-
android:layout_height="wrap_content"
261-
android:layout_marginTop="16dp"
262-
android:text="About the speaker"
263-
app:layout_constraintLeft_toLeftOf="@id/guideline_vertical_left"
264-
app:layout_constraintTop_toBottomOf="@id/content_divider_top" />
265309

310+
<!-- Horizontal line at top and bottom of author info views -->
266311
<View
267-
android:id="@+id/content_divider_bottom"
312+
android:id="@+id/content_divider_top"
268313
android:layout_width="0dp"
269314
android:layout_height="1dp"
270-
android:layout_marginTop="16dp"
271-
android:background="@color/md_grey_400"
315+
android:layout_marginTop="32dp"
316+
android:background="@color/md_grey_300"
272317
app:layout_constraintLeft_toLeftOf="@id/guideline_vertical_left"
273318
app:layout_constraintRight_toRightOf="@id/guideline_vertical_right"
274-
app:layout_constraintTop_toBottomOf="@id/author_description" />
275-
319+
app:layout_constraintTop_toBottomOf="@id/progressBar" />
276320

277321
<View
278-
android:id="@+id/content_divider_top"
322+
android:id="@+id/content_divider_bottom"
279323
android:layout_width="0dp"
280324
android:layout_height="1dp"
281-
android:layout_marginTop="32dp"
282-
android:background="@color/md_grey_400"
325+
android:layout_marginTop="16dp"
326+
android:background="@color/md_grey_300"
283327
app:layout_constraintLeft_toLeftOf="@id/guideline_vertical_left"
284328
app:layout_constraintRight_toRightOf="@id/guideline_vertical_right"
285-
app:layout_constraintTop_toBottomOf="@id/progressBar" />
286-
287-
<!-- Vertical guideline to separate the labels and text fields. -->
288-
<androidx.constraintlayout.widget.Guideline
289-
android:id="@+id/guideline_vertical_left"
290-
android:layout_width="0dp"
291-
android:layout_height="0dp"
292-
android:orientation="vertical"
293-
app:layout_constraintGuide_percent="0.05" />
329+
app:layout_constraintTop_toBottomOf="@id/author_description" />
294330

295-
<androidx.constraintlayout.widget.Guideline
296-
android:id="@+id/guideline_vertical_right"
331+
<Space
297332
android:layout_width="0dp"
298-
android:layout_height="0dp"
299-
android:orientation="vertical"
300-
app:layout_constraintGuide_percent="0.95" />
301-
302-
<!-- ================================= End of vertical guideline ================================= -->
303-
333+
android:layout_height="20dp"
334+
app:layout_constraintLeft_toLeftOf="parent"
335+
app:layout_constraintRight_toRightOf="parent"
336+
app:layout_constraintTop_toBottomOf="@id/content_divider_bottom" />
304337

305338
</androidx.constraintlayout.widget.ConstraintLayout>
306339
</androidx.core.widget.NestedScrollView>

‎app/src/main/res/values/dimens.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
<dimen name="box_size_small">40dp</dimen>
2929
<dimen name="box_size_medium">80dp</dimen>
3030
<dimen name="box_size_large">120dp</dimen>
31+
<dimen name="ted_talk_thumbnail_height">220dp</dimen>
3132

3233
<item name="grid_column_count" type="integer">1</item>
3334
</resources>

0 commit comments

Comments
 (0)