feat: update ui components to material 3 expressive #7444

Bnyro · 2025-05-22T14:46:14Z

ref https://m3.material.io/blog/building-with-m3-expressive

The audio player so far:

For other changes fragments, please see the commit history of this PR.

Slightly related to the changes here: #7406

TODO

I'm not really happy with the library fragment yet.I wanted to use custom Material Design 3 shapes, but idk how to apply them to buttons. Suggestions welcome.

FineFindus

In terms of design, I think we should move the forward/backward buttons to the position of the next/prev buttons and move the latter somewhere else (perhaps next to the timeline?). This would:

give the entire row more breathing space so it doesn't look so cramped
avoid the current issue where the next/prev buttons look far more important
bring the design closer to that showcased

Bnyro · 2025-05-23T10:11:42Z

In terms of design, I think we should move the forward/backward buttons to the position of the next/prev buttons and move the latter somewhere else (perhaps next to the timeline?). This would:

Yeah, I agree. I'm just not too sure how to implement this because we have to set the time that we seek by dynamically (there's a preference to change it between 5s, 10s, 30s, ...). Currently we're using a FrameLayout for this, and we can't nest other layouts inside a button afaik. So we probably need to subclass button? 🤔

Bnyro · 2025-05-23T18:17:07Z

Okay, I decided to just drop the text, it's not that useful and good-looking anyways.

Figim · 2025-05-25T14:58:13Z

The "playback speed", "Video mode", "Queue" , "sections" and "Sleep timer" buttons in the audio player do not respond when clicked
The audio player view in the app is broken when switching from pip mode to "audio player"

XRecorder_20250525_01.mp4

Bnyro · 2025-05-25T15:14:52Z

Can't reproduce 1 and 3.

Figim · 2025-05-25T15:31:19Z

Can't reproduce 1 and 3.

Have you checked the latest CI version? / 3 hours ago

The button is hidden when you click the "3-dot menu" on a channel you're not subscribed to

XRecorder_20250525_04.mp4

The device navigation buttons were not showing up well in the app. Can this be updated?

It seems that "material you" update was a bit problematic.

My device
Manufacturer: samsung
Board: a32
Arch: arm64-v8a
Android SDK: 33
OS: Android 13
Display: 1080x2194
Font scale: 1.1

Bnyro · 2025-05-25T17:48:48Z

Autoplay does not work in the audio player

This PR only includes user interface issues, anything like "autoplay not working" is not related to these changes here and should be discussed in a different issue.

Figim · 2025-05-25T18:17:42Z

Autoplay does not work in the audio player

This PR only includes user interface issues, anything like "autoplay not working" is not related to these changes here and should be discussed in a different issue.

I found the reason for this, I will open a new issue. ( for 2 issue). There is a problem in the debug version. It would be great if 4 bugs were fixed.

akashsriramganapathy · 2025-05-26T15:30:08Z

how to become tester? where can i get this build

Bnyro · 2025-05-26T15:41:26Z

how to become tester? where can i get this build

While logged in go to the checks tab -> CI under this PR, e.g.
https://github.com/libre-tube/LibreTube/actions/runs/15237876442. The zip file with the apks is at the bottom of the page.

Bnyro · 2025-05-26T15:44:30Z

Some button animations are still a bit buggy, that's because we use the alpha version of Material 3 Expressive and it will probably get better with the next updates of the Material 3 Expressive library.

Figim · 2025-05-26T16:41:12Z

Some button animations are still a bit buggy, that's because we use the alpha version of Material 3 Expressive and it will probably get better with the next updates of the Material 3 Expressive library.

Can the 4 bugs I mentioned above be fixed? The last CI failed

Off topic: You should double check the autoplay bug with the autoplay countdown.

Bnyro · 2025-05-26T17:00:26Z

Can the 4 bugs I mentioned above be fixed?

Probably? Git patches that I can apply in this PR are welcome.

The last CI failed

Yeah, the GitHub server is timeouting. Nothing we can do.

I retriggered it, seemed to work now.

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

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

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

Figim · 2025-05-27T01:09:32Z

Speed, sections, sleep timer etc. buttons on the audio player are overlapping and not opening due to vibration. The buttons on the channel page also vibrate a lot. Maybe they can be made stable

Issues 2,3,4 can be repeated on many devices

