Using Android Percent support library example in Xamarin Android

Brief: Apply Percentage(%) dimension in Relative layout and Frame Layout.

In my previous post explained Circular progress bar custom control for file download example using xamarin android, Expandable listview example in xamarin android, Drawing path between two location in google map v2, Material design tab control example in xamarin android and other material design components.

Description:
Event hough it is 8+ years to android initial release,android developers didn't had the direct options to specify the view dimension in percentage. Now along with Android M version android team has released many support library to help developers with fragmentation. And also supported this feature for the android devices with lower OS version (<Marshmallow(6)) using this support library.

 As of now for any android layouts we can't set child view's dimension in percentage. Only two alternate ways to do it is by using either layout_weight or overriding OnMeasure from code behind. Usually using layout_weight option slow downs the UI rendering process and also one can't effectively utilize the available space in side the screen.Now Android percent support library can be used along with android.support.percent.PercentRelativeLayout and android.support.percent.PercentFrameLayout which has the simpler and shorter code which helps in faster rendering.

It has the below 9 layout params:
layout_widthPercent
layout_heightPercent

layout_marginPercent

layout_marginLeftPercent
layout_marginTopPercent
layout_marginRightPercent
layout_marginBottomPercent

layout_marginStartPercent
layout_marginEndPercent

layout_aspectRatio 

Step 1: Add Xamarin android support percent package from Nuget Packages.
Packages->Add Packages,

Step 2: Prepare color, dimension, string and style for the application in separate xml as follows and add to the 
Resources->Values folder.

Color.xml

<?xml version="1.0" encoding="UTF-8" ?>
<resources> 
<item name="font_color" type="color">#000000</item> 
<item name="font_color_subtitle" type="color">#8E8C6D</item>
<item name="screen_bg" type="color" >#F7F9F9</item>
<item name="separatot_color" type="color">#A7AE22</item>
</resources>

Dimens.xml

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
   <dimen name="font_size_one">24dp</dimen>
   <dimen name="font_size_two">18dp</dimen>
</resources>

String.xml

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
<string name="app_name">PercentLib</string>
<string name="textview_one">CodeLog</string>
<string name="textview_two">Log for Applied Concepts</string>
</resources>

Style.xml

<?xml version="1.0" encoding="utf-8" ?>         
<resources>        
  <style name="Theme.Launcher" parent="@android:style/Theme.Material.Light.NoActionBar">     
  </style>   
</resources>   

Step 3: Open Main.axml and edit the layout as follows,

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/screen_bg">
    <TextView
        android:id="@+id/textview_one"
        android:text="@string/textview_one"
        android:textColor="@color/font_color"
        android:textSize="@dimen/font_size_one"
        android:textStyle="bold"
        android:gravity="center"
        android:layout_height="wrap_content"
        app:layout_widthPercent="100%"
        app:layout_marginTopPercent="25%" />
    <TextView
        android:id="@+id/textview_two"
        android:layout_below="@+id/textview_one"
        android:text="@string/textview_two"
        android:textSize="@dimen/font_size_two"
        android:textColor="@color/font_color_subtitle"
        android:textStyle="bold"
        android:gravity="center"
        android:layout_height="wrap_content"
        app:layout_widthPercent="100%"
        app:layout_marginTopPercent="5%" />
     <View
        android:id="@+id/separatorView"
        android:layout_below="@+id/textview_two"
        android:layout_width="match_parent"
        android:background="@color/separatot_color"
        app:layout_heightPercent="1%"
        app:layout_marginPercent="5%" /> 
</android.support.percent.PercentRelativeLayout>

Step 3: Connect the layout file in MainActivity.cs 

using Android.App;
using Android.OS;

namespace PercentLib
{
 [Activity(Label = "Android Percent Library", MainLauncher = true, Icon = "@mipmap/icon")]
 public class MainActivity : Activity
 { 
  protected override void OnCreate(Bundle savedInstanceState)
  {
   RequestWindowFeature(Android.Views.WindowFeatures.NoTitle);
   base.OnCreate(savedInstanceState); 
   SetContentView(Resource.Layout.Main); 
  }
 }
}

Explore complete code at https://github.com/suchithm/XamPercentLib

Final touch : Again one more useful control for android UI control list. Hope this post will be helpful for the new Xamarin android native developers. 
Visit again here for the more exciting stuffs on mobile application development. 
Happy coding :)