Bug 27417 - Button.Image behaviors differently on each platform and has extra padding even with no Text
Summary: Button.Image behaviors differently on each platform and has extra padding eve...
Status: VERIFIED FIXED
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms (show other bugs)
Version: 1.3.4
Hardware: PC Mac OS
: Normal normal
Target Milestone: ---
Assignee: E.Z. Hart [MSFT]
URL:
: 24568 (view as bug list)
Depends on:
Blocks:
 
Reported: 2015-02-25 11:15 UTC by John Miller [MSFT]
Modified: 2016-07-18 12:30 UTC (History)
16 users (show)

Tags: ac
Is this bug a regression?: ---
Last known good build:


Attachments
Test Case (186.21 KB, application/zip)
2015-02-25 11:15 UTC, John Miller [MSFT]
Details
Repro of image alignment problem within button (373.64 KB, application/zip)
2016-05-09 23:29 UTC, Mike Smith
Details


Notice (2018-05-24): bugzilla.xamarin.com is now in read-only mode.

Please join us on Visual Studio Developer Community and in the Xamarin and Mono organizations on GitHub to continue tracking issues. Bugzilla will remain available for reference in read-only mode. We will continue to work on open Bugzilla bugs, copy them to the new locations as needed for follow-up, and add the new items under Related Links.

Our sincere thanks to everyone who has contributed on this bug tracker over the years. Thanks also for your understanding as we make these adjustments and improvements for the future.


Please create a new report on Developer Community or GitHub with your current version information, steps to reproduce, and relevant error messages or log files if you are hitting an issue that looks similar to this resolved bug and you do not yet see a matching new report.

Related Links:
Status:
VERIFIED FIXED

Description John Miller [MSFT] 2015-02-25 11:15:04 UTC
Created attachment 10028 [details]
Test Case

**Overview:**

   Text is on different sides of a button on Android vs iOS. There does not seem to be a way to change this. 
   Also, even when Text == "" or null, there is still padding for the Text which is not desirable. See: http://screencast.com/t/qRMtoXg7

**Steps to Reproduce:**

   1. Run the attached sample on Android. 
   2. The padding/spacing/Text is on the Left of a Button.Image. 
   3. Run the attached sample on iOS
   4. The padding/spacing/text is on the Right of a Button.Image.

   1. Set the Text of the Button == null or "" or simply comment out Text =...
   2. Run on either Android or iOS and you will get results similar to the screencast above.

**Actual Results:**

   The placement of the Text/Padding/Spacing is different on Android and iOS
   Even when Text is not set, or set to an Empty value, it still has some padding / space next to the Image.

**Expected Results:**

   Text should be aligned the same way on each platform, or have some way to change it. 
   When Text is not set or is empty, there should be no spacing/padding next to the Image.

**Build Date & Platform:**

   XF 1.3.4
   Android API 19
   iOS 8
Comment 2 NMackay 2015-02-25 12:25:27 UTC
The ability to specify horizontal and vertical alignment for the image within the button would be really useful.
Comment 3 Rajneesh Kumar 2015-02-26 05:01:49 UTC
I have checked this issue and able to reproduce. To reproduce this issue I have followed the steps provided in bug description. 
After deploying the android project on emulator I observed that the padding/spacing/Text is on the Left of a Button.Image. and deploying the iOS project on simulator I observed that the the padding/spacing/text is on the Right of a Button.Image.

Screencast: http://www.screencast.com/t/Jh1HtM0RHH

Application Output: https://gist.github.com/Rajneesh360Logica/a3787ef9412e225f2221
Build Output: https://gist.github.com/Rajneesh360Logica/d207700d8ca2d45f30b6
Ide Logs: https://gist.github.com/Rajneesh360Logica/7a46d3688b50dc2d474c
Device Logs(XAP): https://gist.github.com/Rajneesh360Logica/ae0da1dc627307ac045f
Device Logs(Simulator): https://gist.github.com/Rajneesh360Logica/06fd9d2e39f53abfee30

Environment Info:

Xamarin.Forms Version: 1.3.5.6333-pre1

=== Xamarin Studio ===

