Skip to content

Maui Android parent view inappropriately creates clipping mask when its opacity is less than 1, cropping out children #22038

@jonmdev

Description

@jonmdev

Description

If you (1) set up a simple hierarchy with an AbsoluteLayout as parent, (2) add some random views as its children, (3) set some small dimensions of the AbsoluteLayout, then (4) set the AbsoluteLayout's opacity <1, behavior is abnormal in Android:

  • Windows: Still can see all children at reduced opacity (expected behavior):
    android opacity bug windows

  • Android: AbsoluteLayout develops a clipping mask and crops out all children to dimensions of AbsoluteLayout setting (wrong behavior):
    android opacity bug android

In the example above we have a plain AbsoluteLayout with a red Border, cat Image, and simple "HELLO" Label as children.

In Windows we see all children fully at reduced opacity as expected.

In Android everything gets clipped out to the sliver of the AbsoluteLayout's small dimensions (wrong behavior).

I am currently unable to test iOS so don't know what that would do.

Steps to Reproduce

All code is in App.xaml.cs (otherwise using default Maui project):

namespace AndroidOpacityBug {
    public partial class App : Application {
        public App() {

            bool SET_TRUE_TO_SEE_ANDROID_BUG = true;

            //=============
            //BUG:
            //=============
            //in Windows whether you set the above bool to true or false you will see the red border, label, and cat with reduced opacity
            //in Android if you set the above bool to true everything gets clipped out by the absolutelayout's size setting and you see nothing

            ContentPage mainPage = new();
            this.MainPage = mainPage;

            AbsoluteLayout absDummy = new();
            mainPage.Content = absDummy;

            AbsoluteLayout absRoot = new();

            if (SET_TRUE_TO_SEE_ANDROID_BUG) {
                absRoot.WidthRequest = 1;
                absRoot.HeightRequest = 50;
            }
            
            absDummy.Add(absRoot);

            Border border = new();
            border.BackgroundColor = Colors.Red;
            border.WidthRequest = border.HeightRequest = 200;
            absRoot.Add(border);

            Label label = new();
            label.Text = "HELLO";
            absRoot.Add(label);

            Image image = new();
            image.Source = ImageSource.FromResource( "AndroidOpacityBug.Resources.Images.cat.jpg");
            image.WidthRequest = image.HeightRequest = 100;
            absRoot.Add(image);
            absRoot.Opacity = 0.4;

        }
    }
}

Link to public reproduction project repository

https://github.com/jonmdev/AndroidOpacityBug

Version with bug

8.0.3 GA

Is this a regression from previous behavior?

No, this is something new

Affected platforms

Android

Metadata

Metadata

Assignees

No one assigned

    Labels

    area-drawingShapes, Borders, Shadows, Graphics, BoxView, custom drawingpartner/syncfusionIssues / PR's with Syncfusion collaborationplatform/androids/triagedIssue has been revieweds/verifiedVerified / Reproducible Issue ready for Engineering Triaget/bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions