Xamarin Forms Cinemax UI Design[Tutorial 6]

Step1: App.Xaml Will Look like:

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="BeutifulUI.App">
<Application.Resources>
        <!-- This are the  Application resource dictionary  -->
        <ResourceDictionary>
            <!--  colors  -->
            <Color x:Key="HeaderTextColor">#555555</Color> <!--Davy grey-->
            <Color x:Key="BodyTextColor">#bababa</Color>   <!--Lightgray-->
           

            <!--  Customized font  -->
            <OnPlatform x:Key="RegularFontFamily" x:TypeArguments="x:String">
                <On Platform="iOS">HelveticaNeue</On>
                <On Platform="Android">sans-serif</On>
            </OnPlatform>

            <OnPlatform x:Key="LightFontFamily" x:TypeArguments="x:String">
                <On Platform="iOS">HelveticaNeue-Light</On>
                <On Platform="Android">sans-serif-light</On>
            </OnPlatform>

            <OnPlatform x:Key="MediumFontFamily" x:TypeArguments="x:String">
                <On Platform="iOS">HelveticaNeue-Medium</On>
                <On Platform="Android">sans-serif-medium</On>
            </OnPlatform>

            <!--  font sizes  -->
            <x:Double x:Key="TitleFont">20</x:Double>
            <x:Double x:Key="BodyFont">18</x:Double>
            <x:Double x:Key="TagTextFont">18</x:Double>
            <x:Double x:Key="StatsNumberFont">20</x:Double>
            <x:Double x:Key="StatsCaptionFont">16</x:Double>
          

            <!--  styles  -->
            <Style x:Key="ProfileNameLabel" TargetType="Label">
                <Setter Property="TextColor" Value="{StaticResource HeaderTextColor}" />   <!--Davy grey-->
                <Setter Property="FontFamily" Value="{StaticResource MediumFontFamily}" /> <!--Medium In Size-->
                <Setter Property="FontSize" Value="{StaticResource TitleFont}" />         <!--20-->

            </Style>

            <Style x:Key="ProfileTagLabel" TargetType="Label">
                <Setter Property="TextColor" Value="{StaticResource BodyTextColor}" />    <!--Lightgray-->
                <Setter Property="FontFamily" Value="{StaticResource RegularFontFamily}" />     <!--Regular-->
                <Setter Property="FontSize" Value="{StaticResource TagTextFont}" />  <!--18-->
            </Style>

            <Style x:Key="StatsNumberLabel" TargetType="Label">
                <Setter Property="TextColor" Value="{StaticResource HeaderTextColor}" />     <!--Davy grey-->
                <Setter Property="HorizontalTextAlignment" Value="Center" />
                <Setter Property="FontFamily" Value="{StaticResource LightFontFamily}" />       <!--light-->
                <Setter Property="FontSize" Value="{StaticResource StatsNumberFont}" />         <!--20-->
            </Style>

            <Style x:Key="StatsCaptionLabel" TargetType="Label">
                <Setter Property="TextColor" Value="{StaticResource BodyTextColor}" />     <!--Lightgray-->
                <Setter Property="Margin" Value="0,-5,0,0" />
                <Setter Property="HorizontalTextAlignment" Value="Center" />
                <Setter Property="FontFamily" Value="{StaticResource LightFontFamily}" />      <!--Light-->
                <Setter Property="FontSize" Value="{StaticResource StatsCaptionFont}" />     <!--16-->
            </Style>
          
        </ResourceDictionary>
    </Application.Resources>
</Application>

Step2: App.Xaml.cs Will Look Like

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Xamarin.Forms;

namespace BeutifulUI
{
 public partial class App : Application
 {
  public App ()
  {
   InitializeComponent();

   MainPage = new MainPage();
  }

  protected override void OnStart ()
  {
   // Handle when your app starts
  }

  protected override void OnSleep ()
  {
   // Handle when your app sleeps
  }

  protected override void OnResume ()
  {
   // Handle when your app resumes
  }
 }
}

Step3: MainPage Will Look Like this

<?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:BeutifulUI"
             x:Class="BeutifulUI.MainPage"
             BackgroundColor="White">

<ScrollView>
        <Grid ColumnSpacing="0" RowSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="AUTO" />
                <RowDefinition Height="AUTO" />
                <RowDefinition Height="AUTO" />
                <RowDefinition Height="*" />
                <RowDefinition Height="AUTO" />
            </Grid.RowDefinitions>

            <!--  header background  -->
            <Image Aspect="AspectFill" Source="screen.png" />
            <Image Aspect="Fill" Source="CurvedMask.png" VerticalOptions="End" />

            <!--  profile image  -->
            <Image HeightRequest="100" HorizontalOptions="Center" Source="ic_launcher.png" TranslationY="50" VerticalOptions="End" WidthRequest="100" />

            <!--  Profile Name this will b Included  -->
            <StackLayout Grid.Row="1" Padding="0,50,0,00" HorizontalOptions="Center">
                <Label HorizontalTextAlignment="Center" Style="{StaticResource ProfileNameLabel}" Text="Signed In" />
                <Label Margin="0,-5" HorizontalTextAlignment="Center" Style="{StaticResource ProfileTagLabel}" Text="Star Wars Reviews" />
            </StackLayout>

            <!--  Social Stats Section  -->
            <Grid Grid.Row="2" Margin="0,30" ColumnSpacing="0" RowSpacing="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <StackLayout>
                    <StackLayout.Children>

                        <Image Source="http://bbcpersian7.com/images/facebook-clipart-png-circle-14.jpg" HeightRequest="50" WidthRequest="50"></Image>

                    </StackLayout.Children>

                    <Label Style="{StaticResource StatsNumberLabel}" Text="103" />
                    <Label Style="{StaticResource StatsCaptionLabel}" Text="Likes" />


                </StackLayout>

                <StackLayout Grid.Column="1">

                    <StackLayout.Children>
                        <Image Source="https://lh3.googleusercontent.com/N-AY2XwXafWq4TQWfua6VyjPVQvTGRdz9CKOHaBl2nu2GVg7zxS886X5giZ9yY2qIjPh=w300" HeightRequest="50" WidthRequest="50"></Image>
                    </StackLayout.Children>
                    <Label Style="{StaticResource StatsNumberLabel}" Text="164" />
                    <Label Style="{StaticResource StatsCaptionLabel}" Text="Follow Us" />

                </StackLayout>

                <StackLayout Grid.Column="2">

                    <StackLayout.Children>
                        <Image Source="http://www.movingchurchofgod.org/wp-content/uploads/2015/04/twitter-circle-icon-blue-logo-flat.png" HeightRequest="50" WidthRequest="50"></Image>
                    </StackLayout.Children>
                    <Label Style="{StaticResource StatsNumberLabel}" Text="107" />
                    <Label Style="{StaticResource StatsCaptionLabel}" Text="Tweet Us" />
                </StackLayout>
            </Grid>

        </Grid>
    </ScrollView>
</ContentPage>

Step4: Holla!!!Our Tutorial Is Completed