Switch to Material 3 design

[yozachar]

https://m3.material.io/

[tuomas2]

what is your request?

[yozachar]

Sorry, I should have been more specific. But first, thank you and the contributors, for the hard work put into this application.

Currently AndBible follows Material Design 2.

Material Design 3 has been released. Can the UI be updated M3.

For implementation reference: MaterialFiles has done this as an opt in.

[tuomas2]

is it just a lib update or needs extra work?

[yozachar]

I'm not an android developer, but from this issue https://github.com/zhanghai/MaterialFiles/issues/600#issue-1023383155, it seems a bit more than just bumping version number.

• [x] Define palette and use Material3 theme.
  • [x] Support MD3 navigation style.
  • [x] Navigation alignment on tablet.
  • [x] Toolbar elevation/color on tablet
  • [x] Secondary text color too close to primary.
  • [x] App bar title alignment.
  • [x] Menu padding.
  • [x] FAB and speed dial.
  • [x] Properties dialog TabLayout.
  • [x] Preference text appearance
  • [x] Switch styling.
  • [x] SimpleMenuPreference styling

Referenced commit: https://github.com/zhanghai/MaterialFiles/commit/b78b14c4387d0be7cc37565a219b76a804416da5

Additional details: https://github.com/material-components/material-components-android

[tuomas2]

Are there any significant benefits, other than pure estethics?

[yozachar]

AFAIK, the major benefits are aesthetics and accessibility.

• https://material.io/blog/migrating-material-3
• https://github.com/material-components/material-components-android/issues/2402#issuecomment-932989301
• https://m3.material.io/theme-builder

It's entirely up to your purview on how to take this forward, if at all.

[tuomas2]

Not getting high priority now, but perhaps at some point.

[tuomas2]

Also, perhaps someone might want to contribute here.

[OxygenCobalt]

Hey! I'm definitely open to working on this @tuomas2. I work on Auxio, a music player with a pretty big focus on M3 and intuitive design, I've been looking into ways I could also apply this mindset to a FOSS bible study app since a lot of them seem stale UI-wise with a bit of a learning curve compared to something like YouVersion.

I could either:

• Work on redoing the color scheme and the UI components while maintaining the overall UI arrangement/behavior, like FairEmail. This would keep disruption for existing users low.
• Do a more broader redesign using M3 principles, like Auxio. This might allow me to make some aspects more intuitive (note: this is super subjective :sweat_smile:), but requires me to break continuity with the old UI. I would likely build it out as a new module outright, while keeping the original codebase largely untouched save extracting what code I can share.

Let me know what you like more.

[yozachar]

@OxygenCobalt, you might know about MaterialFiles, it has an option to switch between M2 and M3.

Can something like that be done, without breaking the entire backward compatibility?

[tuomas2]

@OxygenCobalt Is it possible to do redesign one view at a time? I would love to see a PoC of some simpler view first, before deciding anything. Is it possible to do like that? Does this need a lot of code changes, or is it mainly working with layout xml files and styles?

[OxygenCobalt]

@OxygenCobalt Is it possible to do redesign one view at a time? I would love to see a PoC of some simpler view first, before deciding anything. Is it possible to do like that? Does this need a lot of code changes, or is it mainly working with layout xml files and styles?

Sure, I can try to make some kind of figma project or similar.

It would likely be a lot of code changes to the UI, and even more changes if your UI is heavily intertwined with business logic @tuomas2.

(Sorry for late response)

[tuomas2]

If it can't be done incrementally, do you have enough time to do such a somewhat-massive work? What timeline would you be able to do this?

You can show me figma, but what I was meaning b PoC is that one (somewhat simple) view (for example LabelEditActivity BackupActivity, BibleSpeakActivity or something similar) is completely transformed to new style and PR is made out of that so I see concretely what you are planning to do?

Does this BTW involve also changing layout code to Jetpack Compose?

[OxygenCobalt]

If it can't be done incrementally, do you have enough time to do such a somewhat-massive work? What timeline would you be able to do this?

My guess it would be a long-term and incremental process given the other projects and obligations I have.

You can show me figma, but what I was meaning b PoC is that one (somewhat simple) view (for example LabelEditActivity BackupActivity, BibleSpeakActivity or something similar) is completely transformed to new style and PR is made out of that so I see concretely what you are planning to do?

Yeah, that would be possible. It would be a two-fold change:

1. Modifying the theming to M3. This is less disruptive if you use a lot of MDC components and don't customize them much, it becomes exponentially more difficult when you have a lot of more home-grown styles.
2. Redoing the layout individually to follow general M3 principles, which is easier.

I could approach it in two ways:

1. Redoing an existing activity and slotting it in with everything else
2. Starting a new module outright and redoing each activity with an equivalent M3 screen

Does this BTW involve also changing layout code to Jetpack Compose?

If you want. This would make it a 100% global change though and I'd guess largely from-scratch (I start a new module in the project and work from there).

@tuomas2

[tuomas2]

If it can't be done incrementally, do you have enough time to do such a somewhat-massive work? What timeline would you be able to do this?

My guess it would be a long-term and incremental process given the other projects and obligations I have.

You can show me figma, but what I was meaning b PoC is that one (somewhat simple) view (for example LabelEditActivity BackupActivity, BibleSpeakActivity or something similar) is completely transformed to new style and PR is made out of that so I see concretely what you are planning to do?

Yeah, that would be possible. It would be a two-fold change:

1. Modifying the theming to M3. This is less disruptive if you use a lot of MDC components and don't customize them much, it becomes exponentially more difficult when you have a lot of more home-grown styles.
2. Redoing the layout individually to follow general M3 principles, which is easier.

I could approach it in two ways:

1. Redoing an existing activity and slotting it in with everything else
2. Starting a new module outright and redoing each activity with an equivalent M3 screen

You can give it a try whatever way you like. For some activities it could possibly be easier to rewrite the layout from scratch. Just my preference is that I will see something rather sooner than later (I mean, easier to review smaller PRs), so I can give guidance / opinions if needed.

Does this BTW involve also changing layout code to Jetpack Compose?

If you want. This would make it a 100% global change though and I'd guess largely from-scratch (I start a new module in the project and work from there).

Perhaps not worth the trouble if it can be done with the current templates.