Tutorials – Abdul Muhaymin Arif

Elegant Tabs and Rg.Popup for the Fancy UI World

This blog post is part of Xamarin UI July by none other than super awesome Steven Thewissen

Don’t forget to read all other posts to sharpen your Xamarin UI Skills

Introduction

Recently our designers gave our Xamarin Mobile team a hard time to implement a fancy UI paradigm with TabbedPage.

The center tab icon should open popup instead of another tab page.

The concept was simple and nowadays seen in many of the mobile application.

Challenges Faced

The challenge was with the implementation using Xamarin Forms because

Xamarin Forms does not have out of the box BottomSheet solution.
TabbedPage Tabs have no customisation or their Clicks could not be overridden without Page Navigation.

My initial research were based on how to customize the TabbedPage tabs to avoid Page Navigation on Specific Tab. But after lot of research the solution was either to completely create a custom Tabbed Control or Custom Renderer the Xamarin Forms TabbedPage.

Solution

I chose the custom renderer route, built a plugin called ElegantTabs to meet my needs.

ElegantTabs helped me to defer the click for specific tab items by applying

plugin:Transforms.DisableLoad="True";

1	plugin:Transforms.DisableLoad="True";

in the TabbedPage Children Tab Items

&lt;TabbedPage.Children>
        &lt;views:ItemsPage Title="Browse" IconImageSource="tab_feed.png"/>
        &lt;!--Empty Content Page to Facilitate Popup Tab-->
        &lt;ContentPage IconImageSource="quick_book.png" Title="Hello" plugin:Transforms.KeepIconColourIntact="True" plugin:Transforms.DisableLoad="True" plugin:Transforms.HideTitle="True"/>
        &lt;views:AboutPage Title="About" IconImageSource="tab_about.png"/
&lt;/TabbedPage.Children>

<TabbedPage.Children>

<views:ItemsPage Title="Browse" IconImageSource="tab_feed.png"/>

<views:AboutPage Title="About" IconImageSource="tab_about.png"/

</TabbedPage.Children>

ElegantTabs helped me to solve other problems like Removing the titles with Tab Icons, give custom selected and unselected icons.

I accessed the Tab Icon click events by subscribing to

Transforms.TabIconClicked += Transforms_TabIconClicked;

1	Transforms.TabIconClicked += Transforms_TabIconClicked;

and in the event handler, I check the tab index for implementing appropriate action of calling PopPage.

async private void Transforms_TabIconClicked(object sender, ElegentTabsEventArgs e)
        {
            if (e.selectedIndex == 1)
            {
                await Navigation.PushPopupAsync(new PopupPage());
            }

        }

async private void Transforms_TabIconClicked(object sender, ElegentTabsEventArgs e)

