Material Design 3 migration (V2) #927

newhinton · 2024-01-31T16:47:43Z

Closes #872

This PR is based on, and superseeds @Bnyro 's Material 3 implementation. It takes the UI a step further, and makes heavy use of the Material You colors.

This was implemented and improved with @Bnyro support, consent and collaboration.

Edit:
For more info about what this pr does, look in this discussion: https://github.com/Bnyro/Transportr/pull/1

use original color scheme

improve material 3 shading

ialokim · 2024-02-07T21:02:45Z

Thanks @newhinton and @Bnyro! The screenshots in the linked PR already look very promising!

I will try to test your changes in the coming days and provide some initial feedback.

ialokim

Hi @newhinton and @Bnyro, I've now gone through the code and left some comments below. Thanks again for this work!

ialokim · 2024-02-14T21:45:03Z

.idea/codeStyles/Project.xml

-    <XML>
-      <option name="XML_LEGACY_SETTINGS_IMPORTED" value="true" />
-    </XML>


This looks like some unrelated changes which should be left out of the PR.

@ialokim I have never (manually) touched those files. Should IDE-config files be in this repository anyhow?

ialokim · 2024-02-14T21:57:05Z

app/src/main/java/de/grobox/transportr/favorites/locations/SpecialLocationFragment.kt

-        KeyboardUtil.hideKeyboard(activity)
+        val imm = activity?.getSystemService(Activity.INPUT_METHOD_SERVICE) as InputMethodManager?
+        imm?.hideSoftInputFromWindow(requireActivity().currentFocus?.windowToken, 0)


I would vote for having our own KeyboardUtil.kt that encapsulates this rather ugly piece of code.

ialokim · 2024-02-14T22:03:41Z

app/src/main/java/de/grobox/transportr/map/MapActivity.java

+			InputMethodManager imm = (InputMethodManager) getSystemService(Activity.INPUT_METHOD_SERVICE);
+			View currentFocus = getCurrentFocus();
+			if (currentFocus != null) imm.hideSoftInputFromWindow(currentFocus.getWindowToken(), 0);


As before, I would move this to KeyboardUtils.

ialokim · 2024-02-14T22:05:19Z

app/src/main/java/de/grobox/transportr/map/MapActivity.java

+		FullScreenUtil.Companion.drawBehindStatusbar(this);
+		FullScreenUtil.Companion.applyTopInset(findViewById(R.id.searchCardView), 16);


This misbehaves on my device, see screenshots.

app/src/main/java/de/grobox/transportr/networks/PickTransportNetworkActivity.kt

ialokim · 2024-02-14T22:43:53Z

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

+	android:layout_marginTop="32dp"
+	android:fitsSystemWindows="true">
+
+	<LinearLayout


Couldn't we use a ConstrainedLayout instead of nested LinearLayouts?

ialokim · 2024-02-14T22:45:50Z

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


 		<TextView
 			android:id="@+id/via"
 			android:layout_width="0dp"
 			android:layout_height="wrap_content"
 			android:ellipsize="middle"
 			android:singleLine="true"
-			android:textColor="?android:textColorPrimary"


As said before, not a fan of having Material You-adapted text colors.

This is different than the above one. Here we actually re-set the text color via the FavoriteCardForeground-style. That sets the text color. Removing the coloring makes it look like this:

We will have to set the text color anyway to fix the tinting. What color would you like?

ialokim · 2024-02-14T22:50:19Z

app/src/main/res/values-v31/colors.xml

+    <color name="md_theme_primary">@android:color/system_accent1_200</color>
+    <color name="md_theme_onPrimary">@android:color/system_accent1_0</color>


Where did you get these values from? Some online tool?

https://m3.material.io/theme-builder

ialokim · 2024-02-14T22:53:14Z

app/src/main/res/values/themes.xml

    </style>

    <style name="AppDayNightTheme" parent="AppBaseTheme">
-        <item name="colorControlNormal">@color/drawableTintLight</item>


Shouldn't this still be set somewhere or is it provided by MD3 somehow automatically? (You've used it in several places)

It's automatically set by Android

ialokim · 2024-02-14T22:54:09Z

app/src/test/java/de/grobox/transportr/utils/DateUtilsTest.kt

-        `when`(resources.getColor(R.color.md_green_500)).thenReturn(GREEN)
-        `when`(resources.getColor(R.color.md_red_500)).thenReturn(RED)


Have you tried that the test still runs through?

ialokim · 2024-02-14T23:00:41Z

