Post
Ask Question

Xamarin UI Challenge

Today in this article we have a Xamarin UI Challenge.
 
In this article we will be designing a simple login and sign up with XAML in Xamarin.
 
We will be using Application.Resource Dictionary to apply the style and color throughout the whole application.
 
We will be using different font styles in the user interface (UI) to make it more attractive and beautiful.
 
So let's start.
 
Here we are in the App.xml page and we defined some application resources within Resource Dictionary to acess it throughout the application.
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <Application xmlns="http://xamarin.com/schemas/2014/forms"    
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"    
  4.              xmlns:d="http://xamarin.com/schemas/2014/forms/design"    
  5.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="MyUI_Designs.App">    
  6.     <Application.Resources>    
  7.         <ResourceDictionary>    
  8.             <Color x:Key="bg_color">#171717</Color>    
  9.             <Color x:Key="txt_color">white</Color>    
  10.             <Color x:Key="btn_color">#580BE4</Color>      
  11.     
  12.             <OnPlatform x:TypeArguments="x:String" x:Key="Normalfonts">    
  13.             <On Platform="Android"    
  14.              Value="LilitaOne-Regular.ttf#Open Sans" />    
  15.             </OnPlatform>    
  16.     
  17.         </ResourceDictionary>    
  18.     </Application.Resources>    
  19. </Application>    
Below we have Login page with the code given below the screen shot.
 
Xamarin UI Challenge 
  1. <?xml version="1.0" encoding="UTF-8"?>    
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"    
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"    
  4.              x:Class="MyUI_Designs.Views.SimpleLogin_Page"    
  5.              Title="Login Page" BackgroundColor="{StaticResource bg_color}">    
  6.     
  7.     <Frame BackgroundColor="{StaticResource bg_color}">    
  8.     <StackLayout Padding="0,50,0,0">    
  9.     
  10.         <Frame VerticalOptions="CenterAndExpand"    
  11.                BackgroundColor="{StaticResource bg_color}">    
  12.             <StackLayout>    
  13.                 <Label Text="Log In" HorizontalOptions="Center"    
  14.                        TextColor="{StaticResource txt_color}"/>    
  15.     
  16.                 <Label Text="Let's get to work"    
  17.                        Margin="105,0,0,15"    
  18.                        TextColor="{StaticResource txt_color}"/>    
  19.     
  20.                 <Entry Placeholder="Email" Keyboard="Email"    
  21.                        PlaceholderColor="{StaticResource txt_color}"    
  22.                        Margin="0,0,0,15" TextColor="{StaticResource txt_color}"    
  23.                        BackgroundColor="{StaticResource bg_color}"/>    
  24.     
  25.                 <Entry Placeholder="Password"    
  26.                        PlaceholderColor="{StaticResource txt_color}"    
  27.                        Margin="0,0,0,15" TextColor="{StaticResource txt_color}"    
  28.                        BackgroundColor="{StaticResource bg_color}"/>    
  29.     
  30.                 <Label Text="FORGOT PASSWORD?"    
  31.                     TextColor="{StaticResource txt_color}"    
  32.                        HorizontalOptions="End"    
  33.                        Margin="0,0,0,15"/>    
  34.     
  35.                 <Button Text="LOGIN"    
  36.                         BackgroundColor="{StaticResource btn_color}"    
  37.                         TextColor="{StaticResource txt_color}"    
  38.                         Margin="0,0,0,15"    
  39.                         BorderRadius="20"/>    
  40.     
  41.                 <Label Text="Or create an account using social media"    
  42.                        TextColor="{StaticResource txt_color}"    
  43.                        HorizontalOptions="Center"    
  44.                        Margin="0,0,0,15"/>    
  45.     
  46.                 <Button Text="Login with Facebook"    
  47.                         BackgroundColor="{StaticResource btn_color}"    
  48.                         TextColor="{StaticResource txt_color}"    
  49.                         Margin="0,0,0,30"    
  50.                         BorderRadius="20"/>    
  51.     
  52.                 <StackLayout HorizontalOptions="Center" Orientation="Horizontal">    
  53.     
  54.                 <Label Text="Don't have account?"    
  55.                        TextColor="{StaticResource txt_color}"/>    
  56.                     <Label Text="Sign Up"    
  57.                            TextColor="Red"/>    
  58.                 </StackLayout>    
  59.                     
  60.             </StackLayout>    
  61.         </Frame>    
  62.     </StackLayout>    
  63.     </Frame>    
  64. </ContentPage>    
Next we have a Contact Us page with the following XAML code below the screen shot.
 
Xamarin UI Challenge 
  1. <?xml version="1.0" encoding="UTF-8"?>    
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"    
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"    
  4.              x:Class="MyUI_Designs.Views.Contact_Us"    
  5.              Title="Contact Us">    
  6.     
  7.     <Frame BackgroundColor="#171717">    
  8.     <StackLayout Padding="0,20,0,0">    
  9.     
  10.         <Label Text="Welcome!" HorizontalOptions="CenterAndExpand"    
  11.                VerticalOptions="Center" FontAttributes="Bold"    
  12.                TextColor="White"/>    
  13.         <StackLayout BackgroundColor="#171717" VerticalOptions="CenterAndExpand">    
  14.             <Frame BackgroundColor="#171717" HorizontalOptions="CenterAndExpand">    
  15.             <Grid>    
  16.                 <Grid.RowDefinitions>    
  17.                    <RowDefinition Height="50"/>    
  18.                     <RowDefinition Height="50"/>    
  19.                     <RowDefinition Height="50"/>    
  20.                     <RowDefinition Height="200"/>    
  21.                     <RowDefinition Height="50"/>    
  22.                 </Grid.RowDefinitions>    
  23.                 <Label Text="Get in touch" TextColor="White"    
  24.                        Grid.Row="0" HorizontalOptions="CenterAndExpand"    
  25.                        FontAttributes="Bold"/>    
  26.                 <Entry Placeholder="Name"    
  27.                        Grid.Row="1" BackgroundColor="#171717" TextColor="White"    
  28.                        PlaceholderColor="White"/>    
  29.                 <Entry Placeholder="Email"    
  30.                        Grid.Row="2" Keyboard="Email" PlaceholderColor="White"    
  31.                        BackgroundColor="#171717" TextColor="White"/>    
  32.                 <Editor Placeholder="Message"    
  33.                         Grid.Row="3" AutoSize="TextChanges"    
  34.                         Keyboard="Chat"    
  35.                         BackgroundColor="#171717" TextColor="White"    
  36.                         PlaceholderColor="White"/>    
  37.                 <Button Text="Submit" Grid.Row="4"    
  38.                         BackgroundColor="#580BE4"    
  39.                         WidthRequest="150"    
  40.                         BorderRadius="15"    
  41.                         TextColor="White"    
  42.                         HorizontalOptions="Center"/>    
  43.             </Grid>    
  44.             </Frame>    
  45.         </StackLayout>    
  46.     </StackLayout>    
  47.     </Frame>    
  48. </ContentPage>    
So that's it for now -- see you soon Thank you!
 
Happy Coding! 


Similar Articles