Upgrades app look and feel to Material You #5359

ericdecanini · 2022-02-25T11:44:16Z

This PR shows how the app will look in Material 3, but can't be merged until we have approval from design. Based on that, the requirements and content of this might change

Type of change

Feature
Bugfix
Technical
Other :

Content

Upgrades the app's theme to Material 3 (a.k.a Material You)

Motivation and context

The merge of this PR closes #5393

The changelog for 1.5.0 can be found here

Material 1.5.0 introduces the new Material 3 UI design scheme.

The dependency was upgraded without side-effects in this PR.

This PR includes the full design migration (sans dynamic colors) of the app to Material 3. The components which have been visibly updated are:

Bottom Navigation Bar
Chips (e.g. Jump to Unread)
Popup Menu
Dialogs
FAB
Settings menu (bold preference titles)

Other components have been updated in the code without any user-facing changes due to behavioural changes of UI components in Material 3. These include:

Text styles
Settings app bar title alignment

Screenshots / GIFs

Tests

Smoke test the app and see that designs are either consistent with previous Element app versions or with new Android Material 3 designs.

See that the components above display as expected (whether they are changed or remain the same)

Tested devices

Physical
Emulator
OS version(s): Android 10

Checklist

Changes has been tested on an Android device or Android emulator with API 21
UI change has been tested on both light and dark themes
Accessibility has been taken into account. See https://github.com/vector-im/element-android/blob/develop/CONTRIBUTING.md#accessibility
Pull request is based on the develop branch
Pull request includes a new file under ./changelog.d. See https://github.com/vector-im/element-android/blob/develop/CONTRIBUTING.md#changelog
Pull request includes screenshots or videos if containing UI changes
Pull request includes a sign off
You've made a self review of your PR
If you have modified the screen flow, or added new screens to the application, you have updated the test UiAllScreensSanityTest.allScreensTest()

github-actions · 2022-02-25T11:55:27Z

Unit Test Results

  92 files ±0   92 suites ±0 1m 18s ⏱️ -2s
162 tests ±0 162 ✔️ ±0 0 💤 ±0 0 ❌ ±0
524 runs ±0 524 ✔️ ±0 0 💤 ±0 0 ❌ ±0

Results for commit 6aa830a. ± Comparison against base commit bcdf004.

♻️ This comment has been updated with latest results.

github-actions · 2022-02-25T13:22:29Z

Matrix SDK

Integration Tests Results:

[org.matrix.android.sdk.session]
=passed=6 failures=17 errors=0 skipped=2
[org.matrix.android.sdk.account]
=passed=3 failures=0 errors=0 skipped=2
[org.matrix.android.sdk.internal]
=passed=19 failures=1 errors=0 skipped=3
[org.matrix.android.sdk.ordering]
=passed=16 failures=0 errors=0 skipped=0
[org.matrix.android.sdk.PermalinkParserTest]
=passed=2 failures=0 errors=0 skipped=0

bmarty · 2022-02-28T09:17:06Z

library/ui-styles/src/main/res/values/theme_dark.xml

@@ -3,7 +3,7 @@

    <!-- DARK THEME COLORS -->

-    <style name="Base.Theme.Vector.Dark" parent="Theme.MaterialComponents.NoActionBar">
+    <style name="Base.Theme.Vector.Dark" parent="Theme.Material3.Dark.NoActionBar">


So nice to have explicit .Dark in the theme names now!

bmarty · 2022-02-28T09:18:49Z

vector/src/main/res/layout/fragment_login_server_url_form.xml

@@ -55,7 +55,7 @@

            <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/loginServerUrlFormHomeServerUrlTil"
-                style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu"
+                style="@style/Widget.Material3.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu"


This was a mistake to directly use Widget.MaterialComponents.* in the layout. We should always have override style to our style_*.xml. Can I ask you to create the missing files, or add style to existing files following the current naming convention? Thanks!
It apply to all the other changes in layout files (except for debug files).

…de-material-library

ericdecanini · 2022-03-02T10:18:29Z

Parking this PR for now whilst awaiting the design team's decision on this.

The PR is left at the state of a full material 3 upgrade with a couple known issues:

On debug settings, opening a progress dialog will crash the app. This might have implications on other parts of the app
Some settings dialogs still use the old theme

…de-material-library

ericdecanini · 2022-03-09T09:02:11Z

When work is approved and once again ready to work on, either reopen this or use this as reference

ericdecanini · 2022-10-25T13:32:59Z

Restoring this branch temporarily to provide some videos to design

ericdecanini added 3 commits February 25, 2022 10:02

Updates material depenedency

61d3e22

Migrates Theme.MaterialComponents to Theme.Material3

fb49eba

Migrates Widget.MaterialComponents to Widget.Material3

4b1f4a2

Changes unresolved Entry chip to Input chip in pill_view.xml

3be281d

ericdecanini added 3 commits February 25, 2022 15:35

