Thursday, January 11, 2018

Transform Floating Action Button into Toolbar in Xamarin.Forms

There are numerous popular port of floating action button from native to Xamarin.Forms i will not enumerate it here, Ever wonder how to create one without dependencies to this libraries?  Just by using existing api in Xamarin.Forms you will certainly can.  We will make it more fancier by transforming your FAB into a toolbar with a smooth animation (yes smooth animation without using Lottie library).


Conceptualizing the transform

Now let start by taking an inspiration from the Android material animation technique, There are actually lot of resources to choose from, but i got one from here which pretty awesome. I think there were concepts which i think we can achieve just by using the XF's current api's without the need for third party libraries like Lottie or other popular libraries but of course Lottie is just way too awesome if you have Adobe after effects artists in your team.

Implement the awesomeness

Along the way i have encounter a lot of challenges, The first thing is how to make the animation as smooth, I tend to have done a lot of animation extension only to find out i would only need the existing animation extension from Xamarin.Forms. You will also have to figure out how animation runs in-order and in-parallel and you would also have to consider the in-between trigger of animation which is quiet challenging.

Structure of the Xaml UI

We will take the button on the center of the screen, so regardless on the screen size it will always be on the center.

Then on our backend code we will call InitializeButton inside the OnAppearing method, this will calculate the location of the button in the bottom right part of the screen. I know you wonder why should i need to calculate this when we can do it by having the StackLayout in HorizontalOptions and VerticalOptions set to "End".

The fact of the matter is, I have already tried it and i have figure out it would have less calculation and much simplier to manipulate. Now our bread and butter of the concept lies in the default animation extension provided by Xamarin.Forms.

See it in Action

The sample project is built with .Net Standard and im using Prism + DryIOC but it was not utilized in this presentation. This is also tested in the UWP project and should work fine.

Wrapping Up

The awesomeness are overloading on this sample code, so go ahead and dig deeper. Feel free to tweak this project to suit your need. If you have some questions go shoot me a message here and will gladly answer your questions. If you want more and advance topic you can catch us at this facebook groups  MondPH And Xamdavao.  If you want the full sample source you can check it right here LINK. enjoy coding.

Saturday, November 25, 2017

Creating Draggable Sliding Up Panel in Xamarin Forms

There were library provides a simple way to add a draggable sliding up panel (popularized by Google Music and Google Maps) to your Android application, But implementing across all platforms requires a couple of custom rendering and abstraction. Below are the popular apps that has draggable sliding up panel.

Google Maps


Creating Draggable Sliding Up Panel

Now lets start creating our own draggable sliding up panel in PURE xaml, No need to implement custom renderer or create bindings to an existing Android or iOS libraries (How is that possible?). Its simple we will just gonna need to subscribe to PanGestureRecognizer to the UI element in our case the bottom menu. [Below is the finish product.]

Creating Your Xamarin.Forms project 

Now let us create our new project and name it "SlidingUpPanel", you should be able to create three platforms project and atleast  one PCL project in my case i was created it in Visual Studio 2017 and im using Prism and Autofac.

The Secret in UI magic 

This is basically the classic tricks that we have done before in the previous project like "Custom Popup" you can read in this link. So first we have to wrap our content UI Elements around a GridLayout.

Now inside the GridLayout we will add a StackLayout and we will gonna name it as "QuickMenuPullLayout" this will be the container of the draggable UI (handle).

Now that we have completed the UI elements this time we will gonna wire up the animation in the backend code, we will gonna need extra help of one library that will gonna manage the subscription of events and to avoid memory leaked, We will gonna use Reactive Extension.

Wiring Up 

Just i have said earlier we will gonna need to subscribe to PanGestureRecognizer to the UI element in which is the bottom menu. with the help of the Reactive Extension we end up make it fluid and beautiful.

With the help of PanGestureRecognizer we were able to update the UI element and make it draggable. We can also make the element not go beyond the specified bounds using Math.Max and Math.Min please the sample code below.

Awesome! Let's see it in Action 

Below is the finished product, I hope it will help you to the journey of Xamarin.Form mobile Development. If you want the source code please browse in this link here.

Wrapping Up

Creating Xamarin.forms Application should be a breeze with a tricks that have proven over time, And Xamarin is getting improved all this time and we should utilized it. If you want more and advance topic you can catch us at this facebook groups  MondPH And Xamdavao.  If you want the full sample source you can check it right here LINK. enjoy coding.

Friday, September 29, 2017

Xamarin Forms Validation the easy way

Actually there is no easy way (forgive me), but this article will help you the right way of doing it. The main reason why we need an input validation is to ensure a right data will be entered in to our app and it also provide extra protection because it enforces business rule that no garbage data will be going into the system.

