[Compound] Bloom

[jmartinesp]

Type of change

• Feature
• Bugfix
• Technical
• Other :

Content

• Creates bloom and avatarBloom modifiers which work on API 29+.
• Creates ConnectivityIndicatorContainer component to be able to draw the bloom effect under the statusbar.
• Replaces search icon in room list, as well as the icon colors.
• Adds avatarColors to the initial avatar for the current user in the top-left corner of the room list screen.

Motivation and context

Closes #1217.

Screenshots / GIFs

Included in the PR. The bloom is not that visible for initial avatars in light mode though, some times it's completely transparent. We might need to iterate on this.

Tested devices

• Physical
• Emulator
• OS version(s): 9, 11, 13.

Checklist

• Changes have been tested on an Android device or Android emulator with API 23
• UI change has been tested on both light and dark themes
• Accessibility has been taken into account. See https://github.com/vector-im/element-x-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-x-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

[github-actions]

📱 Scan the QR code below to install the build (arm64 only) for this PR.

If you can't scan the QR code you can install the build via this link: https://i.diawi.com/89Wq2V

[bmarty]

Nice work!

The bloom effect does not work on light mode, it's not just for the preview:

Also I think the bloom effect must be disabled with the collapsed top bar, or there has been a decision taken here?

[jmartinesp]

The bloom effect does not work on light mode, it's not just for the preview:

It does work, but only for avatars with very vivid colors, and it's quite subtle even in that case (try some vivid primary color like red/green/blue). We probably need to improve this, but it's the result we have with the current opacity and blend modes. This is also the case in iOS: element-hq/element-x-ios#1630.

Example of vivid avatar in light mode

Also I think the bloom effect must be disabled with the collapsed top bar, or there has been a decision taken here?

That's the expected behavior: the bloom gets clipped and a subtle divider is added to the app bar. It's probably quite hard to see there because it's also gray-ish though 😅 .

Clipped bloom

[codecov]

Codecov Report

Patch coverage: 75.47% and project coverage change: +0.21% 🎉

Comparison is base (d69728c) 57.43% compared to head (5eb3597) 57.65%.
Report is 16 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #1253      +/-   ##
===========================================
+ Coverage    57.43%   57.65%   +0.21%     
===========================================
  Files         1084     1086       +2     
  Lines        28241    28538     +297     
  Branches      5806     5851      +45     
===========================================
+ Hits         16221    16454     +233     
- Misses        9478     9515      +37     
- Partials      2542     2569      +27     

Files Changed	Coverage Δ
...roid/libraries/designsystem/colors/AvatarColors.kt	100.00% <ø> (+16.66%)	⬆️
...esignsystem/components/avatar/UserAvatarPreview.kt	0.00% <ø> (ø)
...oid/libraries/designsystem/preview/PreviewGroup.kt	0.00% <ø> (ø)
...networkmonitor/api/ui/ConnectivityIndicatorView.kt	71.42% <63.63%> (-2.39%)	⬇️
...eatures/roomlist/impl/components/RoomListTopBar.kt	62.96% <68.35%> (+13.66%)	⬆️
...android/libraries/designsystem/components/Bloom.kt	75.00% <75.00%> (ø)
...ent/android/features/roomlist/impl/RoomListView.kt	56.77% <85.71%> (-0.24%)	⬇️
...m/impl/addpeople/AddPeopleUserListStateProvider.kt	100.00% <100.00%> (ø)
.../ftue/impl/notifications/NotificationsOptInView.kt	66.30% <100.00%> (ø)
...s/impl/timeline/components/TimelineItemEventRow.kt	55.46% <100.00%> (ø)
... and 3 more

... and 5 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[bmarty]

For bloom in light mode: I have found that not using ElementTheme.materialColors.background but a grey color, like 0xFFAAAAAA for instance makes the effect more visible.

I think most of the users are using light mode, so I do not get the point to merge this if the effect is not visible to them.

[jmartinesp]

For bloom in light mode: I have found that not using ElementTheme.materialColors.background but a grey color, like 0xFFAAAAAA for instance makes the effect more visible.

I think most of the users are using light mode, so I do not get the point to merge this if the effect is not visible to them.

We need to finish it for the polishing epic, and the deadline for this task is today, so there's not much we can do right now. Either the design team decides to use other blend modes or opacity values or we need to merge it as is. In the future we can try some other strategies as extracting key colors or applying some other blurring algorithms.

[bmarty]

OK

[janogarcia]

@bmarty It's a known limitation of the current implementation that for avatars that have low chroma content (either being mostly grayscale, or too pale/pastel colors) the bloom effect is too subtle or lost in light mode.

It's currently implemented with a mix of layer blending modes and opacity values. This however has some limitations that would only be properly addressed by image analysis libraries like Android's Palette API, that is, extracting dominant colors and building a gradient from scratch, but due to time constraints we decided to go ahead with the simpler cross-platform implementation (layer blending modes).

/cc @nadonomy

[nadonomy]

+1, also keen to spike color thief (& native mobile implementations) when we have time: https://lokeshdhakar.com/projects/color-thief/