Figim · 2025-06-27T18:09:58Z

CI failed. I would like to test

Bnyro · 2025-06-27T18:28:38Z

I'm currently working on a different PR to migrate to SDK 35, which is however complicated because it forces edge to edge and thus many changes are required.

This PR depends on the SDK35 changes.

Cubillas7 · 2025-07-27T12:53:51Z

@Bnyro So once sdk35 PR is done , is it possible to generate a new build here to testing purposes? Thanks

FineFindus · 2025-09-04T20:35:48Z

As the released Material Expressive (in QPR1) update adjust how dynamic colors are generated, some elements have too low contrast (e.g. see the text in the screenshot). We should address this before merging, to avoid accessibility issues.

… design

Fixes an issue, where part of the text of the bottom-bar could be hidden.

Bnyro · 2025-09-09T20:57:25Z

Ready to merge from my POV. There are still some small adjustments needed before the release, but overall this should be fine now.

The home page feels still a bit unfinished, but I'm not sure how to change the look of the "featured" and "continue watching" section. I redesigned the trends, bookmarks and playlists category.

@FineFindus can you please have a final look at the latest two commits?

Bnyro · 2025-09-09T20:59:42Z

#7406 will need to be rebased and merged after this PR.

Figim · 2025-09-10T09:10:36Z

The audio view is broken when switching from PiP to audio player. This is actually the case in the debug version as well.

FineFindus

The player still uses the old loading indicators (I have 0194733, if you want to try and cherry-pick it :))
As noted in a previous comment of mine, some of the texts are barely to not at all readable.

The home page feels still a bit unfinished

We should add chevrons the section titles, to indicate that they are clickable.

Neither of them are blockers for merging this though

FineFindus · 2025-09-10T15:58:22Z

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

+                    <com.google.android.material.button.MaterialButton
+                        android:id="@+id/trending_category"
+                        style="?materialIconButtonOutlinedStyle"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_gravity="center"
+                        app:icon="@drawable/ic_frame" />
+
+                    <com.google.android.material.button.MaterialButton
+                        android:id="@+id/trending_region"
+                        style="?materialIconButtonFilledTonalStyle"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_gravity="center"
+                        app:icon="@drawable/ic_region" />


I think these should be moved to the settings as they are preference that are unlikely to be changed often, but that's not a blocker for me

Yeah, I thought it might be handy to be able to browse through the trends of different countries quickly, but perhaps it makes sense to move the region selector to the trending page directly?

Previously, by having it in the settings page, it perhaps wasn't that self-explaining to users what that region is used for (i.e. search results are not influenced by that setting, which might have been confusing, ...)

Bnyro · 2025-09-12T17:55:36Z

The player still uses the old loading indicators (I have 0194733, if you want to try and cherry-pick it :))

Yeah, I didn't migrate them at first because I thought it might look weird because all other video players also use the spinning circle.

Just tested, looks fine, so we'll change them too :)

As noted in a previous comment of mine, some of the texts are barely to not at all readable.

I'd appreciate help with that in a follow-up PR as I don't have the QPR1 Android version on my phone yet.

We should add chevrons the section titles, to indicate that they are clickable.

Good point, added!

Co-authored-by: FineFindus <[email protected]>

…rousels

Bnyro requested a review from FineFindus May 22, 2025 15:07

Bnyro force-pushed the expressive branch from 13cdc34 to 8fb021a Compare May 22, 2025 15:08

FineFindus reviewed May 22, 2025

View reviewed changes

Bnyro force-pushed the expressive branch 3 times, most recently from e269dd6 to 56faf4d Compare May 25, 2025 12:29

Bnyro added help wanted Looking for help testers needed Looking for people to test the changes before merging labels May 25, 2025

Bnyro force-pushed the expressive branch from 56faf4d to 27d836e Compare May 26, 2025 10:23

FineFindus reviewed May 26, 2025

View reviewed changes

app/src/main/java/com/github/libretube/ui/fragments/WatchHistoryFragment.kt Show resolved Hide resolved

app/src/main/res/layout/fragment_watch_history.xml Show resolved Hide resolved

app/src/main/res/layout/fragment_library.xml Outdated Show resolved Hide resolved

Bnyro force-pushed the expressive branch from 27d836e to 6e21627 Compare June 27, 2025 18:01

Bnyro mentioned this pull request Jul 15, 2025

