Xamarin -- Cinemax UI Design

Android user interfaces can be created declarative by using XML files or programmatically by writing code.The Designer also provides real-time feedback, which lets the developer evaluate UI changes without having to redeploy the application to a device or to an emulator. This can speed up Android UI development tremendously.

This article  demonstrates how to create a user interface for a small Cinemax app.

video can be found at https://www.youtube.com/watch?v=nTCSgkWGjfg

App.xaml

<?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>
   
   <Color x:Key="HeaderTextColor">#555555</Color> <!--Davy grey-->
   <Color x:Key="BodyTextColor">#bababa</Color>   <!--Lightgray-->
     
   <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}" /> 

       <Setter Property="FontFamily" Value="{StaticResource MediumFontFamily}" />
         <Setter Property="FontSize" Value="{StaticResource TitleFont}" />       
            </Style>

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

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

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

App.xaml.cs

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();
  }

 }
} 

MainPage.xaml

<?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-AY2XwXafWq4TQWfua6Vy

            jPVQvTGRdz9CKOHaBl2nu2GVg7zxS886X5giZ9yY2qIjPh=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>