Days ago , I have been trying to add some animation to one of my applications ,and I was fascinated when I found Lottie .

First , what is Lottie ?

Lottie is a library, designed for iOS, Android and React Native, by Airbnb, that allows you to run animations. These animations are defined in a JSON file, containing all the details of colors, shapes, transforms and more. These JSON files are created by Adobe After Effects. However, many designers have been happy to share their works, and you can access pre-built animations at LottieFiles.

Now , for me , what is more amazing than animation , is “Featured animations from community” ! You know why people are awesome ! people contribute to Lottie Files everyday, and just now I have found new awesome animations that I will spend some time after writing this post to see if I may need one of them .

Let’s see what are we going to build ! For our demo application I didn’t only just use Lottie plugin but I also used another plugin called Rg.Plugins.Popup to present the animation in a more beautiful way . now let’s see the

Demo :

Now As you can see , using some animations can make your app look prettier and the user can understand his actions more easily .

How to use Lottie and Popup ? As I said before , I used two plugins , Lottie and Rg.Plugins.Popup . First let’s start by adding Lottie plugin by simply installing it to our solution :

As you can see there is a lot of Lottie plugins , when using xamarin.forms you should focus on Com.Airbnb.Xamarin.Forms.Lottie , here I’m using the latest stable and available version 3.0.0 .

now all you need is to download an animation file , which is a json file from Lottie website :

and after that, you should put that file inside the Assets folder in android project and inside Resources folder in Ios project.

Now , simply , to use one of those files you need to add this bloc of code

<forms:AnimationView x:Name="AnimationView"
  IsPlaying="True"
   Animation="gift-box.json"
  Loop="True"
  AutoPlay="True"
  VerticalOptions="FillAndExpand"
  HorizontalOptions="FillAndExpand" />

You can then control the animation , such as AutoPlay,Loop and IsPlaying so you can control the behavior of your application . Just like that , we have created a simple animation that you can include inside any page inside your project. now , let’s install the Rg.Plugins.Popup :

At this time , the available version is 1.1.5.188 . now after installing the nuget , there is some more work to do . The plugin requires to be initialized. To use a PopupPage inside an application, each platform application must initialize the Rg.Plugins.Popup. This initialization step varies from a platform to another : Android : You need to add ” Rg.Plugins.Popup.Popup.Init(this, bundle);” as in the picture below

On iOS

and like that , we have prepared our environment to use our plugin . now we need to create a PopupPage (You can read more details about it in this link)

<?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"
             xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
             xmlns:forms="clr-namespace:Lottie.Forms;assembly=Lottie.Forms"
                mc:Ignorable="d"
                x:Class="LottieListTest.Views.PopupPageSentEmail">
                <Frame CornerRadius="20" 
                 BackgroundColor="GhostWhite" 
                HorizontalOptions="CenterAndExpand" 
                VerticalOptions="CenterAndExpand"
                 x:Name="AnimationFrame">
                    <StackLayout Spacing="10">
                        <forms:AnimationView x:Name="AnimationView"
                            Animation="91-mailsent.json"
                            Loop="True"
                            AutoPlay="True"
                            WidthRequest="150" HeightRequest="150"
                            VerticalOptions="FillAndExpand"
                            HorizontalOptions="FillAndExpand" />
                       <Label Text="Sent!" HorizontalTextAlignment="Center"/>
                         </StackLayout>
                         </Frame>
                        </pages:PopupPage>

now , after creating the PopupPage , we need to call it from our main page

await PopupNavigation.PushAsync(new PopupPageSentEmail()); We have, at end, created a beautiful simple addition to our project that will make it look better .

You can find the whole project , with the apk file so you can test it on your android phone inside the project on github from this link. Sorry iOS users , I don’t have neither a Mac or Iphone .

https://github.com/achrafbenalaya/xamarinformsaniamtion/blob/master/LottieListTest/Imagesandapk/com.companyname.lottielisttest-Signed.apk

Well , that was helpful , but there was a lot of waste of time even if google asset studio was there for us . I mean , choosing the right picture , using the google asset studio to generate pictures for @1x, @2x, @3x, hdpi, xhdpi, xxhdi , later adding those picture to each folder and If you didn’t like the picture you should generate new ones.

What about one file and one source ? A file that contains a lot of icons that you can access them with a specific code.

In font awesome you can find more than 1500 free icons that you can use .