[tracking issue] Home tab redesign #7542

Closed

3 tasks

FineFindus mentioned this pull request Jul 25, 2025

feat: support edge to edge and bump to sdk35 #7507

Merged

Bnyro force-pushed the expressive branch from 5bb5554 to 3b56240 Compare July 27, 2025 13:05

Bnyro added 8 commits September 9, 2025 20:10

feat: update ui components to material 3 expressive

b255987

feat: redesign audio player to material 3 expressive

0c06223

feat: use material switch with icon in audio player for autoplay

33fedd1

feat: migrate channel fragment header to material 3 expressive

ba60bc1

feat: move subscriptions into a separate bottom sheet

6b40c73

feat: small expressive design improvements in playlist fragment

b8e0043

feat: redesign watch history fragment to match the downloads fragment…

21c44d1

… design

feat: use split button in subscriptions fragment

e0d1428

Bnyro force-pushed the expressive branch 2 times, most recently from 649b510 to 4fa6b9b Compare September 9, 2025 20:48

Bnyro and others added 2 commits September 9, 2025 22:53

feat: redesign library fragment to material3 expressive

d067ead

fix(UI): set bottom-bar height to wrap_content

02f95c4

Fixes an issue, where part of the text of the bottom-bar could be hidden.

Bnyro force-pushed the expressive branch from 4fa6b9b to 9f3e67b Compare September 9, 2025 20:53

This comment has been minimized.

Sign in to view

Bnyro force-pushed the expressive branch from 9f3e67b to 89bc741 Compare September 10, 2025 09:06

Bnyro marked this pull request as ready for review September 10, 2025 14:30

FineFindus approved these changes Sep 10, 2025

View reviewed changes

Bnyro and others added 4 commits September 12, 2025 19:58

feat: use new loading indicators

82b4e35

Co-authored-by: FineFindus <[email protected]>

feat(home): add quick action to change trending region and category

c2c2aba

feat(home): redesign playlists and bookmarks categories to use MD3 ca…

2890c72

…rousels

feat: add chevrons to home tab titles to indicate they're clickable

13c65f9

Bnyro force-pushed the expressive branch from fb33d90 to 13c65f9 Compare September 12, 2025 17:58

Bnyro merged commit 82747c4 into libre-tube:master Sep 12, 2025
3 checks passed

Bnyro deleted the expressive branch September 12, 2025 17:58

Bnyro mentioned this pull request Sep 12, 2025

feat: show toolbar when scrolling up in subscriptions feed for better accessibility #7673

Merged

Uh oh!

feat: update ui components to material 3 expressive #7444

feat: update ui components to material 3 expressive #7444

Uh oh!

Conversation

Bnyro commented May 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

TODO

Uh oh!

FineFindus left a comment

Choose a reason for hiding this comment

Uh oh!

Bnyro commented May 23, 2025

Uh oh!

Bnyro commented May 23, 2025

Uh oh!

Figim commented May 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Bnyro commented May 25, 2025

Uh oh!

Figim commented May 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Bnyro commented May 25, 2025

Uh oh!

Figim commented May 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

akashsriramganapathy commented May 26, 2025

Uh oh!

Bnyro commented May 26, 2025

Uh oh!

Bnyro commented May 26, 2025

Uh oh!

Figim commented May 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Bnyro commented May 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Figim commented May 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Figim commented Jun 27, 2025

Uh oh!

Bnyro commented Jun 27, 2025

Uh oh!

Cubillas7 commented Jul 27, 2025

Uh oh!

FineFindus commented Sep 4, 2025

Uh oh!

Bnyro commented Sep 9, 2025

Uh oh!

Bnyro commented Sep 9, 2025

Uh oh!

This comment has been minimized.

Figim commented Sep 10, 2025

Uh oh!

FineFindus left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

FineFindus Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

Bnyro Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

Bnyro commented Sep 12, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Bnyro commented May 22, 2025 •

edited

Loading

Figim commented May 25, 2025 •

edited

Loading

Figim commented May 25, 2025 •

edited

Loading

Figim commented May 25, 2025 •

edited

Loading

Figim commented May 26, 2025 •

edited

Loading

Bnyro commented May 26, 2025 •

edited

Loading

Figim commented May 27, 2025 •

edited

Loading

FineFindus left a comment •

edited

Loading