Xamarin.Forms - Fast image loading on Android Using GlideX

In this blog post, you will learn how to Fast image loading on Android using GlideX in Xamarin.Forms.

Introduction

Xamarin.Forms code runs on multiple platforms - each of which has its own filesystem. This means that reading and writing files is most easily done using the native file APIs on each platform. Alternatively, embedded resources are a simpler solution to distribute data files with an app.

GlideX Nuget use to fast image loading on Android.

Prerequisites

• Visual Studio 2017 or later (Windows or Mac)

Setting up a Xamarin.Forms Project

Start by creating a new Xamarin.Forms project. You’ll learn more by going through the steps yourself.

Visual Studio 2019 has more options in the opening window. Clone or check out the code from any repository or, open a project or solution for your computer.

Now, you need to click "Create a new project".

Now, filter by Project Type: Mobile

Choose the Mobile App (Xamarin. forms) project under C# and Mobile.

Name your app. You probably want your project and solution to use the same name as your app. Put it on your preferred location for projects and click "Create".

Now, select the blank app and target platforms - Android, iOS and Windows (UWP).

Subsequently, go to the solution. In there, you get all the files and sources of your project (.NET Standard). Now, select the XAML page and double-click to open the MainPage.Xaml page.

You now have a basic Xamarin.Forms app. Click the Play button to try it out.

NuGet Packages

Now, add the following NuGet packages.

• glidex.forms                

Go to Solution Explorer and select your solution. Right-click and select "Manage NuGet Packages for Solution". Search for "glidex.forms" and add the resultant package. Remember to install it for each project (.NET Standard, Android, iOS).

Note:

Before you initialize Xamarin.Forms in your MainActivity.cs. you must Initialize FormsMaterial.Init()
Setting up the User Interface

MainPage.xaml

Binding Image

MainPage.xaml.cs

Click the "Play" button to try it out.

I hope you have understood how to Fast image loading on Android using GlideX in Xamarin.Forms..

Thanks for reading. Please share your comments and feedback. Happy Coding :)

How to Rotate an Image in Xamarin iOS

In this blog, you will learn how to Rotate an Image in Xamarin iOS, using Xamarin Studio.

Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps (for example, Windows phone, Android, iOS). In Xamarin platform, the code sharing concept is used. In Xamarin Studio, Visual Studio is also available.

Prerequisites

• Xamarin Studio.
• Xcode.

The steps given below are required to be followed in order to Rotate an Image in Xamarin iOS, using Xamarin Studio.

Step 1

Go To Xamarin Studio.

Click New Solution—> select iOS—>select App--> Choose single View App. Afterwards, click Next.

Step 2

In this step, configure your app. Give the app name (Ex:sample), Organization Identifier. Afterwards, click Next.

Step 3

In this step, give your project name (Ex: Sample) and solution name (Ex: Sample). Give the path of your project. Afterwards, click Create.

Step 4

Subsequently, go to the solution. In the solution, get all the files and sources in your project. Now, select Main.storyboard and double click to open Main.storyboard page.

Step 5

After opening the Main.storyboard, you can design this page, as per your desire.

Step 6

Now, go to the toolbox Window. In the toolbox Window, get all the types of the tools and controls. You need to go to the toolbox Window. Now, scroll down and you will see all the tools and controls. You need to drag and drop the Button.
Next You need to align the Button, using constraints.

Step 7

Now, go to the properties Window. Select the Button and give a name (Ex:btnRotate).

Step 8


You need to drag and drop the image View.
Next You need to align the image View, using constraints.

Step 9

In this step, add the Image form your Local system.

Go to Solution—>Resource-->Right click-->Add-->Add Files.

Step 10

Now, you can choose the required image. Click open.

Step 11

Next, choose Copy the Files to the directory. Afterwards, click Ok.

Step 12

Now, go to the properties Window. Select the image View and give a name (Ex:image1) and Choose image.

Step 13

In this step, go to the ViewController.cs page, add the following namespace.

ViewController.cs

using CoreGraphics;

Step 14

In this step, go to the ViewController.cs page. write the code given below.

ViewController.cs

namespace XamariniOSImageRotation
{
 public partial class ViewController : UIViewController
 {
  protected ViewController(IntPtr handle) : base(handle)
  {
   // Note: this .ctor should not contain any initialization logic.
  }

  public override void ViewDidLoad()
  {
   base.ViewDidLoad();
   // Perform any additional setup after loading the view, typically from a nib.
  }