{

if (e.selectedIndex == 1)

{

await Navigation.PushPopupAsync(new PopupPage());

}

The other challenge was how to introduce the bottom sheet with its own instance based on the center tab click.

Research gave me multiple options like Custom Controls with help of PanGestureRecognizer, SlideOverKit and Rg.Plugins.Popup

I chose Rg.Plugins.Popup because it met my needs of separate ViewModel instance for the BottomSheet.

It also integrates with Xamarin Forms Navigation, so any new Popup is invoked with

Navigation.PushPopupAsync(new PopUpPage());

1	Navigation.PushPopupAsync(new PopUpPage());

Even though the plugin is actually a popup control, not an actual replacement for BottomSheet, with the customization offered by Rg.Plugins.Popup, I was able to emulate the action of bottom sheet.

I used move animation inbuilt with Rg.Plugins.Popup to emulate slide over.

&lt;?xml version="1.0" encoding="utf-8" ?>
&lt;pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
             xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
             x:Class="CustomTabAction.Views.PopupPage">
    &lt;pages:PopupPage.Animation>
        &lt;animations:MoveAnimation  
            PositionIn="Bottom"
            PositionOut="Bottom"
            DurationIn="400"
            DurationOut="300"
            HasBackgroundAnimation="True"/>
    &lt;/pages:PopupPage.Animation>
    &lt;StackLayout VerticalOptions="EndAndExpand" HeightRequest="300" BackgroundColor="Red">
        &lt;Label Text="I am Awesome BottomSheet as Popup"/>
        &lt;Label Text="Welcome to Xamarin.Forms!"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
    &lt;/StackLayout>
&lt;/pages:PopupPage>

<?xml version="1.0" encoding="utf-8" ?>

<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:d="http://xamarin.com/schemas/2014/forms/design"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"

xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"

x:Class="CustomTabAction.Views.PopupPage">

<pages:PopupPage.Animation>

<animations:MoveAnimation

PositionIn="Bottom"

PositionOut="Bottom"

DurationIn="400"

DurationOut="300"

HasBackgroundAnimation="True"/>

</pages:PopupPage.Animation>

<Label Text="Welcome to Xamarin.Forms!"

VerticalOptions="CenterAndExpand"

HorizontalOptions="CenterAndExpand" />

</StackLayout>

</pages:PopupPage>

Summary

This was an interesting challenge for our development team, even though after our initial implementation, there were other approaches for the same problem blogged by the awesome Xamarin Community Members.

I am listing few of them here

Custom Tabs: https://www.sharpnado.com/pure-xamarin-forms-tabs/
BottomSheet: https://www.heyraviteja.com/post/projects/xamarin-bottom-sheet/

Sample Project with our implementation can be found in my GitHub
https://github.com/muhaym/CustomTabAction

ElegantTabs can be found at https://github.com/muhaym/ElegantTabs, with clear documentation about the capabilities offered by ElegantTabs.

Feel free to contact me in case of doubts, clarification & better solutions and enhancements.

Thanks to our company Fantacode allowing us to invest time in this opensource solution.

Custom Switch in Xamarin Forms

Xamarin Forms is a wonderful ecosystem to develop cross platform mobile applications.

Like any platforms, it has limitations too, but yeah there are work arounds. At times you simply can contribute to the awesome “Open Source Xamarin Forms”

Today we will be discussing a small problem I faced in one of our projects, where Xamarin Forms Switch control fires “Toggled” event both when changed by user or programmatically. This was not ideal for our requirements.

So I planned to create a Custom Switch over the Original Switch.

Warning: This work around might not be the best way to do this.

To get started create a Class File, in my case “CustomSwitch”, inherit it from Switch class of Xamarin Forms.

We will create a IsCustomToggled property (which is Bindable Property), to use instead of IsToggled and CustomToggled instead of Toggled event.

Once we reach the constructor, we subscribe to the original Toggled event with our own function.

Also whenever IsCustomToggled is changed in code / program, we will Unsubscribe before setting original IsToggled, and then subscribe back to the event.

The CustomToggled event has CustomToggledEventArgs which contain the new value for switch and an bool “isUser” for indicating whether the action was result of user interaction or code change.

public class CustomToggledEventArgs : EventArgs
    {
        public CustomToggledEventArgs(bool value, bool isuser)
        {
            Value = value;
            IsUser = isuser;
        }

        public bool Value { get; private set; }
        public bool IsUser { get; private set; }
    }


    public class CustomSwitch : Switch
    {
        private bool isUser { get; set; } = true;
        public bool IsCustomToggled
        {
            get => IsToggled;
            set
            {
                //The Order of Code is Very Important, We are removing Event Handler from Original Switch
                this.Toggled -= Handle_Toggled;
                //Setting IsToggled with IsCustomToggled
                IsToggled = value;
                //Invoking Custom Event with is User Property
                CustomToggled?.Invoke(this, new CustomToggledEventArgs(IsToggled, false));
                //Enabling Event again
                this.Toggled += Handle_Toggled;
            }
        }

        public static readonly BindableProperty IsCustomToggledProperty = BindableProperty.Create("IsCustomToggled", typeof(bool), typeof(CustomSwitch), false, BindingMode.TwoWay);

        public event EventHandler<CustomToggledEventArgs> CustomToggled;


        public CustomSwitch()
        {
            //Subscribing to the original event
            this.Toggled += Handle_Toggled;
        }

        private void Handle_Toggled(object sender, ToggledEventArgs e)
        {
            //This even only fires when user is changing switch
            CustomToggled?.Invoke(this, new CustomToggledEventArgs(IsToggled, true));
        }
}

public class CustomToggledEventArgs : EventArgs

{

public CustomToggledEventArgs(bool value, bool isuser)

{

Value = value;

IsUser = isuser;

}

public bool Value { get; private set; }

public bool IsUser { get; private set; }

}

public class CustomSwitch : Switch

{

private bool isUser { get; set; } = true;

public bool IsCustomToggled

{

get => IsToggled;

set

{

//The Order of Code is Very Important, We are removing Event Handler from Original Switch

this.Toggled -= Handle_Toggled;

//Setting IsToggled with IsCustomToggled

IsToggled = value;

//Invoking Custom Event with is User Property

CustomToggled?.Invoke(this, new CustomToggledEventArgs(IsToggled, false));

//Enabling Event again

this.Toggled += Handle_Toggled;

}

public static readonly BindableProperty IsCustomToggledProperty = BindableProperty.Create("IsCustomToggled", typeof(bool), typeof(CustomSwitch), false, BindingMode.TwoWay);

public event EventHandler<CustomToggledEventArgs> CustomToggled;

public CustomSwitch()

{

//Subscribing to the original event

this.Toggled += Handle_Toggled;

}

private void Handle_Toggled(object sender, ToggledEventArgs e)

{

//This even only fires when user is changing switch

CustomToggled?.Invoke(this, new CustomToggledEventArgs(IsToggled, true));

}

Once the Custom Switch is ready, the usage at any place in project is straight forward,

from Xaml

<local:CustomSwitch IsCustomToggled="true" CustomToggled="Handle_Toggled"/>

1	<local:CustomSwitch IsCustomToggled="true" CustomToggled="Handle_Toggled"/>

Samples and CustomSwitch available at GitHub

Hope this helps someone with same issue, in case of any queries do drop a mail to muhaymin at fantacode com where I am available Xamarin Consulting or use the comment section below.

Upgrading PCL Xamarin Forms Project to .NET Standard Like a Boss

Sorry readers, running own company possess great challenges, so didn’t do justice to my blog, and when I get free time I use it for sleeping :D.

Recently I had to port our existing Xamarin.Forms Project from PCL to .NET Standard.

It’s not a simple Xamarin Forms project, for upgrading simple projects, we have various blog post covering those. I am taking about Xamarin.Forms project of very large scale (around 100k Lines of Code, more than 500 Views &ViewModels, multiple custom renderes and around 90+ Nuget Libraries).

So all the libraries we used didn’t have support for .NET Standard. So we have multiple requirements here

1. Upgrade our PCL without affecting Git History

2. Keep using Libraries which don’t have .NET Standard support yet.

3. Make sure that your Resx file works as expected. (This I am still experimenting, will be sharing findings).

So the first step you have to make sure is take a copy of your working project in current state and keep it somewhere safe.

If you use git / version control, create a branch and let’s start tinkering with the project. Steps are pretty straight forward.

1. Unload your PCL project (right click -> unload), and start editing it (right -> click edit), VS Mac users, just use Visual Studio code, it’s straight forward.

2. You have to delete everything in the .csproj and insert

<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
   <TargetFramework>netstandard2.0</TargetFramework>
</PropertyGroup>

<ItemGroup>
   <PackageReference Include="" Version=""/>-->
</ItemGroup>

</Project>

<TargetFramework>netstandard2.0</TargetFramework>

</PropertyGroup>

</ItemGroup>

</Project>

So in .NETStandard approach, there is no packages.config. References included in .csproj So you have to move all the stuff in packages.config to your .csproj.

In my case manually changing the to the new format was time consuming for 90+ Nuget Reference I had, so I wrote a simple C# Console application to make my life easier, sharing it here 😀

3. Delete AssemblyInfo.cs, these informations will be in .csproj and packages.config (also in csproj via PackageReference)

4. Basically Reload the project, you are ready to go. But there is catch if your project contains libraries which don’t have .NetStandard.

So we will need to add FallBack criteria for Nuget restores.

Under Property Group add this line (based on you requirements of which previous PCL profile do you want restores to based on)

<PropertyGroup>
 <TargetFramework>netstandard2.0</TargetFramework>
 <AssetTargetFallback>$(PackageTargetFallback);portable-net45+win8+wpa81</AssetTargetFallback>
</PropertyGroup>

<TargetFramework>netstandard2.0</TargetFramework>

<AssetTargetFallback>$(PackageTargetFallback);portable-net45+win8+wpa81</AssetTargetFallback>

</PropertyGroup>

Other issues you may face is that if you have any references to Microsoft.Bcl.Build nugets in any of your projects (Platform Specific and the new .NET Standard), remove those references.

To avoid possible issues, it is always better to remove the existing PCL reference from Platform Specific Projects, and adding it again.

Points to take care for avoiding potential crashes.

If you are were using Embedded Resources in your PCL project, you have to mark the Build actions again. Otherwise those resources wont load.
If you are using Resx for localization, it’s always best to remove the current file (ofcourse take a backup), add one again with same name and replace contents.

Before Building, clean all bin/obj folders, Rebuild the project with fingers crossed :D.

If you face any issue please don’t hesitate to contact me or I can help you with this, Just mail to muhaymin at fantacode dot com

Do share your experiences.

References:

How to Convert PCL Library to NET Standard and Keep Git History – James Montemagno

Google Place Picker Plugin for Xamarin Projects

It has been long since I have updated my blog, here is a new post for Xamarin community 🙂

You might have come across different needs for selecting location in your apps, and might have resorted of developing Custom Renderer in case of Xamarin.Forms app.

I have developed an open source plugin for Xamarin to make this process easier. If you are interested in helping me out to extend the plugin, you can start contributing here: https://github.com/muhaym/crossplacepicker

One line of code, you will get Google Place Picker in your application.

Let’s get into step:

Step 1: Install Nuget to all projects in solutions (ie. in Shared PCL and Platform Specific projects)

https://www.nuget.org/packages/Fantacode.Plugin.CrossPlacePicker/

Step 2: Sign up for Google Maps Key at https://developers.google.com/places/android-api/signup

Step 3:

Follow Platform setup guide from

https://github.com/muhaym/crossplacepicker#important-permission-and-setup-information

Step 4:

Wherever you require place picker, use

   try
          {
              var result = await CrossPlacePicker.Current.Display();
              if (result != null)
              {
                  await DisplayAlert(result.Name, "Latitude: " + result.Coordinates.Latitude + "\nLongitude: " + result.Coordinates.Longitude, "OK"); // Xamarin Forms 
              }
          }
          catch (Exception ex)
          {
              await DisplayAlert("Error", ex.ToString(), "Oops");
          }

try

{

var result = await CrossPlacePicker.Current.Display();

if (result != null)

{

await DisplayAlert(result.Name, "Latitude: " + result.Coordinates.Latitude + "\nLongitude: " + result.Coordinates.Longitude, "OK"); // Xamarin Forms

}

catch (Exception ex)

{

await DisplayAlert("Error", ex.ToString(), "Oops");

}

If you want to set initial map screen to specific bounds, use

      try
      {
          var southWest = new Coordinates(85, -180);
          var northEast = new Coordinates(-85, 180);
          var CoordinateBounds = new CoordinateBounds(southWest, northEast);
          var result = await CrossPlacePicker.Current.Display(CoordinateBounds);
      }
      catch (Exception ex)
      {
          await DisplayAlert("Error", ex.ToString(), "Oops");
      }

try

{

var southWest = new Coordinates(85, -180);

var northEast = new Coordinates(-85, 180);

var CoordinateBounds = new CoordinateBounds(southWest, northEast);

var result = await CrossPlacePicker.Current.Display(CoordinateBounds);

}

catch (Exception ex)

{

await DisplayAlert("Error", ex.ToString(), "Oops");

}

If you face any issues, comment here, or in issues tracker at github https://github.com/muhaym/crossplacepicker/issues

Sample for this plugin used in and Xamarin.Forms project can be found here

https://github.com/muhaym/CrossPlacePicker/tree/master/samples/PlacePickerForms

Getting Started with Twitter Fabric – Digits in Xamarin.Android

Twitter have some awesome tools for saving developers time and boosting productivity. One such tool is Twitter Fabric. Fabric is a collection of tools like Crashlytics (Crash Reporting), Mobile Analytics, Digits and much more.

Sadly, their official SDK’s are not yet available for Xamarin, still, there is a Xamarin binding which works well. Thanks to Michel Moreira for this binding.

This binding is available as Nuget Package, so getting started with this plugin is so easy.

Steps to integrate Digits to your Xamarin.Android app.

Step 1: Get a Fabric Account (https://fabric.io)

Step 2: Sadly, for getting API Keys, you need Android studio. So make sure you have Android Studio Installed (just for the sake of API keys).

Step 3: In Android Studio, select Plugins-> Browse Repositories -> Search for Fabric Plugin, Install it, Restart the IDE.

Step 4: Start a Blank New Project with the name Intended for your Xamarin.Android project.

Step 5: Click on Fabric Icon in Android Studio, Login to Fabric with your account and select Digits from the kits listed.

Step 6: Create Digits Account, and get the API keys obtained from AndroidManifest.xml file and MainActivity.java.

Step 7: Build the project in Android Studio. Once the app is built from Android Studio, your app gets listed in Fabric Dashboard where you can customize the One Time Password message, and get all they API keys.

Step 8: Enough with Android Studio (make sure you copy the keys from AndroidManifest.xml and MainActivity.java

AndroidManifest.xml

<meta-data
android:name=”io.fabric.ApiKey”
android:value=”your-key-here”
/>

MainActivity.java

    private static final String TWITTER_KEY = "your-key-here";
    private static final String TWITTER_SECRET = "your-key-here";

1 2	private static final String TWITTER_KEY = "your-key-here"; private static final String TWITTER_SECRET = "your-key-here";

Step 9: Back to our awesome Xamarin, either in Visual Studio or Xamarin Studio. (I use VS)

Step 10: Open your project, Right Click your project in Solution Explorer and Select Manage Nuget Package.

Step 11: Search for Digits by Michel Moreira, and Install the package.

Step 12: Open your activity, in which you want Digits Authentication (in my case MainActivity.cs)

Step 13: Paste the TWITTER_KEY and TWITTER_SECRET TO your MainActivity.cs

  // Note: Your consumer key and secret should be obfuscated in your source code before shipping.
        private static string TWITTER_KEY = "your-key-here";
        private static string TWITTER_SECRET = "your-key-here";

// Note: Your consumer key and secret should be obfuscated in your source code before shipping.

private static string TWITTER_KEY = "your-key-here";

private static string TWITTER_SECRET = "your-key-here";

Also, paste the meta data information to AndroidManifest.xml under application node.

<application android:label=”Fabric_Demo”>
<meta-data
android:name=”io.fabric.ApiKey”
android:value=”your-key-here”
/>
</application>

Step 14: Initialize fabric in your OnCreate method.

  TwitterAuthConfig authConfig = new TwitterAuthConfig(TWITTER_KEY, TWITTER_SECRET);
            Fabric.With(this, new TwitterCore(authConfig), new Digits());

1 2	TwitterAuthConfig authConfig = new TwitterAuthConfig(TWITTER_KEY, TWITTER_SECRET); Fabric.With(this, new TwitterCore(authConfig), new Digits());

Step 15: Inherit your MainActivity from IAuthCallBack and implement the interface. (Which will add two methods namely Success and Failure to your Activity)

 public class MainActivity : Activity, IAuthCallback
    {

        public void Failure(DigitsException p0)
        {
            throw new NotImplementedException();
        }

        public void Success(DigitsSession p0, string p1)
        {
            throw new NotImplementedException();
        }
    }

public class MainActivity : Activity, IAuthCallback

{

public void Failure(DigitsException p0)

{

throw new NotImplementedException();

}

public void Success(DigitsSession p0, string p1)

{

throw new NotImplementedException();

}

Step 16: There are multiple ways to authenticate. You can theme your default button or have custom Authentication action from anywhere in the program.

Step 17: For example, you need to authenticate mobile number on a button click, just have Digits.Authenticate(this); in your button click event.

Step 18: If you want to have digits button, add

<com.digits.sdk.android.DigitsAuthButton
android:id=”@+id/auth_button”
android:layout_width=”match_parent”
android:layout_height=”wrap_content” />

in your layout file.

and in your Main Activity, set the callback of the button to the current class.

DigitsAuthButton digitsButton = (DigitsAuthButton)FindViewById(Resource.Id.auth_button);
            digitsButton.Text = "Hey Authenticate Me";
            digitsButton.SetCallback(this);

DigitsAuthButton digitsButton = (DigitsAuthButton)FindViewById(Resource.Id.auth_button);

digitsButton.Text = "Hey Authenticate Me";

digitsButton.SetCallback(this);

Step 19: Handle Success and Failure methods. Success method will be called when your authentication using mobile number if verified and it will have the details in DigitsSession p0 variable or p1 gives the mobile number. Failure method will be called if the number cannot be authenticated or User cancels the process.

public void Failure(DigitsException p0)
        {
            Toast.MakeText(this, "Unable to verify you!", ToastLength.Long).Show();
        }

        public void Success(DigitsSession p0, string p1)
        {
            Toast.MakeText(this, "Number " + p0.PhoneNumber + " verified", ToastLength.Long).Show();
        }

public void Failure(DigitsException p0)

{

Toast.MakeText(this, "Unable to verify you!", ToastLength.Long).Show();

}

public void Success(DigitsSession p0, string p1)

{

Toast.MakeText(this, "Number " + p0.PhoneNumber + " verified", ToastLength.Long).Show();

}

Step 20: Run and see it in action.

Skip Step 1 to 10 by requesting Twitter Fabrics team a Xamairn plugin 🙂 https://twitter.com/fabric

Shout out your suggestions, feedback and doubts in comment section below.

The Fabric Demo Solution can be downloaded from my Github

Credits: Michel Moreira‘s Fabric Binding for Xamarin.

Blindsist – Assisting Visually Impaired People using IBM Bluemix Visual Recognition

This blog post will cover how I developed Blindsist app for Xhacknight.

The app was developed using Xamarin.Forms, targeting 3 major platforms (iOS, Android and Windows Phone) same time.

Blindsist is a simple one page application. Objective of the application is taking a photo using Smartphone, The photo is then uploaded to IBM Bluemix using REST Api. IBM Bluemix returns the data in Json format, which will be parsed and spoken out using Native Text to Speech services.

Open a new Xamarin.Forms Portable Class Project.

Right click on the Project Blindsist (Portable), click Add new Item, Select Forms Xaml Page, name it ScanPage.xaml

Update the XAML content in ScanPage as below

<?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="Blindist.ScanPage">
<Grid BackgroundColor="#dbdef0"
Padding="0"
RowSpacing="0"
ColumnSpacing="0"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="150" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Source="logo.png" Grid.Row="0" BackgroundColor="#101536"/>
<StackLayout Grid.Row="1">
<Button x:Name="ScanButton" HeightRequest="650" Text="Scan the environment" Clicked="ScanButtonClicked" BackgroundColor="#27327e"></Button>
<Image WidthRequest="50" HeightRequest="50"  x:Name="image"/>
</StackLayout>
</Grid>
</ContentPage>

<?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="Blindist.ScanPage">

<Grid BackgroundColor="#dbdef0"

Padding="0"

RowSpacing="0"

ColumnSpacing="0"

VerticalOptions="FillAndExpand">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</StackLayout>

</Grid>

</ContentPage>

What it basically does is create a Button Called “ScanButton” which on click trigger event handler called “ScanButtonClicked”.

Let us look to ScanPage.xaml.cs for C# code!

In the constructor ScanPage() write following Code.

CrossTextToSpeech.Current.Speak("Hello there, I am here to help you, Please click the screen two times with 5 second gap for knowing what is in front of you. Point your Smartphone camera to the direction required.");

1	CrossTextToSpeech.Current.Speak("Hello there, I am here to help you, Please click the screen two times with 5 second gap for knowing what is in front of you. Point your Smartphone camera to the direction required.");

For this to work, we have to add a awesome library developed by JamesMontemagno.

It can be found here https://www.nuget.org/packages/Xam.Plugins.TextToSpeech/

To install, right click project, Manage Nuget Package, Search for Xam.Plugins.TextToSpeech, install it in every individual projects.

So when the app starts up, It starts speaking introduction to visually impaired user.

Next is adding Button Clicked event. Just copy this code in your ScanPage.xaml.cs

async void ScanButtonClicked(object sender, EventArgs args)
{
//will update soon
}

async void ScanButtonClicked(object sender, EventArgs args)

{

//will update soon

}

Now right click your Portable class project, right click, add new item. Add new class file, name it Library.cs

Add following data members.

public string error { get; set; } // to update error in fronted 
public  byte[] imgraw { get; set; } // contains Byte[] format Image to be sent to Watson
public ImageSource img { get; set; }

private readonly string url = "https://gateway.watsonplatform.net/visual-recognition-beta/api";
//Create Bluemix account for Username/password
private readonly string username = "your-user-name-here";
private readonly string password = "your-password-here";

public string error { get; set; } // to update error in fronted

public byte[] imgraw { get; set; } // contains Byte[] format Image to be sent to Watson

public ImageSource img { get; set; }

private readonly string url = "https://gateway.watsonplatform.net/visual-recognition-beta/api";

//Create Bluemix account for Username/password

private readonly string username = "your-user-name-here";

private readonly string password = "your-password-here";

Now add a Member function GetImage() for Getting Image from Camera, The specialty of coming code is that it works in all 3 platforms with single code. Thanks to another library, which is available in Nuget. Search for Xam.Plugin.Media and install in every projects.

public async Task<ImageProcess> GetImage()
{
if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsPickPhotoSupported)
{
ImageProcess ob = new ImageProcess()
{
error = "Oh No ! No Camera.. I can't access your camera",
imgraw = null,
img = null
};
return ob;
}
var file = await CrossMedia.Current.TakePhotoAsync(new Media.Plugin.Abstractions.StoreCameraMediaOptions
{
Directory = "Sample",
Name = "test.jpg"
});
if (file == null)
return null;
var  imgrawtemp = new BinaryReader(file.GetStream()).ReadBytes((int)file.GetStream().Length);
var image = ImageSource.FromStream(() =>
{
var stream = file.GetStream();
file.Dispose();
return stream;
});
ImageProcess temp = new ImageProcess()
{   imgraw = imgrawtemp,
error = "Success",
img = image
};
return temp;
}

public async Task<ImageProcess> GetImage()

{

if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsPickPhotoSupported)

{

ImageProcess ob = new ImageProcess()

{

error = "Oh No ! No Camera.. I can't access your camera",

imgraw = null,

img = null

};

return ob;

}

var file = await CrossMedia.Current.TakePhotoAsync(new Media.Plugin.Abstractions.StoreCameraMediaOptions

{

Directory = "Sample",

Name = "test.jpg"

});

if (file == null)

return null;

var imgrawtemp = new BinaryReader(file.GetStream()).ReadBytes((int)file.GetStream().Length);

var image = ImageSource.FromStream(() =>

{

var stream = file.GetStream();

file.Dispose();

return stream;

});

ImageProcess temp = new ImageProcess()

{ imgraw = imgrawtemp,

error = "Success",

img = image

};

return temp;

}

It will check whether Camera is available, if not available return a null object with error message embedded.

Else it will create a file, takes a photo from Camera and store as byte[] format, if file is OK, it returns the Image, with Image Url, and Image in byte[] format.

Now add a member function ProcessImage() to process the image by sending to Bluemix Watson Service.

public async Task<string> ProcessImage(byte[] img)
{
CrossTextToSpeech.Current.Speak("Please Wait while we process your image!");
try
{
var multiPartContent = new MultipartFormDataContent();
var byteArrayContent = new ByteArrayContent(img);
byteArrayContent.Headers.Add("Content-Type", "image/jpeg");
multiPartContent.Add(byteArrayContent, "img_File", "temp.jpg"); // Embed the Image in byte[] format, with "img_File" format with temp.jpg file name.
using (var client = new HttpClient())
{
CrossTextToSpeech.Current.Speak("Please Wait while we process your image!");
client.DefaultRequestHeaders.Accept.Clear();
client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", GetBase64CredentialString());

var response = await client.PostAsync("https://gateway.watsonplatform.net/visual-recognition-beta/api/v1/tag/recognize", multiPartContent);
CrossTextToSpeech.Current.Speak("Please Wait while we process your image!");
if (response.IsSuccessStatusCode == true)
{
return await HandleResponseAsync(response);
}
else
{
return null;
}

}
}
catch (Exception ex)
{
return null;
}
}
private async Task<string> HandleResponseAsync(HttpResponseMessage response)
{
string bb = await response.Content.ReadAsStringAsync().ConfigureAwait(false);
return bb; // this bb will contain string in json format!
}
private string GetBase64CredentialString()
{
var auth = string.Format("{0}:{1}", username,password);
return Convert.ToBase64String(Encoding.UTF8.GetBytes(auth));
}

public async Task<string> ProcessImage(byte[] img)

{

CrossTextToSpeech.Current.Speak("Please Wait while we process your image!");

try

{

var multiPartContent = new MultipartFormDataContent();

var byteArrayContent = new ByteArrayContent(img);

byteArrayContent.Headers.Add("Content-Type", "image/jpeg");

multiPartContent.Add(byteArrayContent, "img_File", "temp.jpg"); // Embed the Image in byte[] format, with "img_File" format with temp.jpg file name.

using (var client = new HttpClient())

{

CrossTextToSpeech.Current.Speak("Please Wait while we process your image!");

client.DefaultRequestHeaders.Accept.Clear();

client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", GetBase64CredentialString());

var response = await client.PostAsync("https://gateway.watsonplatform.net/visual-recognition-beta/api/v1/tag/recognize", multiPartContent);

CrossTextToSpeech.Current.Speak("Please Wait while we process your image!");

if (response.IsSuccessStatusCode == true)

{

return await HandleResponseAsync(response);

}

else

{

return null;

}

catch (Exception ex)

{

return null;

}

private async Task<string> HandleResponseAsync(HttpResponseMessage response)

{

string bb = await response.Content.ReadAsStringAsync().ConfigureAwait(false);

return bb; // this bb will contain string in json format!

}

private string GetBase64CredentialString()

{

var auth = string.Format("{0}:{1}", username,password);

return Convert.ToBase64String(Encoding.UTF8.GetBytes(auth));

}

Each line is commented for understanding what happens there. Atlast we get string bb with Json formatted data from IBM Bluemix with possible results in order of priority.

Now revisit ScanPage.xaml.cs, We have to add “GetPicture()” function on button click. Copy the following code.

       ImageProcess imgtemp = new ImageProcess(); // creates imgttemp object of ImageProcess Class.
            imgtemp =  await imgtemp.GetImage(); // Gets image from Camera to imgtemp

            if(imgtemp !=null) //if there is something in imgtemp
            {
                if(imgtemp.img!=null) // checks whether the image source is empty!
                {
                    image.Source = imgtemp.img; //Set Image in front end as taken image.
                  
                    string temp = await imgtemp.ProcessImage(img.imgraw); // passes the image in byte[] format to be processed, returns json formatted data of possible outcomes
                    if (temp == null)
                    {
                        CrossTextToSpeech.Current.Speak("I can't connect at the moment, try again!");
                        return;
                    }
//Now temp has json data, we have to parse it

                 }
                else
                {
                    await DisplayAlert("Error", imgtemp.error, "Ok");
                    ScanButton.IsEnabled = true;
                }
            }

ImageProcess imgtemp = new ImageProcess(); // creates imgttemp object of ImageProcess Class.

imgtemp = await imgtemp.GetImage(); // Gets image from Camera to imgtemp

if(imgtemp !=null) //if there is something in imgtemp

{

if(imgtemp.img!=null) // checks whether the image source is empty!

{

image.Source = imgtemp.img; //Set Image in front end as taken image.

string temp = await imgtemp.ProcessImage(img.imgraw); // passes the image in byte[] format to be processed, returns json formatted data of possible outcomes

if (temp == null)

{

CrossTextToSpeech.Current.Speak("I can't connect at the moment, try again!");

return;

}

//Now temp has json data, we have to parse it

}

else

{

await DisplayAlert("Error", imgtemp.error, "Ok");

ScanButton.IsEnabled = true;

}

Now string temp has the json data, we have to parse it to get the results. Add new class file called Classify.cs in PCL project.

Using http://json2csharp.com we can generate class required for parsing json data from IBM Bluemix service.

public class Label
{
public string label_name { get; set; }
public string label_score { get; set; }
}
public class Image
{
public string image_id { get; set; }
public string image_name { get; set; }
public List<Label> labels { get; set; }
}

public class RootObject
{
public List<Image> images { get; set; }
}

public class Label

{

public string label_name { get; set; }

public string label_score { get; set; }

}

public class Image

{

public string image_id { get; set; }

public string image_name { get; set; }

public List<Label> labels { get; set; }

}

public class RootObject

{

public List<Image> images { get; set; }

}

To parse json data, again there is a good library called NetwonSoft.Json, obtain it from Nuget, and add it to all projects.

Now we need a simple function to perform deserializing json data.

Create a static class Operations, and a function GetMatch()

  static public class Operations
{
static public List<Label> GetMatch(string json)
{
var result = JsonConvert.DeserializeObject<RootObject>(json); // Will deserialize the json data to RootObject type
return result.images[0].labels; Return required data to our Button Event Handler.
}

}

static public class Operations

{

static public List<Label> GetMatch(string json)

{

var result = JsonConvert.DeserializeObject<RootObject>(json); // Will deserialize the json data to RootObject type

return result.images[0].labels; Return required data to our Button Event Handler.

}

Now back to ScanPage.xaml.cs, We have temp ready with Json string. Just pass it to Operations.GetMatch() to get the required data back. Add following codes to where you stopped earlier.

var labels =  Blindist1.Operations.GetMatch(temp);
labels = labels.OrderByDescending(x => x.label_score).ToList();

CrossTextToSpeech.Current.Speak("I guess there is " + labels[0].label_name + " in front of you" + "Also there might be " + labels[1].label_name + " in front of you");
ScanButton.IsEnabled = true;

var labels = Blindist1.Operations.GetMatch(temp);

labels = labels.OrderByDescending(x => x.label_score).ToList();

CrossTextToSpeech.Current.Speak("I guess there is " + labels[0].label_name + " in front of you" + "Also there might be " + labels[1].label_name + " in front of you");

ScanButton.IsEnabled = true;

That’s all.. Try Building and running the project. If you face any errors it might be due to not adding Nuget Package mentioned in this post for all projects, or some other errors. Feel free to ask. Together we can build this project to perfection.

The project is in github, https://github.com/muhaym/Xamarin.Forms-Blind-Assist

Feel free to fork, modify, report errors, ask doubts and do whatever you want with the project for the sake of learning.

Please assist me to add Image Compression, because the image upload to Watson Service and getting response back is taking hell of time now.

How to develop a Xamarin.Forms Hello World Application – Xamarin.Forms Series Part 1

Xamarin.Forms a quick Introduction

Today, we will learn how to develop a cross platform Hello World application using Xamarin.Forms.

Xamarin.Forms is not the final word for Cross platform Mobile app development. It is best for getting started with Xamarin, and targetting 3 major platform by sharing 99% Code.

Xamarin.Android or Xamarin.iOS is best for application dealing with high device specific API usage like geolocation, and other such capabilities. Through Xamarin.Android or Xamarin.iOS a C# developer can share the business logic among Projects and design Native UI’s and make use of Device specific capabilities for 3 platforms independently.

Xamarin.Forms on other hand can be used for simple application where there is less Platform specific API usage.

Xamarin.Forms is great for prototyping or making a quick prototype application. And after you’ve done that, you might just find that you can continue using Xamarin.Forms features to build the entire application.

Hello World using Xamarin.Forms

To get started you must have Installed latest version of Xamarin, I am using Visual Studio for developing the Hello World application so that I can target 3 platform. But I wont be showing iOS screenshots because I don’t have an Apple device in my network. But don’t worry, all the implementations we do here will hopefully work in iOS device.

Hello World! The first application you probably create when you learn new language or start using new development tool.

I am not covering everything in detail, like the basic C# concepts, or Xamarin.Forms complete capabilities. This tutorial is intended for Getting started with Xamarin.Forms, everything in detail can be learned from Creating Mobile Apps with Xamarin.Forms Book Preview 2 by Charles Petzold http://www.microsoftvirtualacademy.com/ebooks#9780735697232

Open Visual studio, and Create new project.

Select Xamarin.Forms Portable Class Library Project (PCL). As Xamarin Documentation suggests to go for shared if our Project contains XAML (Extensible Markup language, usually pronounced Zammel), in which we will be developing from now on.

For Xamarin.Forms solutions that contain XAML, we recommend using the Xamarin.Forms Portable Class Library (PCL) template rather than using Shared Asset Projects (SAP). The PCL approach isolates Xamarin.Forms code in a separate DLL, while the SAP shares code directly among the three platforms. Before using XAML with the Shared Asset Project (SAP) template read the details below on enabling experimental XAML support in SAPs.

Create Xamarin.Forms PCL New Project in VS2015.

The Xamarin.Forms Blank template will set up projects for iOS, Android and Windows Phone 8.0. Feel free to delete any project if you are not going to target it.

Right click the solution, click Build Solutions and Run the project in platform of your choice by setting startup project.

Hint for beginners: Startup Project can be changed by right clicking desired Project in Solution, and Selecting “Set as startup project”.

You can see that app is generated as above screenshot.

Now let us dig deep, so we can understand what is happening.

Each Projects in the solution has

iOS – AppDelegate.cs
Android – MainActivity.cs
Windows Phone – MainPage.xaml.cs

These three files are the starting points of respective platforms. All these files contain a line

LoadApplication (new HelloWorld.App ());

1	LoadApplication (new HelloWorld.App ());

Here HelloWorld is our Project Shared, App is the entry point (App.cs) in our PCL Project.

This line invokes the App.cs in the main HelloWorld Project which is where we write code to Share among three platform, which contains

            MainPage = new ContentPage
            {
                Content = new StackLayout
                {
                    VerticalOptions = LayoutOptions.Center,
                    Children = {
                        new Label {
                            XAlign = TextAlignment.Center,
                            Text = "Welcome to Xamarin Forms!"
                        }
                    }
                }
            };

MainPage = new ContentPage

{

Content = new StackLayout

{

VerticalOptions = LayoutOptions.Center,

Children = {

new Label {

XAlign = TextAlignment.Center,

Text = "Welcome to Xamarin Forms!"

}

};

MainPage is the entry point of your app, the first page displayed in app. Why I love programming with help of XAML is that I can write the complex parts like the new ContentPage{ … part in above code in more understandable form.

So We just want to create a new entry page. Right Click HelloWorld (Portable) Project, Click Add new Item.

Select Forms Xaml Page, and give it a name FirstPage.xaml. We will use this project as continuation for next tutorial in the series, navigation of pages in Xamarin.Forms.

In FirstPage.xaml, write the code as below

<?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=”HelloWorld.FirstPage”>
<StackLayout VerticalOptions=”Center” HorizontalOptions=”Center” >
<Label Text=”I love XAML” />
</StackLayout>
</ContentPage>

Now we will compare with the first set of code we wrote (or was there in default in App.cs).

new ContentPage { is a main node <ContentPage> in xml format

new StackLayout { is a child node <StackLayout> under <ContentPage>

new Label { is again a child node <Label> under <StackLayout>.

In my view this is simpler than coding it in C#. You can code in the way you want.

Now we want this FirstPage.xaml loaded in startup. Just a small changes in App.cs will get it done.

MainPage = new FirstPage();

1	MainPage = new FirstPage();

and comment out the rest of part so that you can compare and study.

Now Build the project and run again.

Voila! The new Xaml Page loads in startup.

So in our First Series, we have learned bit more than a simple Hello World app.

We covered

Creating Xaml.Forms New PCL Project.
Building it and Running.
Coding UI in C# and XAML.
Loading any Xamarin.Form Page as MainPage.

Shout out your suggestions, feedbacks and doubts in comment section below. To be frank this is the first time I am writing tutorial, so your suggestions will help me improve my self.

The HelloWorld Solution can be downloaded from my Github (not a good Project to share, still you guys can fork it and start building on it in case of any issues)

https://github.com/muhaym/Xamarin.Forms.HelloWorld

Xamarin Students Offer

Hey Guys,

I have been long since I have blogged. Sorry for being away. I think I am the laziest person in this world.

Today I have something to share with you guys.

Hope you all know about Xamarin, Xamarin is a cross platform mobile application development tool, Which lets you create applications for major platforms such as iOS, Android and Windows Phone. I will be blogging about developing cross platform application using Xamarin. So this tool is sooooooo costly that we students, or startup can’t afford.

Wait, But what if they want you to develop something great? Yea.. Xamarin is free for students, you can apply for a Students license which will let you develop iOS, Android application using Visual Studio or Xamarin Studio.

It is very easy to apply for Xamarin Student License. Just mail your student ID card scanned copy or some document to verify that you are student to student – at – xamarin dot com.

For more details visit http://xamarin.com/student

Sit tight and we will start developing cross platform application from next post onward.