Xamarin forms Media Picker

In this post I will show you how to configure your app to use the MediaPecker component from Xlabs.

While xamarin forms comes with many UI classes out of the box, it doesn't have any class for media picking. which means you have to implement this feature yourself in each platform. This will take a lot of coding and good experience in platform specific code for each platform (iOS, Android & Win Phone). Luckily, there is an open source project called "Xlabs forms" which provides many of the missing controls in xamarin forms. We will use the MediaPicker from Xlabs.

The following is a step by step guide using Xamarin studio for mac:

Adding the necessary NuGet packages

* Create a new solution and call it MeidaPickerApp. For the shared code, choose: Use portable class library.

* Add the xlabs-forms nugget package in the PCL & platform specific projects (iOS & Android).

Configuring the iOS project

* Open the AppDelegate class and modify it as follows:

using System;
using System.Collections.Generic;
using System.Linq;
using XLabs.Forms;
using XLabs.Platform.Mvvm;
using XLabs.Ioc;
using XLabs.Platform.Device;
using Foundation;
using UIKit;

namespace MeidaPickerApp.iOS
{
    [Register ("AppDelegate")]
    public partial class AppDelegate : XFormsApplicationDelegate
    {
        public override bool FinishedLaunching (UIApplication app, NSDictionary options)
        {

            this.SetIoc();

            global::Xamarin.Forms.Forms.Init ();

            LoadApplication (new App ());

            return base.FinishedLaunching (app, options);
        }


        private void SetIoc ()
        {

            var resolverContainer = new SimpleContainer ();


            var app = new XFormsAppiOS ();

            app.Init (this);

            resolverContainer.Register<IDevice> (t => AppleDevice.CurrentDevice)

                .Register<IDisplay> (t => t.Resolve<IDevice> ().Display)

                .Register<IXFormsApp> (app)

                .Register<IDependencyContainer> (t => resolverContainer);


            Resolver.SetResolver (resolverContainer.GetResolver ());
        }

    }
}

Configuring the Android project

* Open the MainActivity class and change it as follows:

using System;
using XLabs.Forms;
using XLabs.Platform.Mvvm;
using XLabs.Ioc;
using XLabs.Platform.Device;
using Android.App;
using Android.Content;
using Android.Content.PM;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;



namespace MeidaPickerApp.Droid
{
    [Activity (Label = "MeidaPickerApp.Droid", Icon = "@drawable/icon", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : XFormsApplicationDroid
    {
        protected override void OnCreate (Bundle bundle)
        {
            base.OnCreate (bundle);


            if (!Resolver.IsSet)
            {
                this.SetIoc();
            }
            else
            {
                var app = Resolver.Resolve<IXFormsApp>() as IXFormsApp<XFormsApplicationDroid>;
                if (app != null) app.AppContext = this;
            }

            global::Xamarin.Forms.Forms.Init (this, bundle);

            LoadApplication (new App ());
        }


        private void SetIoc ()
        {

            var resolverContainer = new SimpleContainer ();


            var app = new XFormsAppDroid();

            app.Init (this);

            resolverContainer.Register<IDevice> (t => AndroidDevice.CurrentDevice)

                .Register<IDisplay> (t => t.Resolve<IDevice> ().Display)

                .Register<IXFormsApp> (app)

                .Register<IDependencyContainer> (t => resolverContainer);


            Resolver.SetResolver (resolverContainer.GetResolver ());
        }

    }
}

Using the IMeidaPicker Interface with DependancyService

Now that we have set up the ground, we can start using the MediaPicker.

* Create a new Page With Xaml and name it MainPage

* Change the Xaml code as follows:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MeidaPickerApp.MainPage">
    <StackLayout>
        <StackLayout.Padding>
            <OnPlatform x:TypeArguments="Thickness" iOS="0,20,0,0">
            </OnPlatform>
        </StackLayout.Padding>
        <Button TextColor="Black" Text="Select a photo" Clicked="OnSelectPhotoClicked">
        </Button>
        <Image x:Name="img">
        </Image>
    </StackLayout>
</ContentPage>

* In the MainPage.cs add the event handler:

         async void OnSelectPhotoClicked(object sender , EventArgs e){
        
            try {

                var mediaPicker = DependencyService.Get<IMediaPicker> ();

                var mediaFile = await mediaPicker.SelectPhotoAsync (new CameraMediaStorageOptions ());

                img.Source = ImageSource.FromStream (() => mediaFile.Source);

            } catch (Exception ex) {
            

            }

        }

Good luck.