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>  

ResolveLibraryProjectImport task failed unexpectedly in release mode in xamarin

This above mentioned error i got during my xamarin form project deployment in release mode. 
In my solution i have more then one project and this error indicates that linking between these project has been broken. If you are facing the same issue, then here i have listed out few scenarios that could help you to solve this issue:


1. Select the project in which error is pointing and Check the reference of other project and package. Reference with yellow triangle icon shows the broken reference. just delete it and re-add.
For any other project reference included in the current project, delete the current project reference and add the new one from release folder of that respective project.
 Or
Open "Configuration manager"



Error retrieving parent for item: No resource found that matches the given name...

This is the one of the frequent error we will get during Xamarin android/Form development. Here i have posted the resolution steps for this error in both windows and Mac machines:

Xamarin Form Frame outline color display issue in android

This is the quick glance on the issue i have faced during the use of Frame control in Xamarin form project and sharing here hoping that may helpful to somebody with the same issue.

Using Xamarin form Frame controls shows some strange behaviour in android platform where as it shows elegant look in iOS.
We can notice this difference in below screenshot.[Nexus S (KitKat) and Simulator iPhone6 iOS9.3]



     

Circular progress bar example using xamarin android

In brief: Here you can check the implementation of custom android widget called circular progress bar in steps using xamarin android.

50000 Visits and Counting...

Thanks for your visits and overwhelming response...


It is always a special occasion to cross a new landmark. Today our blog has been received 50,000+ visits all over the globe from 125+ countries. Your visits, interaction to post by comments, suggestion by email and hangout messages made this blog alive and keep running.

ExpandableListView in xamarin android

Expandable List View is basically used to display the list of data with respective categories. Which has the feature to expand and collapse the items in a category when user touches category title.


Material design tab in xamarin android

Introduction: Here I'm adding one more UI component to Android Material Design introduction series i.e. Tab control using android material design library in xamarin android. 

Xamarin android material design Snackbar customization

Another beautiful component introduced with android material design is Snackbar. Which has the features similar like a Toast message in additional with interaction capability, displays at the bottom of the screen.


Navigation Drawer using material design in Xamarin.Android.

In Brief:  Here you can see the Navigation drawer implementation in Xamarin android with simple steps and reduced code using beautiful material design.




Push notification using Google Cloud Messaging(GCM) in Xamarin.Android

In Brief:
 This Post is regarding the implementation of Remote notification or Push notification using Google cloud messaging.



Custom AlertDialog example in Xamarin.Android

In Brief:
In this post i will discuss about one of the basic and most widely used component in an android development called customized alert dialog. There are several way of implementing it, here i will show custom alertDialog creation using "DialogFragment method" and "Layout inflation to AlertDialog".