Xamarin Form OTP Control

OTP Entry Control For Xamarin Forms

Otp Entry Control - is a cross-platform plugin for Xamairn Forms that allows you to enter specified length otp.

How To Use

Available on Nuget : https://www.nuget.org/packages/OTPEntryControl/1.0.4
Install this Plugin in your Xamarin Form Project.

Github : https://github.com/mistrypragnesh40/OTPControl

Youtube : https://youtu.be/pdA45xF2G_U

Implementation Example

namespace : xmlns:otpcontrol="clr-namespace:OTPControl;assembly=OTPControl"

<StackLayout>
    <Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
        <Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
    </Frame>
    <Label Text="Start developing now" FontSize="Title" Padding="30,10,30,10"/>
   
    <otpcontrol:CustomOtpControl FillBorderColor="Orange" EmptyBorderColor="Gray"   OtpLength="4" HorizontalOptions="Center"  />
</StackLayout>

Property

1. OtpLength: You can set the number like 4 digit or 6 digit.
2. FillBorderColor: Entered Otp Tint Color.
3. EmptyBorderColor: Default Border Color.
4. SelectedOtp: This Property will return Entered Otp in Text Format.

Xamain Form Image Resizer

Xamarin Form Project

Create the interface in your Xamarin Form Project.

using System;
using System.Collections.Generic;
using System.IO;
using System.Text;
 
namespace CollegeApp.Services.Interfaces
{
    public interface IImageCompression
    {
        byte[] ResizeImage(byte[] imageData, float width, float height);
    }
}
 

Now Create a Dependency Service in your Xamairn Android & Xamarin iOS Project.

Xamarin Android Project (ImageCompression.cs)

using Android.Graphics;
using CollegeApp.Droid.Services;
using CollegeApp.Services.Interfaces;
using System.IO;
using Xamarin.Forms;
 
[assembly: Dependency(typeof(ImageCompression))]
namespace CollegeApp.Droid.Services
{
    public class ImageCompression : IImageCompression
    {
        public byte[] ResizeImage(byte[] imageData, float width, float height)
        {
            Bitmap originalImage = BitmapFactory.DecodeByteArray(imageData, 0, imageData.Length);
            Bitmap resizedImage = Bitmap.CreateScaledBitmap(originalImage, (int)width, (int)height, false);
            using (MemoryStream ms = new MemoryStream())
            {
                resizedImage.Compress(Bitmap.CompressFormat.Jpeg,80, ms);
                return ms.ToArray();
            }
        }
    }
}

Xamarin iOS Project (ImageCompression.cs)

using CollegeApp.iOS.Services;
using CollegeApp.Services.Interfaces;
using CoreGraphics;
using Foundation;
using System;
using System.Collections.Generic;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Text;
using UIKit;
using Xamarin.Forms;
 
[assembly: Dependency(typeof(ImageCompression))]
namespace CollegeApp.iOS.Services
{
    public class ImageCompression : IImageCompression
    {
        //public Stream CompressImage(string filePath)
        //{
        //    UIImage image = UIImage.FromFile(filePath);
        //    if (image == null)
        //    {
        //        return null;
        //    }
        //    return image.AsJPEG(0.0f).AsStream();
        //}
 
        public byte[] ResizeImage(byte[] imageData, float width, float height)
        {
            UIImage originalImage = ImageFromByteArray(imageData);
            UIImageOrientation orientation = originalImage.Orientation;
 
            //create a 24bit RGB image
            using (CGBitmapContext context = new CGBitmapContext(IntPtr.Zero,
                                                 (int)width, (int)height, 8,
                                                 4 * (int)width, CGColorSpace.CreateDeviceRGB(),
                                                 CGImageAlphaInfo.PremultipliedFirst))
            {
 
                RectangleF imageRect = new RectangleF(0, 0, width, height);
 
                // draw the image
                context.DrawImage(imageRect, originalImage.CGImage);
 
                UIKit.UIImage resizedImage = UIKit.UIImage.FromImage(context.ToImage(), 0, orientation);
 
                // save the image as a jpeg
                return resizedImage.AsJPEG().ToArray();
            }
        }
        public static UIKit.UIImage ImageFromByteArray(byte[] data)
        {
            if (data == null)
            {
                return null;
            }
 
            UIKit.UIImage image;
            try
            {
                image = new UIKit.UIImage(Foundation.NSData.FromArray(data));
            }
            catch (Exception e)
            {
                Console.WriteLine("Image load failed: " + e.Message);
                return null;
            }
            return image;
        }
    }
}

How to Use (Xamairn Form Project)

For example, if you use Xamarin Essential Media Picker.

var file = await MediaPicker.PickPhotoAsync();
 
byte[] imageData;
var originalStream = await file.OpenReadAsync();
using (MemoryStream ms = new MemoryStream())
{
    originalStream.CopyTo(ms);
    imageData = ms.ToArray();
}
 
var resizedImage = DependencyService.Get<IImageCompression>().ResizeImage(imageData, 400, 400);