[Android] Image on Button is not centered with text

[Phenek]

Description

The Image is not in the center on Button when displaying with a text.

Steps to Reproduce

1. Create a Button with an image & text.
2. Set thee HorizontalOption to Fill&Expand.
3. You can see that the image is stick to the left border
4. If you change the position(Top,Right...) of the image it will stick on the position selected, not centered with the text

Expected Behavior

The image have to stick the text on the center.

Actual Behavior

The Image is stick to the border depends of the selected position.
I was searching a way to make a correction on UpdateBitmap
But PropertyName "Image" never pass to UpdateBitmap

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            if (e.PropertyName == Button.TextProperty.PropertyName)
                UpdateBitmap();

            base.OnElementPropertyChanged(sender, e);
        }

Basic Information

• Xamarin.Forms: 3.1.0.697729
  • Android: 8.1

[samhouts]

OnElementPropertChanged only fires when you change a property on an Element after it has been rendered on the screen. When are you setting the Image property? If you're setting it in the constructor, that will be handled by OnElementChanged. If you still need assistance with this issue, please reopen it and attach a small reproduction project. Thank you!

[Phenek]

First thanks for your time,

Forget about the PropertyChanged (my bad, I was expected ImageProperty not TextProperty in sample)

The issue is about the image stick close to the border, depending of Button.ContentLayout.Position
Android:

expected like on iOS:

The image is not centered and it's caused by:

• The SetCompoundDrawablesWithIntrinsicBounds function in ButtonRenderer ligne 216
  when switching position.
• And the default Draw function.

-> Here an implementation in Java of a Custom drawn Android button which aligns left drawable and its text to center.

Regards,

[kingces95]

X:\git\forms\Xamarin.Forms.Controls.Issues\Xamarin.Forms.Controls.Issues.Shared\Bugzilla27417.cs

[vecalion]

Does anyone have a workaround?

[jveltd]

Does anyone have a workaround?

You could use the option of 'padding' on the button itself as a work around?

[vecalion]

Does anyone have a workaround?

You could use the option of 'padding' on the button itself as a work around?

Yep, that's what I've ended up with (I'm lucky to have a fixed width buttons in this project). Thanks

[mattleibow]

So, I have fixed this for Material, and encapsulated all the logic for button layout into a single place: #4967

Right now, all that is needed to get the image in either place is a boolean flag. However, as this is a breaking change for the older renderers, we will probably not be able to change the behaviour.

However, there are some things we can do:

• use material for your buttons
• create a custom renderer and set that flag (if this is an option, then I can add a hook)
• create an android specific (which you can set with styles)

[xamiell]

I'm having this issue on Android but on iOS works fine.
Xamarin.Forms Version: 4.8.0.1560
Seems like an old issue that still happening.

[Huaba93]

@mattleibow could you provide us with sample code of what we need to change in a custom renderer/android specific to fix this?

A fix is absolutely necessary, otherwise the "Image" feature cannot be used.

imho there are some related issues:
#6632
#9227

[xamiell]

Hi!
Any update?

[xamiell]

Any update?

[jasursadikov]

This is still not fixed for such a long period?

[Huaba93]

I don't think this will be resolved yet. I worked around it with my custom button and touch effect.

[jasursadikov]

Probably we will not see any updates on Xamarin, since MAUI is released

[Bohdandn]

Ability to align icon with text is there but it is disabled by default. You can change it with custom renderer:

public class CustomButtonRenderer : Xamarin.Forms.Platform.Android.AppCompat.ButtonRenderer
{
	public CustomButtonRenderer(Context context)
		: base(context)
	{
		typeof(ButtonRenderer).GetField("_buttonLayoutManager", BindingFlags.Instance | BindingFlags.NonPublic)!
			.SetValue(this, new ButtonLayoutManager(this, true, false, false, true));
	}
}

Note second ctor arg of ButtonLayoutManager.