Images captured by iOS show up rotated on Android

When you capture a photo with TakePhotoAsync on the iOS, regardless of the SaveMetaData flag or RotateImage, it might be stored rotated. However, you won’t notice it on the iOS itself, or on Windows, since the orientation information is stored in the EXIF metadata of the captured JPEG file.

iOS or Windows show the image correctly because they take into account the EXIF orientation, but the Image view of Xamarin.Forms on Android ignores this flag, thus making the image show up as-is, i.e. rotated.

If you store the image in a different format than JPEG (e.g. PNG) on the iOS, you can also see the image rotated there, because PNG doesn’t have an orientation flag.

If you are using Xamarin.Forms, consider using CachedImage from FFImageLoading instead of the built-in Image view. CachedImage looks at the orientation information on Android, and rotates the image accordingly before rendering it.

However, if you are uploading the image to an ASP.NET core application and need to process it, you can rotate it manually based on the EXIF information. .NET core by itself doesn’t have image manipulation capabilities, but you can install the CoreCompat.System.Drawing NuGet package, which is a port of System.Drawing for .NET core.

First, load the image as an Image object:

var image = Image.FromFile(path);

Then see if it has the rotation value, and rotate accordingly:

if (image.PropertyIdList.Contains(0x112))
{
    int rotationValue = image.GetPropertyItem(0x112).Value[0];
    if (rotationValue == 8) 
        image.RotateFlip(rotateFlipType: RotateFlipType.Rotate270FlipNone);
    else if (rotationValue == 3) 
        image.RotateFlip(rotateFlipType: RotateFlipType.Rotate180FlipNone);
    else if (rotateValue == 6)
        image.RotateFlip(rotateFlipType: RotateFlipType.Rotate90FlipNone);
}

Optionally, you can save the image on the original file:

image.Save(path);

 

Preventing multiple clicks on Xamarin.Forms buttons

I encountered this issue many times where a button was supposed to open a modal page, and tapping on that button repeatedly would open the modal page several times.

To prevent this, you can create a simple custom renderer for the Button class, and put a timer which disables the button for a short period of time after each successful tap:

#if __ANDROID__
    using Xamarin.Forms.Platform.Android;
    using Android.Views;
#elif __IOS__
    using Xamarin.Forms.Platform.iOS;
    using UIKit;
#endif

using Xamarin.Forms;
using System.Threading.Tasks;
using Neat.Renderers;

[assembly: ExportRenderer(typeof(Button), typeof(BlockingButtonRenderer))]
namespace Neat.Renderers
{
    public class BlockingButtonRenderer : ButtonRenderer
    {
        bool _isPressed = false;
        
#if __ANDROID__
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
        {
            base.OnElementChanged(e);
            
            var control = Control as Android.Widget.Button;
            control?.SetOnClickListener(ButtonClickListener.Instance.Value);
        }
        
        public async void SendBlockingClicked()
        {
            if (_isPressed) return;
            _isPressed = true;
            ((IButtonController)Element).SendClicked();
            await Task.Delay(500);
            _isPressed = false;
        }
        
        class ButtonClickListener : Java.Lang.Object, IOnClickListener
        {
            public static readonly Lazy<ButtonClickListener> Instance =
                new Lazy<ButtonClickListener>(() =>
                    new ButtonClickListener());
                    
            public void OnClick(Android.Views.View view)
            {
                var renderer = view.Tag as ButtonRenderer;
                (renderer as BlockingButtonRenderer)?.SendBlockingClicked();
            }
        }
#elif __IOS__
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
        {
            base.OnElementChanged(e);
            
            var control = Control as UIButton;
            if (control != null)
            {
                control.TouchUpInside += async (sender, ev) =>
                {
                    if (_isPressed) return;
                    _isPressed = true;
                    var oldInteractionFlag = control.UserInteractionEnabled;
                    control.UserInteractionEnabled = false;
                    await Task.Delay(500);
                    control.UserInteractionEnabled = oldInteractionFlag;
                    _isPressed = false;
                };
            }
        }
#endif
    }
}