Version 5.7.2 (build 7)
Installation UUID: 011d70a5-dede-428b-ab04-ef451c2e539d
Runtime:
	Mono 3.12.0 ((detached/b8f5055)
	GTK+ 2.24.23 (Raleigh theme)

	Package version: 312000077

=== Apple Developer Tools ===

Xcode 6.1 (6604)
Build 6A1052d

=== Xamarin.iOS ===

Version: 8.6.2.22 (Business Edition)
Hash: 862702c
Branch: 
Build date: 2015-02-18 15:19:23-0500

=== Xamarin.Android ===

Version: 4.20.0.28 (Business Edition)
Android SDK: /Users/MM/Desktop/android-sdk-macosx
	Supported Android versions:
		2.1    (API level 7)
		2.2    (API level 8)
		2.3    (API level 10)
		3.1    (API level 12)
		4.0    (API level 14)
		4.0.3  (API level 15)
		4.1    (API level 16)
		4.2    (API level 17)
		4.3    (API level 18)
		4.4    (API level 19)
		4.4.87 (API level 20)
		5.0    (API level 21)
Java SDK: /usr
java version "1.7.0_65"
Java(TM) SE Runtime Environment (build 1.7.0_65-b17)
Java HotSpot(TM) 64-Bit Server VM (build 24.65-b04, mixed mode)

=== Xamarin.Mac ===

Version: 1.13.1.280 (Business Edition)

=== Build Information ===

Release ID: 507020007
Git revision: dcf3f486177d3e625349b51a8f3be807e3fa7712
Build date: 2015-02-24 09:14:27-05
Xamarin addins: ea7c65bb7876e4a876ab365208e94acdf8f330ef

=== Operating System ===

Mac OS X 10.9.5
Darwin MacMini.local 13.4.0 Darwin Kernel Version 13.4.0
    Sun Aug 17 19:50:11 PDT 2014
    root:xnu-2422.115.4~1/RELEASE_X86_64 x86_64
Comment 4 Chris King 2015-03-04 18:06:46 UTC
Agreed that layout should by symmetric across platform and that null/empty string behavior should also be unified however during bug triage we decided to punt this work because there is a reasonable work around. We suggest adding a TapGestureRegcognizer to your StackLayout. In your layout put the content you'd like the user to click on. This should work going forward as the contract we support for layouts is much stronger than the one we support for buttons with text + images.
Comment 5 NMackay 2015-03-05 03:40:35 UTC
Disappointing. You should consider removing the image property from the button then as it's next to useless.
Comment 6 NMackay 2015-03-05 03:47:14 UTC
Also button was useful as you can automatically switch it on and of by using CanExecute and RelayCommand in the viewmodel. This benefit is lost with the workaround you are suggesting. I thought a button with a centered image was basic behaviour, this is an expensive product and when stuff like this gets kicked in to the long grass it certainly doesn't build out confidence in the product. Unhappy enterprise customer.
Comment 7 Jason Smith [MSFT] 2016-03-25 18:26:51 UTC
*** Bug 24568 has been marked as a duplicate of this bug. ***
Comment 8 Samantha Houts [MSFT] 2016-03-31 17:48:09 UTC
This should be fixed in 2.2.0-pre1.
Comment 9 Parmendra Kumar 2016-04-11 17:06:50 UTC
@Samantha, I have checked this issue with Xamarin.Forms 2.2.0-pre2 and I am getting same issue with Android and its working fine with iOS.

Screencast: http://www.screencast.com/t/S009yotpyymH

Hence reopen this issue for Android.

Thanks.
Comment 10 Mike Smith 2016-05-09 23:29:33 UTC
Created attachment 15949 [details]
Repro of image alignment problem within button

Contains a png comparing multiple scenarios and showing the issue: on Android in XF 2.2.0.31, if you have a button with no text, the image is not centered within the button. Seems to work fine on iOS.

Also contains two projects
1) XFImageButton - using version XF 2.1.0.6529
   Shows that a button with an image but no text aligns the button at the left 
   horizontally and centered vertically (on Android).
   For the same scenario on iOS, the image is centered.

2) XFImageButton2 - using version XF 2.2.0.31
   Shows that a button with an image but no text aligns the button centered 
   horizontally, but at the top vertically (on Android).
   For the same scenario on iOS, the image is centered.