Select Location from main searchbar, dismiss bottom sheet. Re-select location. Left side of bottom sheet has padding

I haven't encountered that one.

Drop shadow of navigation also has padding after above flow

Navigation Drawer is invisible below status bar when opened

Three State Bottom Sheet has buggy behaviour

But those ones yes.

Select Location on map. Start navigation via FAB. New Activity has favorite locations instead of empty list (already present in 2.2.1)

Given this is not a regression, I wouldn't further consider it for this PR.

~~Trip Details toolbar menu does not show up~~

This one still happens here.

ialokim · 2024-02-14T23:11:15Z

Additionally, I've found the following issues while testing:

Text color looks strange when selected via Material You:

Issues with transport mode selection: not MD3 dialog, icon alignment

DatePicker dialog has different shape

map attribution is partly covered by "home screen bar"

I don't think the back button needs to be as prominent, I'd just leave it in the onSurface color:

text color issue on network selection page, also unnecessary high top bar

invisible icons in several places of the app

ialokim · 2024-02-14T23:16:21Z

This definitely needs some more cleanup work, but I do think this is going into the right direction!

Personally, I'm not fully convinced on giving up on the nice Transportr red altogether, given that it's part of the branding, but it seems that's what Material You is suggesting to do?

Bnyro · 2024-02-15T00:06:53Z

Personally, I'm not fully convinced on giving up on the nice Transportr red altogether, given that it's part of the branding, but it seems that's what Material You is suggesting to do?

Yes, it does. It would be possible to add s preference to toggle the red vs material you colors though.

Altonss · 2024-02-15T14:20:06Z

Personally, I'm not fully convinced on giving up on the nice Transportr red altogether, given that it's part of the branding, but it seems that's what Material You is suggesting to do?

+1 for trying to keep the Transportr red identity by default if possible :)

michaelblyons · 2024-02-16T00:17:44Z

It would be possible to add a preference to toggle the red vs Material You colors though.

I think this is what Trail Sense is doing.

newhinton · 2024-02-18T20:36:33Z

DatePicker dialog has different shape

This is actually not a regression, it is also present in the current design. It is just a bit more visible in this PR.

Personally, I'm not fully convinced on giving up on the nice Transportr red altogether, given that it's part of the branding, but it seems that's what Material You is suggesting to do?

Yes it is. Though i recommend not to introduce a toggle ability, it would require quite a bit of code to make it work properly. It will lead to bugs. And i don't think i want to spend time on implementing that, especially since there is still a bit to do with the base-proposal.

newhinton · 2024-02-19T07:22:11Z

newhinton · 2024-03-14T10:36:25Z

@ialokim @Altonss

I have improved on many of the things you noted. However, there are still some things broken, like the three-state-bottomsheet.

I also found that some issues are very likely due to older libraries beeing used. That opened an entire different can of worms. As an example: I have tried to manually calculate the statusbar height so that i can adjust the backButton in the tripview, with less than optimal results. In newer libraries there is an enableEdgeToEdge() function for Activity. I tried updating the dependency, but that also requires an update to kotlin, which deprecates kotlin-android-extensions which means that we have to switch to viewbindings.

This is rapidly exploding the size of this PR, but i also don't think that we should continue without upgrading the libraries, which are at this point 2-4 years old and up to 5 versions behind.

How should i continue?

Altonss · 2024-05-12T13:57:35Z

@ialokim @Altonss

I have improved on many of the things you noted. However, there are still some things broken, like the three-state-bottomsheet.

I also found that some issues are very likely due to older libraries beeing used. That opened an entire different can of worms. As an example: I have tried to manually calculate the statusbar height so that i can adjust the backButton in the tripview, with less than optimal results. In newer libraries there is an enableEdgeToEdge() function for Activity. I tried updating the dependency, but that also requires an update to kotlin, which deprecates kotlin-android-extensions which means that we have to switch to viewbindings.

This is rapidly exploding the size of this PR, but i also don't think that we should continue without upgrading the libraries, which are at this point 2-4 years old and up to 5 versions behind.

How should i continue?

I think #902 is a step in the right direction regarding the issues you mentionned. We just need to review/merge it :)

Bnyro and others added 30 commits July 24, 2023 09:47

Migrate all dialogs to Material Design 3

dc38bfe

Migrate colors and list items to Material design 3

ca55a4e

Fix minor issues and migrate search suggestions style to md3

fbb1752

Migrate preference dialogs to MD3

ff56aff

Improve appearance of transport networks

