Skip to content

Commit de6b2e0

Browse files
BnyroBnyro
committed
feat: redesign audio player to material 3 expressive
1 parent 818e9ef commit de6b2e0

2 files changed

Lines changed: 102 additions & 137 deletions

File tree

‎app/src/main/java/com/github/libretube/ui/fragments/AudioPlayerFragment.kt‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -146,13 +146,10 @@ class AudioPlayerFragment : Fragment(R.layout.fragment_audio_player), AudioPlaye
146146
playerController?.navigateVideo(PlayingQueue.getNext() ?: return@setOnClickListener)
147147
}
148148

149-
listOf(binding.forwardTV, binding.rewindTV).forEach {
150-
it.text = (PlayerHelper.seekIncrement / 1000).toString()
151-
}
152-
binding.rewindFL.setOnClickListener {
149+
binding.rewindBTN.setOnClickListener {
153150
playerController?.seekBy(-PlayerHelper.seekIncrement)
154151
}
155-
binding.forwardFL.setOnClickListener {
152+
binding.forwardBTN.setOnClickListener {
156153
playerController?.seekBy(PlayerHelper.seekIncrement)
157154
}
158155

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

Lines changed: 100 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -56,14 +56,6 @@
5656
app:track="@drawable/player_switch_track"
5757
app:trackTint="?colorControlNormal" />
5858

59-
<ImageView
60-
android:id="@+id/open_video"
61-
android:layout_width="wrap_content"
62-
android:layout_height="wrap_content"
63-
android:layout_gravity="center"
64-
android:layout_marginHorizontal="6dp"
65-
android:src="@drawable/ic_video" />
66-
6759
</LinearLayout>
6860

6961
<FrameLayout
@@ -149,17 +141,43 @@
149141

150142
</LinearLayout>
151143

152-
<com.google.android.material.slider.Slider
153-
android:id="@+id/time_bar"
144+
<LinearLayout
154145
android:layout_width="match_parent"
155146
android:layout_height="wrap_content"
156-
android:layout_marginHorizontal="20dp"
157-
app:labelBehavior="gone" />
147+
android:layout_gravity="center_vertical"
148+
android:orientation="horizontal">
149+
150+
<com.google.android.material.button.MaterialButton
151+
android:id="@+id/prev"
152+
style="?attr/materialIconButtonOutlinedStyle"
153+
android:layout_width="wrap_content"
154+
android:layout_height="wrap_content"
155+
android:gravity="center"
156+
app:iconGravity="textStart"
157+
app:icon="@drawable/ic_prev" />
158+
159+
<com.google.android.material.slider.Slider
160+
android:id="@+id/time_bar"
161+
android:layout_width="0dp"
162+
android:layout_weight="1"
163+
android:layout_height="wrap_content"
164+
app:labelBehavior="gone" />
165+
166+
<com.google.android.material.button.MaterialButton
167+
android:id="@+id/next"
168+
style="?attr/materialIconButtonOutlinedStyle"
169+
android:layout_width="wrap_content"
170+
android:layout_height="wrap_content"
171+
android:gravity="center"
172+
app:iconGravity="textStart"
173+
app:icon="@drawable/ic_next" />
174+
175+
</LinearLayout>
158176

159177
<FrameLayout
160178
android:layout_width="match_parent"
161179
android:layout_height="wrap_content"
162-
android:paddingHorizontal="20dp">
180+
android:paddingHorizontal="40dp">
163181

164182
<TextView
165183
android:id="@+id/current_position"
@@ -177,162 +195,112 @@
177195

178196
</FrameLayout>
179197

180-
<LinearLayout
181-
android:layout_width="wrap_content"
198+
<com.google.android.material.button.MaterialButtonGroup
199+
android:id="@+id/buttonGroup"
200+
android:layout_width="match_parent"
182201
android:layout_height="wrap_content"
183-
android:layout_gravity="center"
184-
android:layout_marginTop="10dp"
185-
android:layout_marginBottom="36dp">
202+
android:spacing="0dp"
203+
android:paddingVertical="30dp"
204+
android:layout_marginHorizontal="50dp"
205+
android:gravity="center_horizontal">
186206

187-
<FrameLayout
188-
android:id="@+id/rewindFL"
189-
android:layout_width="wrap_content"
207+
<com.google.android.material.button.MaterialButton
208+
android:id="@+id/rewindBTN"
209+
style="?materialIconButtonFilledStyle"
210+
android:layout_width="0dp"
211+
android:layout_weight="2"
190212
android:layout_height="wrap_content"
191213
android:layout_gravity="center"
192-
android:background="?attr/selectableItemBackgroundBorderless">
193-
194-
<ImageView
195-
android:layout_width="36dp"
196-
android:layout_height="36dp"
197-
android:layout_gravity="center"
198-
android:src="@drawable/ic_rewind_md" />
199-
200-
<TextView
201-
android:id="@+id/rewindTV"
202-
android:layout_width="wrap_content"
203-
android:layout_height="wrap_content"
204-
android:layout_gravity="center"
205-
android:layout_marginTop="2dp"
206-
android:textSize="8sp"
207-
android:textStyle="bold"
208-
tools:ignore="SmallSp" />
209-
210-
</FrameLayout>
211-
212-
<ImageView
213-
android:id="@+id/prev"
214-
android:layout_width="48dp"
215-
android:layout_height="48dp"
216-
android:layout_gravity="center"
217-
android:layout_marginHorizontal="20dp"
218-
android:background="?attr/selectableItemBackgroundBorderless"
219-
android:src="@drawable/ic_prev" />
214+
android:gravity="center"
215+
app:iconGravity="textStart"
216+
app:iconSize="40dp"
217+
app:icon="@drawable/ic_rewind_md" />
220218

221219
<com.google.android.material.button.MaterialButton
222220
android:id="@+id/play_pause"
223-
android:layout_width="72dp"
224-
android:layout_height="72dp"
225-
android:insetLeft="0dp"
226-
android:insetTop="0dp"
227-
android:insetRight="0dp"
228-
android:insetBottom="0dp"
229-
app:icon="@drawable/ic_pause"
230-
app:iconSize="24dp"
231-
app:shapeAppearanceOverlay="@style/ShapeAppearance.Material3.Corner.Full" />
232-
233-
<ImageView
234-
android:id="@+id/next"
235-
android:layout_width="48dp"
236-
android:layout_height="48dp"
237-
android:layout_gravity="center"
238-
android:layout_marginHorizontal="20dp"
239-
android:src="@drawable/ic_next" />
221+
style="?attr/materialIconButtonFilledStyle"
222+
android:layout_width="0dp"
223+
android:layout_height="wrap_content"
224+
android:layout_weight="3"
225+
android:gravity="center"
226+
app:iconGravity="textStart"
227+
app:iconSize="55dp"
228+
app:icon="@drawable/ic_pause" />
240229

241-
<FrameLayout
242-
android:id="@+id/forwardFL"
243-
android:layout_width="wrap_content"
230+
<com.google.android.material.button.MaterialButton
231+
style="?materialIconButtonFilledStyle"
232+
android:id="@+id/forwardBTN"
233+
android:layout_width="0dp"
234+
android:layout_weight="2"
244235
android:layout_height="wrap_content"
245236
android:layout_gravity="center"
246-
android:background="?attr/selectableItemBackgroundBorderless">
247-
248-
<ImageView
249-
android:layout_width="36dp"
250-
android:layout_height="36dp"
251-
android:layout_gravity="center"
252-
android:src="@drawable/ic_forward_md" />
237+
android:gravity="center"
238+
app:iconGravity="textStart"
239+
app:iconSize="40dp"
240+
app:icon="@drawable/ic_forward_md" />
253241

254-
<TextView
255-
android:id="@+id/forwardTV"
256-
android:layout_width="wrap_content"
257-
android:layout_height="wrap_content"
258-
android:layout_gravity="center"
259-
android:layout_marginTop="2dp"
260-
android:textSize="8sp"
261-
android:textStyle="bold"
262-
tools:ignore="SmallSp" />
263-
264-
</FrameLayout>
265-
266-
</LinearLayout>
242+
</com.google.android.material.button.MaterialButtonGroup>
267243

268244
<FrameLayout
269245
android:layout_width="match_parent"
270246
android:layout_height="wrap_content"
271247
android:layout_gravity="center"
272-
android:paddingHorizontal="30dp"
273-
android:paddingVertical="15dp">
248+
android:paddingHorizontal="16dp"
249+
android:paddingVertical="16dp">
274250

275-
<LinearLayout
251+
<com.google.android.material.button.MaterialButtonGroup
252+
style="@style/Widget.Material3.MaterialButtonGroup.Connected"
276253
android:layout_width="wrap_content"
277-
android:layout_height="wrap_content"
278-
android:layout_gravity="start|center_vertical"
279-
android:orientation="horizontal">
254+
android:layout_height="50dp"
255+
android:gravity="center_horizontal"
256+
android:layout_gravity="start|center_vertical">
280257

281-
<ImageView
282-
android:id="@+id/playback_options"
258+
<com.google.android.material.button.MaterialButton
259+
style="?materialIconButtonOutlinedStyle"
260+
android:id="@+id/open_queue"
283261
android:layout_width="wrap_content"
284262
android:layout_height="wrap_content"
285-
android:layout_marginEnd="10dp"
286-
android:background="?attr/selectableItemBackgroundBorderless"
287-
android:scaleX="0.9"
288-
android:scaleY="0.9"
289-
android:src="@drawable/ic_speed" />
263+
app:icon="@drawable/ic_queue" />
290264

291-
<ImageView
292-
android:id="@+id/sleep_timer"
265+
<com.google.android.material.button.MaterialButton
266+
style="?materialIconButtonOutlinedStyle"
267+
android:id="@+id/open_chapters"
293268
android:layout_width="wrap_content"
294269
android:layout_height="wrap_content"
295-
android:background="?attr/selectableItemBackgroundBorderless"
296-
android:scaleX="0.9"
297-
android:scaleY="0.9"
298-
android:src="@drawable/ic_sleep" />
299-
300-
</LinearLayout>
270+
app:icon="@drawable/ic_frame" />
301271

302-
<LinearLayout
303-
android:layout_width="wrap_content"
304-
android:layout_height="wrap_content"
305-
android:layout_gravity="center"
306-
android:orientation="horizontal">
272+
<com.google.android.material.button.MaterialButton
273+
style="?materialIconButtonOutlinedStyle"
274+
android:id="@+id/playback_options"
275+
android:layout_width="wrap_content"
276+
android:layout_height="wrap_content"
277+
app:icon="@drawable/ic_speed" />
307278

308-
<ImageView
309-
android:id="@+id/open_chapters"
279+
<com.google.android.material.button.MaterialButton
280+
style="?materialIconButtonOutlinedStyle"
281+
android:id="@+id/sleep_timer"
310282
android:layout_width="wrap_content"
311283
android:layout_height="wrap_content"
312-
android:layout_marginEnd="10dp"
313-
android:background="?attr/selectableItemBackgroundBorderless"
314-
android:scaleX="0.9"
315-
android:scaleY="0.9"
316-
android:src="@drawable/ic_frame" />
284+
app:icon="@drawable/ic_sleep" />
317285

318-
<ImageView
319-
android:id="@+id/open_queue"
286+
<com.google.android.material.button.MaterialButton
287+
style="?materialIconButtonOutlinedStyle"
288+
android:id="@+id/open_video"
320289
android:layout_width="wrap_content"
321290
android:layout_height="wrap_content"
322-
android:background="?attr/selectableItemBackgroundBorderless"
323-
android:src="@drawable/ic_queue" />
291+
app:icon="@drawable/ic_video" />
324292

325-
</LinearLayout>
293+
</com.google.android.material.button.MaterialButtonGroup>
326294

327-
<ImageView
295+
<com.google.android.material.button.MaterialButton
328296
android:id="@+id/show_more"
297+
style="?attr/materialIconButtonFilledStyle"
329298
android:layout_width="wrap_content"
330299
android:layout_height="wrap_content"
300+
android:gravity="center"
301+
app:iconGravity="textStart"
331302
android:layout_gravity="end|center_vertical"
332-
android:background="?attr/selectableItemBackgroundBorderless"
333-
android:scaleX="0.9"
334-
android:scaleY="0.9"
335-
android:src="@drawable/ic_three_dots" />
303+
app:icon="@drawable/ic_three_dots" />
336304

337305
</FrameLayout>
338306

0 commit comments

Comments
 (0)