In this article , we will not only use font awesome , but we are going to use Bootstrap and Material Font Icons too and we are going to see :

How to get the Fonts . How to add the fonts to Xamarin.Forms Project . How to use Xaml to call the fonts . Demo APP with Source Code . How to get the Fonts First we are going to get the font awesome Font , from this Link you can download the zip file , extract it and get the otf file . Next , we are going to download glyph icons file ” glyphicons-halflings-regular.ttf ” from this Link . Finally we get Material design font icons from this Link.

Now if you have those 5 files , like in picture below , you are ready for the next step .

Adding the fonts to Xamarin.Forms Project Now , after getting our files , we need to place them in :

Android: Make sure to paste those file to Assets folder .

UWP : Make sure to paste those file to Assets folder .

iOS : Make sure to paste those file to Resources folder and edit the info.plist file by adding :

Using Xaml to call the fonts Now lets start using our fonts in Xaml , first , we are going to use font awesome . now , let’s get the font that we need to use by copying the code like in the picture below

Now all you have to do is to past that code between &#x and ( just like in the picture below inside Text, and as you can see , you can specify font size too .

Now ,let’s use Material Design , and for that we are going to use a website to get the codes that we are going to use for our font as the past example . You need to upload the Material design file to this website to get the Icons like this :

Last we are going to use Bootstrap , for that I used w3schools to get all the font as you can see .

and simply , you should just use the code you found in there and place it inside Text .

and simply after doing these steps , you can see inside your app icons like in this demo

Even though i was sick ,and after few of tries , I managed to create a video to demonstrate how we can consume the service that we have created and how I created the mobile application .

First , If you want to see what are we building , you can watch the video below .

Now , We are going to see step by step how we can :

How we can use conveyor to Access and test your web application from other devices, such as phones, tablets and computers, locally or over the web. Consume to Web Service Using Postman. Create the xamarin forms project. Create the Dataservice & use Mvvm . Next Steps. Conveyor Usually , when I create a web service , I deploy it to my azure account but this time and for some reasons , I wanted to test it on my localhost , but as you know you can’t just simply access that localhost from another computer or smartphone .

So when I was looking around for some solutions , which one of them was changing the configuration inside the applicationhost.config by changing :

<bindings>
               <binding protocol="http" bindingInformation="*:51889:localhost" />
               <binding protocol="https" bindingInformation="*:44351:localhost" />
       </bindings>
       <bindings>
           <binding protocol="http" bindingInformation="*:51889:localhost" />
           <binding protocol="http" bindingInformation="*:44351:pc-hostname" />
           <binding protocol="http" bindingInformation="*:44351:10.0.1.10" />
       </bindings>

Well this worked once , but after a while for some reasons It did stop and that’s when I found conveyor.

You can download the template from visual studio marketplace from this Link. Now after installing the template you have to restart visual studio (Make sure you run it as Administrator). next , you need to run the solution and clique on :

You can have more details by visiting Conveyor website or by watching their full demo .

After checking that everything working fine and our calls to the Web-Api respond as we want now we can go and create our mobile application .

Xamarin Forms Project So first what is Xamarin forms ? Xamarin.Forms is an open source cross-platform framework from Microsoft for building iOS, Android, & Windows apps with .NET from a single shared codebase. You can read more about xamarin forms from this documentation. now Let’s create our project :

Since we need a menu , cause we have a list of doctors ,gender ,patient ,and to move around between those menus we should use the Master-Detail template . now , after choosing the right template , we will have a solution that contain 3 project ,the main project where we are going to create most of our code , an android project and and ios project as in picture below .

Now , before doing anything , we need to update all the packages installed in our solution by going to manage nuget packages for solution and updating all the nuget packages there and building the project . If we have a successful build , now we can start coding .

As I said ,we are going to use Mvvm . now what is Mvvm ? MVVM is a design pattern used to decouple user-interface (view), data (model), and application logic (view model). Xamarin has built-in support for the MVVM pattern including data binding, making it easy to follow this design pattern so that you can create application code that’s better tested and easier to extend without requiring radical changes . You can read more about it here .

So , now we are going to create four folder , Models ,Views and ViewModels and one for the dataservices. In our Modules folder ,we are going to create our modules , and for demo sample , we are going to use the gender class.

public class Genders
{
    public int GendersId { get; set; }
    public string Name { get; set; }
    public bool IsVisible { get; set; }
    public string Urd { get; set; }

}

