|Summary:||Button.Image behaviors differently on each platform and has extra padding even with no Text|
|Product:||Forms||Reporter:||John Miller [MSFT] <john.miller>|
|Component:||Forms||Assignee:||E.Z. Hart [MSFT] <ehart>|
|Severity:||normal||CC:||chris.king, ehart, eric.maupin, erik_renaud, jas, maksim.vasin, marko.lazic88, ml, mwg, norman.mackay, parmendrak, Rajneeshk, rui.marinho, sahou, seth.rosetter, v-smmic|
|Tags:||ac||Is this bug a regression?:||---|
|Last known good build:|
Repro of image alignment problem within button
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: 22.214.171.12433-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: 126.96.36.199 (Business Edition) Hash: 862702c Branch: Build date: 2015-02-18 15:19:23-0500 === Xamarin.Android === Version: 188.8.131.52 (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: 184.108.40.2060 (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 220.127.116.11, 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 18.104.22.16829 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 22.214.171.124 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 firstname.lastname@example.org 2016-05-27 15:23:52 UTC
As of Xamarin Forms 126.96.36.199-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 email@example.com from comment #13) > As of Xamarin Forms 188.8.131.52-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 firstname.lastname@example.org from comment #13) > > As of Xamarin Forms 184.108.40.206-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 220.127.116.11 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.