  partial void BtnRotate_TouchUpInside(UIButton sender)
  {
   image1.Transform = CGAffineTransform.MakeRotation((float)Math.PI / 4);
   View.AddSubview(image1);
     
  }

  public override void DidReceiveMemoryWarning()
  {
   base.DidReceiveMemoryWarning();
   // Release any cached data, images, etc that aren't in use.
  }
 }
}

Step 15

Now, go to Run option , choose Debug and the list of iPhone and iPad simulators, which are available. You can choose any one simulator and run it.

Output

After a few seconds, the app will start running on your iPhone simulator.You will see your app working successfully.

You can click the Rotate Image Button, image will rotate successfully.

Summary

This was the process of how to Rotate an Image in Xamarin ios , using Xamarin Studio.

Store Images On App Directory in Xamarin iOS

In this blog, you will learn how to Store Images On App Directory in Xamarin iOS.

Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps (for example, Windows phone, Android, iOS). In Xamarin platform, the code sharing concept is used. In Xamarin Studio, Visual Studio is also available.


Browse Code Here


Prerequisites

• Xamarin Studio.
• Xcode.

The steps given below are required to be followed in order to Store Images On App Directory in Xamarin iOS, using Xamarin Studio.

Step 1

Go To Xamarin Studio.

Click New Solution—> select iOS—>select App--> Choose single View App. Afterwards, click Next.

Step 2

In this step, configure your app. Give the app name (Ex:sample), Organization Identifier. Afterwards, click Next.

Step 3

In this step, give your project name (Ex: Sample) and solution name (Ex: Sample). Give the path of your project. Afterwards, click Create.

Step 4

Subsequently, go to the solution. In the solution, get all the files and sources in your project. Now, select Main.storyboard and double click to open Main.storyboard page.

Step 5

After opening the Main.storyboard, you can design this page, as per your desire.

Step 6

In this step design your app.using storyboard, Toolbox and Properties.

1. Button(btnStore).
2. Label(lblPath)
3. ImageView(imgProfile).

Step 7

In this step, add the Image form your Local system.

Go to Solution—>Resource-->Right click-->Add-->Add Files.Now, you can choose the required Image. Click open.

Next, choose Copy the Files to the directory. Afterwards, click Ok.

Step 8


In this step, go to the ViewController.cs page. write the code given below.

ViewController.cs

using System;
using System.IO;
using Foundation;
using UIKit;

namespace XamariniOSImageStore
{
 public partial class ViewController : UIViewController
 {
  protected ViewController(IntPtr handle) : base(handle)
  {
   // Note: this .ctor should not contain any initialization logic.
  }

  string fileName;
  string folderPath = Environment.GetFolderPath(Environment.SpecialFolder.Personal);
  int Count = 0;
  public override void ViewDidLoad()
  {
   base.ViewDidLoad();
   // Perform any additional setup after loading the view, typically from a nib.
  }

  partial void UIButton8_TouchUpInside(UIButton sender)
  {
   StoreImage("Xamarin.jpg");
  }

  public void StoreImage(string filename)
  {
   if (File.Exists(fileName))
   {
    Count++;
    string filenames = "image" + Count.ToString() + ".jpg";
    fileName = Path.Combine(folderPath, filenames);
   }
   else
   {
    fileName = Path.Combine(folderPath, "image.jpg");
   }

   var img = UIImage.FromFile(filename);

   NSData image = img.AsJPEG();
   NSError err = null;


   image.Save(fileName, false, out err);

   lblPath.Text = "File Path:" + fileName;
   imgProfile.Image = UIImage.FromFile(fileName);

  }



  public override void DidReceiveMemoryWarning()
  {
   base.DidReceiveMemoryWarning();
   // Release any cached data, images, etc that aren't in use.
  }
 }
}

Step 9

Now, go to Run option , choose Debug and the list of iPhone and iPad simulators, which are available. You can choose any one simulator and run it.

Output

After a few seconds, the app will start running on your iPhone simulator.You will see your app working successfully.

You can click Store Button, The image will be Store Successfully.

After, Go to check your App Directory

Summary

This was the process of how to Store Images On App Directory  in Xamarin ios , using Xamarin Studio.

Image Picker in Xamarin iOS

