ImageButton with CornerRadius is not calculated as expected on Android when Padding exists

[YiannisBourkelis]

Description

Trying to create a circular ImageButton, I am setting the CornerRadius half the width of the control, but on Android it does not appear as expected. If I remove the Padding it works, but it should also work with padding.

On iOS, MacCatalyst and Windows it works fine, however the text inside the ImageButton is not aligned exactly at the center of the ImageButton and appears a little blurry.

This is the code that creates the ImageButton

            <ImageButton
                x:Name="AddItemImageButton"
                HorizontalOptions="End"
                VerticalOptions="End"
                CornerRadius="25"
                WidthRequest="50"
                HeightRequest="50"
                BackgroundColor="DodgerBlue"
                Padding="8,8,8,8" >                
                <ImageButton.Source>
                    <FontImageSource FontFamily="OpenSansRegular" Color="White"  Glyph="+" />
                </ImageButton.Source>                           
            </ImageButton>

Check the reproduction project.

Steps to Reproduce

Just run the reproduction project targeting Android. The ImageButton will not appear as a circle.

Link to public reproduction project repository

https://github.com/YiannisBourkelis/maui_issues/tree/main/src/CornerRadiusIssue

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android, Windows, macOS

Affected platform versions

Android Emulator - Pixel 5 - Api 33

Did you find any workaround?

No.

Relevant log output

No response

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[PureWeen]

@YiannisBourkelis can you attach a screen shot please?

[YiannisBourkelis]

@PureWeen Yes. It is the reproducible project running on android on the left and iOS on the right.

[MhAllan]

any updates on this basic thing? It was right on XF!!

[thomaskaelin]

I also noticed this issue while migrating an Xamarin.Forms-app to .NET MAUI. Any news on this?

[XamlTest]

Verified this on Visual Studio Enterprise 17.7.0 Preview 1.0 with provided project:
CornerRadiusIssue.zip

iOS 16.4: Can repro the text inside the ImageButton is not aligned exactly at the center of the ImageButton issue.

Android 13.0-API33: Can repro the CornerRadius issue.

Windows 11: Seems work as expected.

[jsuarezruiz]

Hi @YiannisBourkelis,

Have done some tests with the latest version and cannot reproduce the issue:

Could you try again with the latest version and share your feedback?. Thanks in advance.

[ghost]

Hi @YiannisBourkelis. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

[thomaskaelin]

@jsuarezruiz I ran the example posted by @XamlTest with my installation of Visual Studio Professional 2022 (Version 17.6.2) on an Android Device (Android 11 - API 30). I was able to reproduce the CornerRadius-issue with the provided code.

[davidortinau]

Looks correct in .NET 8 Preview 6. Not sure when this was fixed. Tested on API 33 and 32.

On older versions, you can work around this with math. On Android adjust the w/h by 16 to offset the padding of 8.

<ImageButton
    x:Name="AddItemImageButton"
    HorizontalOptions="End"
    VerticalOptions="End"
    CornerRadius="25"
    WidthRequest="{OnPlatform 50, Android=66}"
    HeightRequest="{OnPlatform 50, Android=66}"
    BackgroundColor="DodgerBlue"
    Padding="8,8,8,8" >                
    <ImageButton.Source>
        <FontImageSource FontFamily="OpenSansRegular" Color="White"  Glyph="+" />
    </ImageButton.Source>                           
</ImageButton>