Next , Inside our ViewModels folder we are going to create three classes , GendersViewModel , EditGenderViewModel and AddGenderViewModel .

public class GendersViewModel :BaseViewModel
{
     private List<Genders> _genders1;
    private  DataServices _dataServices = new DataServices();
    private bool _isRefresh;


    public List<Genders> _genders
    {
        get { return _genders1;}
        set  {

        _genders1 = value;
        OnPropertyChanged();

            }
        }

    public GendersViewModel()
    {
        GetGenders();
        
    }

    public bool isRefresh
    {
        get {return _isRefresh; }
        set
        {
            _isRefresh = value;
            OnPropertyChanged();
        } 
    }

    public ICommand GetGendersCOmmand => new Command(async () =>

    {
        isRefresh = true;
        await GetGenders();
        isRefresh = false;
    });

    private async Task GetGenders()

    {
        _genders = await _dataServices.GetGenders();

    }

}
    public  class EditGenderViewModel
{
    public Genders TheSelectedGender { get; set; }
    private DataServices _dataServices = new DataServices();

    public ICommand EditGendersCOmmand => new Command(async () =>

    {
        TheSelectedGender.Urd = System.DateTime.Now.ToShortDateString();
        await _dataServices.PutGenders(TheSelectedGender.GendersId, TheSelectedGender);

    });


    public ICommand DeleteGendersCOmmand => new Command(async () =>

    {
       
        await _dataServices.DeleteGenders(TheSelectedGender.GendersId);


    });

}
public class AddGenderViewModel
{
    public Genders TheSelectedGender { get; set; }
    private DataServices _dataServices = new DataServices();

    public AddGenderViewModel()
    {
        TheSelectedGender = new Genders();
    }