In this article, you will learn how to Pick A Image in Xamarin iOS, using Xamarin Studio.

Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps (for example, Windows phone, Android, iOS). In Xamarin platform, the code sharing concept is used. In Xamarin Studio, Visual Studio is also available.

Download Code Here...

Prerequisites

• Xamarin Studio.
• Xcode.

The steps given below are required to be followed in order to Pick A Image in Xamarin iOS, using Xamarin Studio.

Step 1

Go To Xamarin Studio.

Click New Solution—> select iOS—>select App--> Choose single View App. Afterwards, click Next.

Step 2

In this step, configure your app. Give the app name (Ex:sample), Organization Identifier. Afterwards, click Next.

Step 3

In this step, give your project name (Ex: Sample) and solution name (Ex: Sample). Give the path of your project. Afterwards, click Create.

Step 4

Subsequently, go to the solution. In the solution, get all the files and sources in your project. Now, select Main.storyboard and double click to open Main.storyboard page.

Step 5

After opening the Main.storyboard, you can design this page, as per your desire.

Step 6

Now, go to the Toolbox Window. In the toolbox Window, get all the types of the tools and controls. You need to go to the toolbox Window. Now, scroll down and you will see all the tools and controls. You need to drag and drop the Button.
Next You need to align the Button, using constraints.

Step 7

Now, go to the Properties Window. Select the Button and give a name (Ex:btnPick).

Step 8


You need to drag and drop the ImageView.
Next You need to align the ImageView, using constraints.

Step 9

Now, go to the properties Window. Select the ImageView and give a name (Ex:imgView).

Step 13


In this step, go to the ViewController.cs page. write the code given below.

ViewController.cs

using System;
using Foundation;
using UIKit;

namespace XamarinIosImagePicker
{
 
 public partial class ViewController : UIViewController
 {
  UIImagePickerController picker;
  protected ViewController(IntPtr handle) : base(handle)
  {
   // Note: this .ctor should not contain any initialization logic.
  }

  public override void ViewDidLoad()
  {
   base.ViewDidLoad();
   // Perform any additional setup after loading the view, typically from a nib.
  }

  partial void BtnPick_TouchUpInside(UIButton sender)
  {
   picker = new UIImagePickerController();
   picker.SourceType = UIImagePickerControllerSourceType.PhotoLibrary;
   picker.MediaTypes = UIImagePickerController.AvailableMediaTypes(UIImagePickerControllerSourceType.PhotoLibrary);
   picker.FinishedPickingMedia += Finished;
   picker.Canceled += Canceled;

   PresentViewController(picker, animated: true, completionHandler: null);
  }
  public void Finished(object sender, UIImagePickerMediaPickedEventArgs e)
  {
   bool isImage = false;
   switch (e.Info[UIImagePickerController.MediaType].ToString())
   {
    case "public.image":
     isImage = true;
     break;
    case "public.video":
     break;
   }
   NSUrl referenceURL = e.Info[new NSString("UIImagePickerControllerReferenceUrl")] as NSUrl;
   if (referenceURL != null)
    Console.WriteLine("Url:" + referenceURL.ToString());
   if (isImage)
   {

    UIImage originalImage = e.Info[UIImagePickerController.OriginalImage] as UIImage;
    if (originalImage != null)
    {
     imgView.Image = originalImage;
    }
   }
   else
   { 
    NSUrl mediaURL = e.Info[UIImagePickerController.MediaURL] as NSUrl;
    if (mediaURL != null)
    {
     Console.WriteLine(mediaURL.ToString());
    }
   }
   picker.DismissModalViewController(true);
  }

  void Canceled(object sender, EventArgs e)
  {
   picker.DismissModalViewController(true);
  }

  public override void DidReceiveMemoryWarning()
  {
   base.DidReceiveMemoryWarning();
   // Release any cached data, images, etc that aren't in use.
  }
 }
}

Step 11

In this step Set Photo Library Access Permission in Your app. Go to Solution Explorer—>Info.plist.
Now add Privacy-Photo Library Usage Description. permission.

Step 12

Now, go to Run option , choose Debug and the list of iPhone and iPad simulators, which are available. You can choose any one simulator and run it.

Output

After a few seconds, the app will start running on your iPhone simulator.You will see your app working successfully.

You can click pick Image Button.Your photo Library will be opened.

Now you can choose Image. The image will be display the Image view

Summary

This was the process of how to Pick A Image in Xamarin iOS , using Xamarin Studio.

Please share Comments and Feedback.