Fixes broken text buttons caused by materialThemeOverlay

c2f5493

Adds container palette colours

21ce620

Updates popup menu style

44c49f6

bmarty reviewed Feb 28, 2022

View reviewed changes

ericdecanini added 18 commits February 28, 2022 11:00

Tests popup container color change (MUST REVERT)

42371b5

Adds vector styles for TextInputLayout ExposedDropdownMenu

c90f0bd

Tests popup color change 2 (MUST REVERT)

4424127

Adds vector styles for icon buttons

6e4667f

Tests popup color change 3 (MUST REVERT)

1db0905

Tests popup color change 4 (MUST REVERT)

008a00b

Converts MaterialComponents to Material3 in styles_alert_dialog

dc1e187

Converts text appearances to Material3

30908f1

Tests popup color change 5 (MUST REVERT)

16793dc

Reverts test popup colors

1a22594

Reverts dynamicColorThemeOverlays to materialThemeOverlays with fix

64a0bc7

Adds pending fix for crashing dialogs found in debug activity

db47273

Adds pending fix for misaligned appbar title in settings

7d2f389

Adds pending fix for unthemed display name dialog

1d21487

Fixes text button appearing as normal button

c1de8dc

Pending fix for crashing dialogs in debug activity

88118d7

Pending fix for misaligned settings toolbar

1923857

Pending fix for unthemed display name dialog

e926cd0

ericdecanini mentioned this pull request Mar 1, 2022

Upgrades to Material 1.5.0 (dependency only) #5392

Merged

15 tasks

ericdecanini changed the title ~~Upgrades Material Library to 1.5.0~~ Upgrades app look and feel to Material You Mar 1, 2022

ericdecanini added 5 commits March 1, 2022 15:34

Fixes missing UI components on Display Name dialog

a199c57

Refactors DISPLAY_NAME key usage

bfd3eb3

Changes edit text prefs in Notifications settings to use material

ecc2f51

Deletes VectorEditTextPreference

0241718

Fixes broken alerter buttons

09f66b9

ericdecanini mentioned this pull request Mar 1, 2022

Upgrade UI to Material You design scheme #5393

Closed

ericdecanini added 8 commits March 1, 2022 17:39

Removes unused variable in VectorSettings dialogs

84d9ad7

Enables visibility on background notifications settings

bb89ba9

Fixes wrong text colour on alerter button

e8b5e92

Adds selection on settings dialogs

12e55d5

Reverts delete VectorEditTextPreference

a1969e7

Reverts changes on settings fragments

7674726

Fixes alerter button text color

7c46343

Merge remote-tracking branch 'origin/develop' into feature/eric/upgra…

c0d290b

…de-material-library

ericdecanini added 2 commits March 7, 2022 10:49

Fixes lint error in VectorSettingsGeneralFragment

595b7a4

Merge remote-tracking branch 'origin/develop' into feature/eric/upgra…

6aa830a

…de-material-library

ericdecanini closed this Mar 9, 2022

ericdecanini deleted the feature/eric/upgrade-material-library branch March 9, 2022 09:02

ericdecanini restored the feature/eric/upgrade-material-library branch October 25, 2022 13:32

Commit for buildkite

c9c95ac

ericdecanini reopened this Oct 25, 2022

ericdecanini closed this Oct 25, 2022

ericdecanini deleted the feature/eric/upgrade-material-library branch October 25, 2022 15:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrades app look and feel to Material You #5359

Upgrades app look and feel to Material You #5359

ericdecanini commented Feb 25, 2022 •

edited

Loading

github-actions bot commented Feb 25, 2022 •

edited

Loading

github-actions bot commented Feb 25, 2022 •

edited

Loading

bmarty Feb 28, 2022

bmarty Feb 28, 2022 •

edited

Loading

ericdecanini commented Mar 2, 2022

ericdecanini commented Mar 9, 2022

ericdecanini commented Oct 25, 2022

Upgrades app look and feel to Material You #5359

Upgrades app look and feel to Material You #5359

Conversation

ericdecanini commented Feb 25, 2022 • edited Loading

Type of change

Content

Motivation and context

Screenshots / GIFs

Tests

Tested devices

Checklist

github-actions bot commented Feb 25, 2022 • edited Loading

Unit Test Results

github-actions bot commented Feb 25, 2022 • edited Loading

Matrix SDK

Integration Tests Results:

bmarty Feb 28, 2022

Choose a reason for hiding this comment

bmarty Feb 28, 2022 • edited Loading

Choose a reason for hiding this comment

ericdecanini commented Mar 2, 2022

ericdecanini commented Mar 9, 2022

ericdecanini commented Oct 25, 2022

ericdecanini commented Feb 25, 2022 •

edited

Loading

github-actions bot commented Feb 25, 2022 •

edited

Loading

github-actions bot commented Feb 25, 2022 •

edited

Loading

bmarty Feb 28, 2022 •

edited

Loading