[Droid] AcrylicBrush not working - improve doc?

[TopperDEL]

What would you like clarification on:

The docs state, that AcrylicBrush should work on Android if set on Elements without children. For me it is not working but I'm not sure, if I just misunderstand the docs.

This is what I wan to achieve:

<Grid>
     <Grid.Background>
          <AcrylicBrush TintOpacity="0.5" />
     </Grid.Background>
</Grid>

This is what I tried according to the docs:

<Grid>
     <Border BorderThickness="0">
          <Border.Background>
               <AcrylicBrush TintOpacity="0.5" />
          </Border.Background>
     </Border>
</Grid>

On UWP I can see the Brush, on Android I don't. Do I do it wrong? If yes, the doc might need to be more clearly.

Concern?

• Usage in industry
• Clarification of capabilities
• Getting started with Uno
• Developing with Uno
• Contributing to the Uno project
• Publishing your application
• Support
• Other (please specify):

For which Platform:

• iOS
• Android
• WebAssembly
• macOS
• Skia
  • WPF
  • GTK (Linux)
  • Tizen
• Windows

Anything else we need to know?

[jeromelaban]

/cc @MartinZikmund

[MartinZikmund]

This might be a bug, I will verify

[robloo]

I never got this working on Android myself and always use the fallback color. I assumed I was using it incorrectly.

Somewhat related discussion: #5819.

[jeromelaban]

I can confirm that :

https://github.com/unoplatform/uno/blob/56d3ba98ee6cab055dc8d7c4941ce4494e20e946/src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Media/AcrylicBrushTests/BasicAcrylicBrushTest.xaml

does not currently work on android.

GitHub

uno/BasicAcrylicBrushTest.xaml at 56d3ba98ee6cab055dc8d7c4941ce4494e20e946 · unoplatform/uno

Build Mobile, Desktop and WebAssembly apps with C# and XAML. Today. Open source and professionally supported. - uno/BasicAcrylicBrushTest.xaml at 56d3ba9 · unoplatf...

[TopperDEL]

I hoped this could make it into 3.10. Would love to have this in 3.11. :)

[MartinZikmund]

@TopperDEL I have found out the problem (or rather cause, as it is not technically a bug). Because Android and iOS require additional elements in the visual tree to be able to properly render acrylic effect, the blur "owner" should ideally be an empty element - e.g. Border with no children for example. Because this would break a lot of default styles, we decided to set AlwaysUseFallback to true on non-WASM targets for acrylic. If you know you are using the acrylic brush safely, you can explicitly false this property:

<AcrylicBrush ... AlwaysUseFallback="False" />

I will be updating the documentation with this information, but for now this is the recommended workaround.

In the future this will not be needed, but we will need to introduce a concept of "internal uno elements" in the visual tree, so that the Children collections skip them. Also on Android the new blur APIs in version 12 should significantly simplify the work required to make this working.

[TopperDEL]

Thank @MartinZikmund! This at least is a small workaround I can confirm works. Do you know, though, how this acrylic is done technically? I have an app where I render plenty of images ok a skiasharp-Canvas. And the AcrylicBrush renders those images "unzoomed". They appear to be very small behind the brush. Will upload screenshots later.

[TopperDEL]

[TopperDEL]

Difficult to see - but on the second image above those three little pictures are directly next to the big one. Scrolling it below the AcrylicBrush you can see that thos images have a "white border" - they are rendered smaller below the acrylic brush.

[TopperDEL]

I tried to understand the coding around AcrylicBrush, but I did not really understand what's happening. But I guess my rendering issues must have something to do with MeasuredWidth/Height and maybe with different DPI on Android?

[MartinZikmund]

The current AcrylicBrush implementation on Android is very complex, as there is no simple API like on other platforms. It essentially asks the elements behind the brush to render themselves onto a bitmap, then blurs it and then renders the resulting image. My guess is that in this case the scaling/layout may be the problem, but I don't know exactly in which way. Can you create a separate issue for this specific problem please? I will use this issue for the docs