First you need to understand the basics of Behaviors,  it lets you add functionality to your UI controls without having to subclass them, a function like validating input, controlling animation, adding effects and triggering commands and making it reusable component,  In our case we will gonna use it to provide validation for our inputs. If you want to get started and get to know more about Behaviors you can start in this LINK.

Then we also need to add Triggers in our arsenal, Triggers allow your UI element to respond to any property changes in pure xaml (Yes you read it right), We will provide a sample later and dissect how Behaviors and triggers all work together to obtain our goal.


The Behaviors and Triggers are the components that can be made reusable across your app which makes validation and animation a breeze. This will also reduce backends extra checking and "if-else" (f*cking old fashion way).

Creating Your Xamarin.Forms project 

Now let us create our new project and name it "ValidationApp", you should be able to create three platforms project and atleast  one PCL project. We will reuse the default page and create a similar UI like the one below. we will make sure thats our xamarin.forms library are up to date by updating our nuget packages.

Select the Portable Class Library

Dissecting Behavior 

Behaviors is very much like our C# Extension methods but for xaml elements. Now lets methodically cut up a part of Behavior and study how it make sense. In this case i already created a Generic Behaviorbase. Now lets make a simple Behavior which will validate an empty text, Let's name it "EntryValidatorBehavior". It should look like the one below.


Now let us expose a bindable property which will notify our xaml element that the entry is valid, In Our case we will named it "IsValid, it should look like this:

The last but not the least let us subscribe to Entry's TextChanged event to listen when the user has entered a new value. We need to override two methods from a behavior namely "OnAttachedTo" and "OnDetachingFrom" and add a subscribe and unsubscribe to TextChanged event respectively. What you see is a complete version of our EntryValidatorBehavior.

Awesome! Let's see it in Action 

You just have created a "REUSABLE" component which can be used across your app UI "congratulations". Now, Let us use the default page "MainPage" to test our EntryValidatorBehavior, For simplicity sake we will only create one entry and one button, like the one below.

Our objective to make the user input a non-empty code before submitting it, In our case we will disable a button until he inputs a non-empty code.

Dissecting our XAML Code 

This is our XAML Code, i did make it simple as much as possible so we could get  a grasp of it. If you take a look of it it has one Entry and one Button, Everytime the user changes the value of the entry it will change the state of "IsValid" property in which will invoke  triggers which has a binding to its property.

Awesome, now lets try to run our app and see it in action. I you have run the app you will notice that when the entry's value is blank will disable the button or it will enable when the entry has non-empty value.

More Awesome Validation

I have provided a sample code here in this LINK. And i also added a more awesome validation which contain visual indicator that will notify user of the validation message.

Wrapping Up

Creating maintenable and reusable components is breeze when you will follow this patterns, And as your app is getting more complex you will appreciate the awesomeness of this patterns and leave you concentrating on the more important business aspects on your application. If you want more and advance topic you can catch us at this facebook groups  MondPH And Xamdavao.  If you want the full sample source you can check it right here LINK.

Friday, May 19, 2017

Xamarin Forms Hybrid Apps

Why Hybrid Apps?

This has always been a common approach if you do Cordova or PhoneGap and it should do a great job for simple apps that doesn't rely too much platform specific feature, The question is why should we do it in Xamarin? Or what scenario would persuade us to use hybrid approach?

My early days with Xamarin development, That time where there were no reliable Charting library available yet, My team were force to use other alternative and so we decided to use webview with the help of Xlab's HybridWebview library and highcharts javascript library we were able to satisfy our customers need.

Be aware that Xlabs project is no longer maintained. It may NOT work with newer versions of Xamarin.Forms. Though it has done a great job i am not recommending it for use because its somewhat bloated, things that we are not gonna need. Fortunately for us i have found this lightweight HybridWebview library thanks to Ryan Dixon. Now we should be able to do Hybrid apps, Later we will discuss how to setup our web files per each platform, I will provide two examples, First is we will gonna use Highcharts and second we will gonna use Pignoise calendar.

This libraries along with hybridwebview is a better alternative if you cannot afford a pricey libraries from known component vendors (you know them), Though they have done a great job in bringing this native component it is of course your choice.

Creating Your Xamarin.Forms project

Very straightforward just a create a xamarin project and you should be able to create three platforms project atleast and one PCL project. Then you must install Webview nuget package by Ryan Dixon this is a very lightweight library, Make sure to install it on all platforms. In our case we used TabbedPage to showcase each javascript library.

Setup Your Highcharts and Calendar page

Now to setup your highcharts library, keep in mind that the file structures differs per each platform, For Android project, all your html, styles and javascript file must be placed under Assets folder while in iOS project it should be placed under Resources folder and For UWP or WindowsPhone project must be under its root. You can take a look how it should be structured per platform.