2dcb6ba

Rewrite navigation drawer for Material Design 3

03f51cc

remove unneeded tests due to md3 migration

30091fb

make material 3 more colorful

cd2ae56

use better splashscreen

1c670ef

use original color scheme

add material you colors

d6369c5

fix star color

ebb7758

add dark material you colors

fc4bdb3

use back arrow instead of toolbar

4bcd65c

make trip view semi-fullscreen

ac763ad

use colors in textviews

a057e5b

improve material 3 shading

mute colors a bit

d8bac80

fix primary card style

296ea97

update startup icon color

71fd70c

add startup icon

1196dc0

add missing colors

d38dfb1

push map route below statusbar

c091cb7

improve splash screen colors

2649704

update divider between map and content

56f8e9b

draw map below statusbar in map activity

1685862

partially fix shadow on special location fragment

3dae404

use transparent navigation bar

28fa82b

fix minor color choices

6f6ed83

make walk icon more legible

8eeb109

use light navbar

b6677e0

add main view rounded corners

6946aa4

cla-bot bot added the cla-signed ✔️ The Contributor Licence Agreement was signed by all contributors. label Feb 7, 2024

fix toolbar menus not showing

2e8c3f5

ialokim requested changes Feb 14, 2024

View reviewed changes

newhinton added 3 commits February 18, 2024 21:03

reintroduce yellow walk color

1ac9369

fix typo in comment

64ee501

Fix PopupMenu icon colors

d160830

newhinton added 3 commits February 19, 2024 08:14

fix coloring on network selection

0100569

refactor attribute naming

001cb61

use less prominent color for back button

c534558

newhinton added 10 commits February 19, 2024 08:24

use proper color for toolbar close

d1f2b45

improve map attribution

5b1dbad

use material dialog for transport mode selector

64f4b49

use less obtrusive color on favorite card

4bb7cfb

undo intellij-configchange

e7a18ec

update first network selection

d393f5d

improve list styles

200ad84

Switch navheader to constraintlayout

7fa31ca

fix map attribution on trip details

62f3fac

increase back button contrast

ca358fe

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Material Design 3 migration (V2) #927

Material Design 3 migration (V2) #927

newhinton commented Jan 31, 2024 •

edited

Loading

ialokim commented Feb 7, 2024

ialokim left a comment

ialokim Feb 14, 2024

newhinton Mar 13, 2024

ialokim Feb 14, 2024

ialokim Feb 14, 2024

ialokim Feb 14, 2024

ialokim Feb 14, 2024

ialokim Feb 14, 2024

newhinton Feb 18, 2024

ialokim Feb 14, 2024

Bnyro Feb 15, 2024

ialokim Feb 14, 2024

Bnyro Feb 15, 2024

ialokim Feb 14, 2024

ialokim commented Feb 14, 2024

ialokim commented Feb 14, 2024

ialokim commented Feb 14, 2024

Bnyro commented Feb 15, 2024

Altonss commented Feb 15, 2024

michaelblyons commented Feb 16, 2024

newhinton commented Feb 18, 2024

newhinton commented Feb 19, 2024 •

edited

Loading

newhinton commented Mar 14, 2024

Altonss commented May 12, 2024

		FullScreenUtil.Companion.drawBehindStatusbar(this);
		FullScreenUtil.Companion.applyTopInset(findViewById(R.id.searchCardView), 16);

		<color name="md_theme_primary">@android:color/system_accent1_200</color>
		<color name="md_theme_onPrimary">@android:color/system_accent1_0</color>

		`when`(resources.getColor(R.color.md_green_500)).thenReturn(GREEN)
		`when`(resources.getColor(R.color.md_red_500)).thenReturn(RED)

Material Design 3 migration (V2) #927

Are you sure you want to change the base?

Material Design 3 migration (V2) #927

Conversation

newhinton commented Jan 31, 2024 • edited Loading

ialokim commented Feb 7, 2024

ialokim left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ialokim commented Feb 14, 2024

ialokim commented Feb 14, 2024

ialokim commented Feb 14, 2024

Bnyro commented Feb 15, 2024

Altonss commented Feb 15, 2024

michaelblyons commented Feb 16, 2024

newhinton commented Feb 18, 2024

newhinton commented Feb 19, 2024 • edited Loading

newhinton commented Mar 14, 2024

Altonss commented May 12, 2024

newhinton commented Jan 31, 2024 •

edited

Loading

newhinton commented Feb 19, 2024 •

edited

Loading