    public ICommand sendGendersCOmmand => new Command(async () =>

    {
        TheSelectedGender.Urd = System.DateTime.Now.ToShortDateString();
        await _dataServices.PostGenders(TheSelectedGender);
    });


}


     public class DataServices

     {

   private string GenderUrl = Constants.GenderLink;

  #region Genders


    public async Task<List<Genders>> GetGenders()
    {

        var HttpClient = new HttpClient();
        var Json= await HttpClient.GetStringAsync(GenderUrl);
        var Genders = JsonConvert.DeserializeObject<List<Genders>>(Json);

        return Genders;
    }

    public async Task PostGenders(Genders genders)

    {

        var httpClient = new HttpClient();
        var jsonObject = JsonConvert.SerializeObject(genders);
        StringContent content =new StringContent(jsonObject);
        content.Headers.ContentType= new MediaTypeHeaderValue("application/json");
        var result=  await httpClient.PostAsync(GenderUrl, content);

    }

    public async Task PutGenders(int id,Genders genders)

    {

        var httpClient = new HttpClient();
        var jsonObject = JsonConvert.SerializeObject(genders);
        StringContent content = new StringContent(jsonObject);
        content.Headers.ContentType = new MediaTypeHeaderValue("application/json");
        var result = await httpClient.PutAsync(GenderUrl+id, content);

    }

    public async Task DeleteGenders(int id)
    {

        var HttpClient = new HttpClient();
        var responsen = await HttpClient.DeleteAsync(GenderUrl+id);

       // return Genders;
    }

    #endregion

Now our moduels and viewModules are ready , we need to create our views , by that I mean our pages For our blog , we are going only to create the GenderPage which will contain the list genders .

<ContentPage.BindingContext>

    <viewModels:GendersViewModel></viewModels:GendersViewModel>

</ContentPage.BindingContext>


<ContentPage.ToolbarItems>
    <ToolbarItem Text="Add" Clicked="GoToAddGender" />
</ContentPage.ToolbarItems>


<ListView
x:Name="GenderListView"
HasUnevenRows="True"
ItemsSource="{Binding _genders}"
ItemTapped="GenderListView_OnItemTapped"
IsPullToRefreshEnabled="True"
RefreshCommand="{Binding GetGendersCOmmand}"
IsRefreshing="{Binding isRefresh}">
<ListView.Header>
    <Grid >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
            <Label Text="ID"  TextColor="Red" FontSize="Small" Grid.Column="0" Grid.Row="0"  HorizontalOptions="Center"/>
            <Label Text="Name" TextColor="Red" Grid.Column="1" Grid.Row="0" HorizontalOptions="Center" VerticalOptions="Center"/>
            <Label Text="Urd" TextColor="Red" Grid.Column="2" Grid.Row="0" HorizontalOptions="Center" VerticalOptions="Center"/>
            <Label Text="Visible" TextColor="Red" Grid.Column="3" Grid.Row="0" HorizontalOptions="Center" VerticalOptions="Center"></Label>
        </Grid>
</ListView.Header>
<ListView.ItemTemplate>
    <DataTemplate>
    <ViewCell>


<Grid Padding="10">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />

    </Grid.ColumnDefinitions>
                    <Label Text="{Binding GendersId}" Grid.Column="0" HorizontalOptions="CenterAndExpand" VerticalOptions="Center"></Label>
                    <Label Text="{Binding Name}"  Grid.Column="1"  HorizontalOptions="CenterAndExpand"  VerticalOptions="Center"></Label>
                    <Label Text="{Binding Urd}"  Grid.Column="2"  HorizontalOptions="CenterAndExpand" VerticalOptions="Center"></Label>
                    <CheckBox IsChecked="{Binding IsVisible}" IsEnabled="False"  Grid.Column="3"  HorizontalOptions="CenterAndExpand" VerticalOptions="Center"></CheckBox>

                </Grid>

    </ViewCell>


</DataTemplate>

</ListView.ItemTemplate>
</ListView>

private async void GoToAddGender(object sender, EventArgs e) { await Navigation.PushAsync(new AddGender()); }

    private void GenderListView_OnItemTapped(object sender, ItemTappedEventArgs e)
    {
      var _Genders=  e.Item as Models.Genders;
      Navigation.PushAsync(new EditGenders(_Genders));
    }

Now , as you can see , we are binding to GendersViewModel were can all our commands. And like that we will have this page .

Now, for the next steps , I decided to enhance the ui for the web app and the mobile app too ,hide elements when isvisibe is set to false and use DataGrid for both projects .

I hope this was helpful , you can find the full code inside my github repo .

On July 9, 2019 , Like every app developer that has an application on play store , I received this email from google with a subject : Action required: Update your apps to be 64-bit compliant by August 1, 2019 .

After reading the headline, I was worried a bit , what does this mean ? and why do I need to update it by August 1st 2019 ?

Let’s start by reading and understanding the Email .

Now after reading this email , we understand that From August 1st this year, all new apps and app updates that include native code must have 64-bit versions as well as 32-bit versions when publishing to Google Play.

But , Starting from August 1st, 2021, Google Play won’t serve apps without 64-bit versions on 64-bit capable devices. Users with 64-bit devices simply won’t only see 32-bit apps in Google Play,but also games built with Unity 5.6 or older.

Now how to make sure that our Xamarin.android app is up to date with this change .

First , you need to select your android project and clique properties and then you need to go to android option :

After that you need to clique on Advanced and at least you need to choose : armeabi-v7a and arm64-v8a .

Now as you can see , I’m in Debug mode , you should make sure to do that on release mode too .

Happy 64-bit day

Finally a stable version of Xamarin.Forms 4.1.0 and announcing Xamarin.Essentials 1.2

When It comes to Xamarin I say Believe & Trust & Love and I will tell you exactly why ! Back in the days ,when Xamarin was not yet integrated by Microsoft , and Xamarin was paid ,I was a student and I had a student license to use it , and with all the struggle at that time , and even when my friends said this platform will not succeed , I believed in and kept working with it, following James Montemagno and the community and I trusted them with their work and updates and here we are now in version 4.1.0 with a lot of enhancement and updates .

I remember last year when I just landed my first job and I was still a Microsoft student partner . I was asked to develop a cross platform app for our company , and I remember one day , when I was asked by our team leader to develop a page that contains checkboxs ,yeah ,back when there was no check boxes in xamarin.forms and that was the time when I started a conversation with my friends and also Msp’s Gassen Ben Hadj, Azzouz Njah and Mariem Kharrat about how I could create or integrate that , in less than two days , and finally , I found a solution and I ended up creating a YouTube video about it, you can find the link here .

Now , why I love Xamarin community ? because they heard about our struggle and now added a check box to this new version and I was so exited so I had to test it .

This week marked the launch of Xamarin.Essentials 1.2 too, packed full of new enhancements and optimizations. The main highlight is the new file preview features enabling you to send, view, and email files from a single cross-platform API .

One more thing , if you have doubts about creating beautiful UI using xamarin froms , you may want to check this GitHub repo

You can read more about this here .