Communicate Your Web Page to Backend

If you want to know the details how the communication between your page and your Backend explains so much in this documentation. First thing you should do is to register a callback using RegisterLocalCallBack method (the complete documentation and source code can be found here).
In our case we use the calendar selectdate method(to call backend method).

Register a callback something like this in You Xamarin Code:

Now in your html page you can call a method like this to invoke the callback from Xamarin Code

Additional Note

Here is the minimal reason in my case that if we do hybrid we should do it in Xamarin.Forms rather than Cordova.
  • It’s performant; it compiles down to native.
  • Implements most logic in C# with minimal amounts of native code specific to Android or iOS.
  • You can use most javascript libraries like Jquery, Ember and AngularJs

Wrapping Up

Doing native is not always the silver bullet, there were times we need to do simple stuff to accomplish the needed business needs. But Xamarin.Forms can always do both if it needs to. I hope this article have helped you. If you want the full sample source you can check it right here LINK.

Friday, February 10, 2017

Xamarin Forms Creating Your Own Custom Dialog


Sometimes the existing dialogs from Xamarin.forms does not conforms to what we need like custom dialog which contains some entry and ok cancel button or perhaps a listview inside a dialog that may contain complex UI, existing libraries like in this link and acr dialog doesnt give us what exactly we want in a dialog. And worst we will resort with custom renderers to achieve this.

So i made a custom dialog made purely in xaml without custom renderer. Yes you read it right its pure xaml, you can check the full source code here.

How to use

Just copy the source implementation of PopUpDialogView just like you see in the screen below, you can customize it to conform with your design Or may add another animation transition during show and hide.

Adding PopUpDialogView in your page is simple, you will  need to add a Grid Layout without rows and columns, please take a look at the code below.

- -

Wrapping Up

You can check the full source here, For more about Xamarin.Forms you can always check their site and if you want something fresh you can check their blog. If you have questions please feel free to comment just below this article.

Thursday, February 9, 2017

Xamarin Forms and Azure Easy Tables (as easy as 1 2 3)


Hi Guys, we are about to discuss Xamarin.Forms with Azure Appservices Easy Tables, great front-end apps need great back-end and there is tons of solution or options of doing it, But today we will see how Azure has done a great job making it relatively easy for developers to connect on back-end service without coding it.

Getting Started

Now lets create a Mobile App Service in Azure Portal, Go ahead by clicking "Mobile App" as shown in a screenshot below.

Now click create.

Name your app accordingly, in our case we named it "conversationapp". If you have no existing resource you can create new one or you can use your existing one. Now click create.

Now click "Easy Tables" in order for us to create table.

You will notice that, you will need to configure your easy tables as it has detected that no database has been created for use in your easy tables.

Now click the highlighted link below to create a new database.

Click add to create database.

Now name your database, in our example we name it "conversationdb".

You can select pricing accordingly, in our case we use free since this is for testing purpose. But in production we should use a more appropriate capacity according to our app's scaling need.

We also gonna need to create a server for our db, in our case we use the location "East Asia".

When you are done with creating a database, you are now ready to initialize App Service to use easy tables. Now click Initialize App.

Now go and create a table named "Message", we make it more simple as possible. You can create as many tables depending on your app. We can also set table relationship when it needs to, be aware to editing deleting columns created by Azure tables that might cause an issue with syncing.

And that's it for the App Service.

Creating our app to Connect With Easy Tables

Now that our app service is ready to rock in roll, we can now create our app to connect with easy tables. First create a new Xamarin.Forms project and name it "ConversationApp".

Create model for Message

- -

Creata ViewModel for ConversationPage and name it "ConversationPageViewModel"

- -

Create a new Page and name it ConversationPage.xaml

- -

Now create our AzureService client class to make a sync calls to our easy tables, but before that, we will need to install nuget packages for MobileServiceClient in our PCL and Platform projects as shown below.

Initialize the Azure Mobile Client

Add the Azure Mobile Client SDK initialization code in the platform projects. For iOS, the following code must be added to the FinishedLaunching method of the AppDelegate class:


For Android, add the following to the OnCreate method of your MainActivity:


We will now create AzureDataService , the following are the code

- -

We will now be able to run our Xamarin project, please make sure to make platform project as a startup. It should look like this.

You should be able to see the data you sync in Azure Easy Tables, without a sweat :D

Please check the full source code here.

Wrapping Up

Azure App Services provides more flexibility for mobile development integrating Authentication, Notification and that what makes it a developer centric tool. To learn more of this please check our Xamarin Blog . Please dont hesitate to leave a message if you have clarification or question. Thats all.