search

corona-warn-app / cwa-app-android

Native Android app using the Apple/Google exposure notification API. The CWA development ends on May 31, 2023. You still can warn other users until April 30, 2023. More information:
https://coronawarn.app/en/faq/#ramp_down
Apache License 2.0
2.44k stars 495 forks source link

[Small problem] Different display representations between 'Dark Mode' & 'Normal Mode' ... #2672

Closed Jo-Achim closed 3 years ago

Jo-Achim commented 3 years ago

Hi, there is a little misrepresentation ... see markings in the screenshots: Screenshot_20210323-122038_2

and Screenshot_20210323-122011_2

Best regards, Joachim.

Android 10 with Android security update: February 1st, 2021 Nokia 7.1, Build: 00WW_4_16B_SP04 CWA version: 1.14.3 ENF: 18210613000 NetGuard Pro 2.295 Norton 360, v.5.4.1.5649

Internal Tracking ID: EXPOSUREAPP-5923.

MikeMcC399 commented 3 years ago

@Jo-Achim

The text "7-Tage-Mittelwert" wraps onto a new line by breaking the word "Mittelwert" in Android 10 with Font size (Schriftgröße) increased. It affects other tiles also in light mode, not just dark mode.

This is a problem with the locale set to Deutsch because the text is long. With the locale set to English the problem doesn't appear because "7-Day Average" can be broken onto two lines at the space without affecting the readability. There is no space in "7-Tage-Mittelwert" which would indicate a preferred place to break the text, instead Android takes one or more letters from the end of the string and puts them on the next line.

I don't know if there is a simple fix for this. It will be interesting to see what the response from the devs is.

dsarkar commented 3 years ago

Dear @Jo-Achim, Thank you for your report. Next time, could you please use the bug template (Thanks!). Internal Tracking ID: EXPOSUREAPP-5923. Best wishes, DS

Corona-Warn-App Open Source Team

Jo-Achim commented 3 years ago

Hi,

I've refreshed the screenshots above to show that the line break problem also happens with the same dates. (To test it is sufficient to switch under "Settings", "Display" the "Dark design"-option.) Visually, I cannot estimate whether other font sizes are used in 'Dark' mode than in 'Normal' mode. Therefore, the text window in 'Dark' mode could simply be a few pixels too small.

Added: I also noticed that in 'Dark' mode the line "RISK-DETERMINATION ACTIVE" is scrolled up out of the window; not in "normal" mode. See: new screenshots above.

Best regards, Joachim.

MikeMcC399 commented 3 years ago

It's part of a generic problem of how Android breaks strings when then don't fit the available space.

The following screen shot of part of the statistics tiles is from an Android 10 tablet with font size set to maximum.

Statistics with large font

Maybe a workaround is to always have a line break(s) in the strings? So for instance display:

7-Tage-
Mittelwert
Bestätigte
Neu-
infektionen
7-Tage-
Inzidenz
Jo-Achim commented 3 years ago

@MikeMcC399, ok, that's logical. But who determines the size of the available space that is necessary to display the corresponding text (CWA or Google)? Here specifically / only between 'normal' and 'dark' mode.

Best regards, Joachim.

PS: Text in the field "Warnende Personen" / "Warning persons" there is no difference between 'normal' and 'dark' mode; both texts are correct fitted.

MikeMcC399 commented 3 years ago

@Jo-Achim

I think I found the problem!

The dark mode image is wider than the light mode image:

So there is less room available for the text when the mode is switched to dark.

The layout is defined in https://github.com/corona-warn-app/cwa-app-android/blob/main/Corona-Warn-App/src/main/res/layout/home_statistics_cards_infections_layout.xml.

I used the Android Studio Layout Inspector to look into the dynamic display.

Added: I also noticed that in 'Dark' mode the line "RISK-DETERMINATION ACTIVE" is scrolled up out of the window; not in "normal" mode. See: new screenshots above.

Would you like to open a new issue for this? I can see also see that the scrolling of the app status works differently in light and dark mode.

@dsarkar Could you pass the finding about the graphics size on to the devs for EXPOSUREAPP-5923?

Jo-Achim commented 3 years ago

@MikeMcC399,

thanks.

Added: I also noticed that in 'Dark' mode the line "RISK-DETERMINATION ACTIVE" is scrolled up out of the window; not in "normal" mode. See: new screenshots above.

Would you like to open a new issue for this? I can see also see that the scrolling of the app status works differently in light and dark mode.

Tomorrow, I create a new issue. But before, I will inform, that the problem occurs in 'normal' mode too. In conjunction with 'in / from which position you scroll the screen'. Details, I couldn't find out at this time.

Best regards, Joachim.

dsarkar commented 3 years ago

@MikeMcC399 @Jo-Achim Thanks analysing, I will forward your findings to EXPOSUREAPP-5923.

MikeMcC399 commented 3 years ago

@dsarkar Changing https://github.com/corona-warn-app/cwa-app-android/blob/66055425822758f2575de50d7e82b371bb81370c/Corona-Warn-App/src/main/res/layout/home_statistics_cards_infections_layout.xml#L17

to android:layout_width="107dp"

could be a temporary workaround to the issue, which would shrink the display of the dark mode graphic https://github.com/corona-warn-app/cwa-app-android/blob/main/Corona-Warn-App/src/main/res/drawable-night/ic_main_illustration_infection.xml to match the width of the regular one.

I checked the widths of the vector graphics on the other three statistics tiles and they all have identical widths for regular and dark mode. It seems that the issue is only for the infection illustration.

Jo-Achim commented 3 years ago

@MikeMcC399.

I used the Android Studio Layout Inspector to look into the dynamic display.

Added: I also noticed that in 'Dark' mode the line "RISK-DETERMINATION ACTIVE" is scrolled up out of the window; not in "normal" mode. See: new screenshots above.

Would you like to open a new issue for this? I can see also see that the scrolling of the app status works differently in light and dark mode.

Tomorrow, I create a new issue. But before, I will inform, that the problem occurs in 'normal' mode too. In conjunction with 'in / from which position you scroll the screen'. Details, I couldn't find out at this time.

No, I'm not going to create a new issue. The scrolling behavior with regard to the line "RISK-DETERMINATION ACTIVE" depends on where you scroll. If in the upper part of the window is scrolled, "RISK-DETERMINATION ACTIVE" is pushed upwards. If you scroll in the lower part of the window (at the height of the fields "Confirmed new infections" / "Bestätigte Neuinfektionen"), the line "RISK-DETERMINATION ACTIVE" remains visible.

This scrolling behavior is identical in 'normal' and 'dark' mode! And therefore not an issue.

Best regards, Joachim.

dsarkar commented 3 years ago

@Jo-Achim Thanks for your feedback.

@MikeMcC399 I will forward your findings to the developers. Thanks!

dsarkar commented 3 years ago

@MikeMcC399 see PR https://github.com/corona-warn-app/cwa-app-android/pull/2691 and comment in OP.

MikeMcC399 commented 3 years ago

@dsarkar The fix looks good. The dark vector graphic has been reduced in size so it is the same width as the regular graphic.

fynngodau commented 3 years ago

2.0 has been released – can this issue be closed?

Jo-Achim commented 3 years ago

Yes!