Comment 11 E.Z. Hart [MSFT] 2016-05-13 21:28:17 UTC
(In reply to Parmendra Kumar from comment #9)
> @Samantha, I have checked this issue with Xamarin.Forms 2.2.0-pre2 and I am
> getting same issue with Android and its working fine with iOS.
> 
> Screencast: http://www.screencast.com/t/S009yotpyymH
> 
> Hence reopen this issue for Android.
> 
> Thanks.

How large is "dog.jpg" in your example? Does the problem continue if you use larger HeightRequest and WidthRequest values?

The Xamarin FOrms button doesn't automatically scale images to fit inside the button dimensions; they have to be appropriately-sized resources. This is in keeping with the behavior in Android and Windows. iOS *does* attempt to scale the images, but if a user wants that behavior on the other platforms they would need to create a custom renderer. (Also, if you make the button HeightRequest and WidthRequest sufficiently small, iOS will begin to fail as well.)
Comment 12 Samantha Houts [MSFT] 2016-05-24 18:41:32 UTC
*** Bug 41241 has been marked as a duplicate of this bug. ***
Comment 13 mwg@thoughts.net 2016-05-27 15:23:52 UTC
As of Xamarin Forms 2.3.0.38-pre2, the issue with WinPhone button image sizing still exists even if I resize the image to match the stated button width and height in XAML.
Comment 14 E.Z. Hart [MSFT] 2016-05-31 22:55:54 UTC
(In reply to mwg@thoughts.net from comment #13)
> As of Xamarin Forms 2.3.0.38-pre2, the issue with WinPhone button image
> sizing still exists even if I resize the image to match the stated button
> width and height in XAML.

I've been trying to reproduce this issue and haven't had any luck so far. Could you provide a repro project demonstrating the issue you're seeing? Or at least the XAML and button image you're using?

Thanks.
Comment 15 E.Z. Hart [MSFT] 2016-05-31 22:57:24 UTC
(In reply to E.Z. Hart from comment #14)
> (In reply to mwg@thoughts.net from comment #13)
> > As of Xamarin Forms 2.3.0.38-pre2, the issue with WinPhone button image
> > sizing still exists even if I resize the image to match the stated button
> > width and height in XAML.
> 
> I've been trying to reproduce this issue and haven't had any luck so far.
> Could you provide a repro project demonstrating the issue you're seeing? Or
> at least the XAML and button image you're using?
> 
> Thanks.

Sorry, ignore that. I see that you've provided XAML in 41241.
Comment 16 Rui Marinho 2016-06-16 16:41:54 UTC
Should be fixed in 2.3.1-pre1
Comment 17 marko.lazic88 2016-06-21 13:26:09 UTC
Just updated to Xamarin Forms 2.3.0.49 and we are still experiencing this issue on Android: when there is no text image is vertically aligned to top instead center. This started being issue for us when we updated to Xamarin Forms 2.2.
We were hoping that 2.3 update will help. Now it looks like we will have to invest time into reimplementing all image buttons to be Image control with TapGestureRecognizer, as it looks like this will take ages to be fixed.
Comment 18 marko.lazic88 2016-06-24 15:50:21 UTC
Just to add that I tried code Rui was talking about and I can confirm it's working now.
https://github.com/xamarin/Xamarin.Forms/commit/9df4d9c3285952d8ff3ff7940457f44f35a34f81

2.3.1-pre1 is still not available on NuGet, so I copied code pieces into my custom ButtonRenderer.
Comment 19 Morten 2016-06-27 08:22:50 UTC
@Xamarin:
When can we expect to see 2.3.1-pre1 in NuGet and thereby test our App's?
Comment 20 Parmendra Kumar 2016-07-04 14:02:49 UTC
I have checked this issue with Xamarin.Forms 2.3.1-pre2 and observed that If I am using  XAML:

<Button HeightRequest="125" WidthRequest="200" BackgroundColor="Lime" Image="icon.png" Text="Press Me" HorizontalOptions="Center" VerticalOptions="Center"/>

Getting different behaviour on Android and iOS.

Screencast: http://www.screencast.com/t/4YYCGaGqWKoa

Hence reopen this issue.

Please have a look the screencast and let me know If I have missed anything.

Thanks.
Comment 21 E.Z. Hart [MSFT] 2016-07-15 21:22:38 UTC
(In reply to Parmendra Kumar from comment #20)
> I have checked this issue with Xamarin.Forms 2.3.1-pre2 and observed that If
> I am using  XAML:
> 
> <Button HeightRequest="125" WidthRequest="200" BackgroundColor="Lime"
> Image="icon.png" Text="Press Me" HorizontalOptions="Center"
> VerticalOptions="Center"/>
> 
> Getting different behaviour on Android and iOS.
> 
> Screencast: http://www.screencast.com/t/4YYCGaGqWKoa
> 
> Hence reopen this issue.
> 
> Please have a look the screencast and let me know If I have missed anything.
> 
> Thanks.

Can you upload the project you're using? I've been unable to reproduce this issue so far.
Comment 22 Parmendra Kumar 2016-07-18 12:30:23 UTC
@E.Z.Hart,

I have recheck this issue with xamarin.forms 2.3.1-pre2 and I am also not able to reproduce this issue.

Thanks.