Showing posts with label Cross-Platform. Show all posts
Showing posts with label Cross-Platform. Show all posts

Dependency injection in xamarin form using AutoFac

Brief: Here we will learn how to add constructor Dependency Injection in xamarin.form using AutoFac

What is Dependency injection?
Before getting into any definition let us look into a simple example, For xamarin form application
whenever we need to get the native functionalities ( Check internet connectivity, Location,Camera
and any device details etc) Dependency injection is the best way to get the solution.


In below example shown how to launch phone dialer from xamarin form project. 

Platform specific UI changes in Xamarin.Form


Brief: Walkthrough on the options available in xamarin form for changing UI element behaviour for specific platform.

Description: Xamarin form wrapper UI controls when it renders in each platform shows the native look and feel but still there are some quirks that has to be worked around to get the UI perfection.

For example if i add one label in my xamal page and on run in android and iOS shows the below output:
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:CodeLog" x:Class="CodeLog.CodeLogPage">
<RelativeLayout HorizontalOptions="FillAndExpand"  >
    <Label Text="Code Log" 
          FontSize="25" 
          FontFamily="Roboto-Bold" 
          HorizontalTextAlignment="Center" 
   HorizontalOptions="FillAndExpand" />  
</RelativeLayout>
</ContentPage>
In iOS label has been overlapped with toolbar. So alone for iOS we need add To padding(Tool bar height 20px).

This kind of changes for particular platform can be achieved by using the below mentioned approaches without using the Custom renderer.

1.Using a generic class OnPlatform
2.PlatformConfiguration(https://blog.xamarin.com/bringing-platform-specific-functionality-to-xamarin-forms-apps/)
3.Bindable Native Views in Xamal page (https://blog.xamarin.com/adding-bindable-native-views-directly-to-xaml/)
4.customisation with effects(https://blog.xamarin.com/customizing-xamarin-forms-controls-with-effects/)
In this article i will be making use of the OnPlatform for different UI control properties. From Xamarin.Forms version 2.3.4, Device.OnPlatform API has been deprecated with OnPlatform and On APIs.
 <?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:CodeLog" x:Class="CodeLog.CodeLogPage">
<RelativeLayout HorizontalOptions="FillAndExpand"  >
  <RelativeLayout.Margin>
    <OnPlatform x:TypeArguments="Thickness">
      <On Platform="iOS" Value="0,20,0,0" />
      <On Platform="Android, WinPhone, Windows" Value="0,0,0,0" />
    </OnPlatform>
  </RelativeLayout.Margin>
    <Label Text="Code Log" FontSize="25" FontFamily="Roboto-Bold" HorizontalTextAlignment="Center" 
  HorizontalOptions="FillAndExpand" />  
</RelativeLayout>
</ContentPage> 
Platform specific Text color:
 <Label Text="Code Log" FontSize="18" FontAttributes="Bold"  FontFamily="Roboto-Bold" XAlign="Center"  HorizontalTextAlignment="Center" 
 HorizontalOptions="FillAndExpand"
 RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"> 
  <Label.TextColor>
    <OnPlatform x:TypeArguments="Color" iOS="Red" Android="Blue"  />
     </Label.TextColor> 
   </Label>  

Login by google account integration for Xamarin.Android and Xamarin.iOS

Brief: 
Google Account integration to the app, helps for the user authentication using their existing Google account and fetch profile information like email id,name and profile pic etc.
UPDATE: Mar 10,2017: It seems that google has been stopped webview approach for native applications. You can refer the solution provided by the xamarin doc.