Padding on ImageButtons works wrong on Android

[matzeteo]

Description

If you add padding to an ImageButton on Android, not only a padding will be set, but also a margin with the size of the padding. The button will therefore become smaller due to the padding. To get the button back to the right size, you then need to set a margin with a negative size.

Steps to Reproduce

1. Create a new Maui App
2. Create a Grid
3. Add a ImageButton to the Grid
4. Set a Padding on the ImageButton
5. Add a Button to the Grid to see the Size difference
6. It should be now like:

 <Grid ColumnDefinitions="*,100,100,*" RowDefinitions="*,100,*">
        <ImageButton Grid.Column="1" Grid.Row="1" Padding="10" BackgroundColor="Aqua" Source="dotnet_bot.png"/>
        <Button Grid.Column="2" Grid.Row="1" Text="testButton" Padding="10" BackgroundColor="Blue" WidthRequest="100" HeightRequest="100"/>
    </Grid>

Link to public reproduction project repository

https://github.com/matzeteo/TestApps.git

Version with bug

8.0 (current)

Last version that worked well

Affected platforms

Android

Affected platform versions

Android 10.0 and up

Did you find any workaround?

Set a margin with the negative value of the padding. But that doesn't work for every Layout structure.

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.

[AswinPG]

#7927

[XamlTest]

Verified this on Visual Studio Enterprise 17.7.0 Preview 2.0. Repro on Android 13.0-API33 with below Project:
TestApp.zip

[jsuarezruiz]

This issue should have been fixed by #14905

[samtun]

We found a workaround for our use case by using Aspect="Center" for the ImageButton which scales correctly for only a simple image inside an ImageButton. Not sure if this is a fix for any use case but I guess it's worth trying.

[awasilik]

I can still observe the issue with newest version of Maui (8.0.10)

[gautambjain]

Wow @samtun - Aspect="Center" works. This is a good workaround. Thanks for sharing.

@jsuarezruiz This issue still exists in Maui 8.0.10.

[FrancescoCarraro]

I'm trying to use it with Maui 8 but Padding works only on Windows, not on Android

[MPoels]

It's still not working on Maui 8.0.21 either. (Aspect="Center" is not working as a workaround)
If I modify it at runtime within the debugger at the emulator it works.

Hopefully this is fixed soon, a very essential one to get your imagebutton look well. Probably fixable by making a customhandler but it should work out of the box.

[BlueRaja]

Aspect="Center" does not workaround the bug. Rather, any change to the button at runtime will cause the XAML hot-reload to refresh the button, which then causes it to render correctly (!?!). However, after restarting the app, it's broken again.

This bug was supposed to be fixed in #14905 but it either didn't work or was regressed. The PR #22298 supposedly fixes it again. This latter PR is tagged as both "fixed in 8.0.60" and "fixed in 9.0.0". The bug still exists in 8.0.80, so clearly it was not fixed in 8.0.60. Hopefully it's actually fixed in 9.0.0.........

[xibeat]

Very sad to see this state of basic controls not working properly in Maui. We are creating an app since last September and failed to ship an MVP because of cosmetic issues like this. Maui is a huge let down at this point. We will wait for .NET 9 at best and then we will never return to Maui. Thanks for this pathetic experience team :-)

[SlavomirDev]

I have found a workaround to solve this problem. When changing the isVisible or Padding property, you can call UpdatePadding() in PlatformView

There are 2 ways to do this:

1. Write your ImageButton inheriting from the original:

public class ImageButtonWithPaddingHack : ImageButton
{
    protected override void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        base.OnPropertyChanged(propertyName);

#if ANDROID
        if (propertyName == nameof(Padding) || propertyName == nameof(IsVisible))
        {
            if (Handler is IImageButtonHandler handler)
            {
                SendUpdate();
                async void SendUpdate()
                {
                    ShapeableImageView s = handler.PlatformView;
                    await Task.Delay(TimeSpan.FromMilliseconds(50));
                    s.UpdatePadding(this);
                }
            }
        }
#endif
    }
}

2. Or do ImageButtonHandler.Mapper.AppendToMapping() and do the same like at first method

[evgenyvalavin]

+1

[evgenyvalavin]

Still not fixed in .NET 9

[BlueRaja]

Yep, confirmed that padding is still broken in the same way in .Net 9 (Microsoft.Maui.Controls 9.0.30)

0 Padding:

5 Padding (Hot Reload, before restarting app. This is the correct behavior):

5 Padding (after restarting app, incorrect behavior):

The style applied in the above images:

      <Style x:Key="styleSearchButton" TargetType="ImageButton">
        <Setter Property="BackgroundColor" Value="LightGray" />
        <Setter Property="BorderColor" Value="Black" />
        <Setter Property="BorderWidth" Value="1" />
        <Setter Property="Margin" Value="0" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="HeightRequest" Value="44" />
        <Setter Property="WidthRequest" Value="44" />
      </Style>

(frustratingly, the border is also not working outside of Hot Reload 😞)

---

CC @mattleibow @jsuarezruiz since you both worked on the PR that was supposed to fix this 😕

[BlueRaja]

Just to update, the workaround posted above doesn't work on .Net 9. Or rather, it works about 25% of the time, seemingly at random. Changing the wait time does not change this.