Post
Ask Question

Creating A Sign-In/Sign-Up Page With Animation In XamarinForms

Today, I will be showing how to create the Sign-in/Sign-up Page with animation in Xamarin.Forms.

Xamarin.Forms SIGN IN/SIGN UP

Last month, I saw an animation and I was thinking how can we do this kind of design in Xamarin.Forms? Here, in this article, I have explained the process.

So let's start.

Xamarin.Forms

Today, we are going to create a log-in form with animation. In the first step, we will design a simple slider for SIGN IN and SIGN UP. We can create a CustomFloatingLabel and then we will create a page in PCL project with a name as XFLoginAnimation.

Now, we need to write some XAML code for designing the SIGN IN / SIGN UP page. Here, we have added some controls, like CustomFloatingLabel for username/mobile and password, then we use a social icon horizontally, then we use SMS verification code, and then we add a Sign in button.

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XamBuddyApp.XFInterface.XFLogins.XFLoginAnimation" xmlns:forms="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms" xmlns:transformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations" BackgroundColor="#9688EE" Title="Login Page">  
  3.     <ContentPage.Content>  
  4.         <Grid x:Name="mainGrid">  
  5.             <Grid.RowDefinitions>  
  6.                 <RowDefinition Height="150" />  
  7.                 <RowDefinition Height="*" />  
  8.             </Grid.RowDefinitions>  
  9.             <Grid Grid.Row="0">  
  10.                 <Image Source="BGimg" Aspect="AspectFill" />  
  11.                 <StackLayout Padding="20">  
  12.                     <forms:CachedImage x:Name="Logo" HeightRequest="70" WidthRequest="70" Source="icon" Aspect="AspectFit" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">  
  13.                         <forms:CachedImage.Transformations>  
  14.                             <transformations:RoundedTransformation Radius="250" BorderSize="0" />  
  15.                         </forms:CachedImage.Transformations>  
  16.                     </forms:CachedImage>  
  17.                     <Label Text="Logo Title" FontSize="Large" FontAttributes="Bold" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />  
  18.                 </StackLayout>  
  19.             </Grid>  
  20.             <Grid Padding="20" Grid.Row="1" ColumnSpacing="0">  
  21.                 <Grid.RowDefinitions>  
  22.                     <RowDefinition Height="Auto" />  
  23.                     <RowDefinition Height="4" />  
  24.                     <RowDefinition Height="Auto" />  
  25.                     <RowDefinition Height="Auto" />  
  26.                     <RowDefinition Height="Auto" />  
  27.                     <RowDefinition Height="Auto" />  
  28.                     <RowDefinition Height="*" />  
  29.                 </Grid.RowDefinitions>  
  30.                 <Grid.ColumnDefinitions>  
  31.                     <ColumnDefinition Width=".5*" />  
  32.                     <ColumnDefinition Width=".5*" />  
  33.                 </Grid.ColumnDefinitions>  
  34.                 <Label x:Name="mainsignin" Text="Sign In" HorizontalTextAlignment="Center" FontAttributes="Bold" Grid.Row="0" Grid.Column="0" HorizontalOptions="FillAndExpand">  
  35.                     <Label.GestureRecognizers>  
  36.                         <TapGestureRecognizer Tapped="mainsignin_Tapped" />  
  37.                     </Label.GestureRecognizers>  
  38.                 </Label>  
  39.                 <Label x:Name="mainsignup" HorizontalTextAlignment="Center" Text="Sign Up" Grid.Row="0" Grid.Column="1" HorizontalOptions="FillAndExpand">  
  40.                     <Label.GestureRecognizers>  
  41.                         <TapGestureRecognizer Tapped="mainsignup_Tapped" />  
  42.                     </Label.GestureRecognizers>  
  43.                 </Label>  
  44.                 <BoxView x:Name="mainbox" BackgroundColor="Black" Grid.Row="1" Grid.Column="0" />  
  45.                 <BoxView x:Name="mainbox1" VerticalOptions="End" BackgroundColor="Black" Opacity=".3" HeightRequest="2" Grid.Row="1" Grid.Column="0" />  
  46.                 <BoxView x:Name="mainbox2" VerticalOptions="End" BackgroundColor="Black" Opacity=".3" HeightRequest="2" Grid.Row="1" Grid.Column="1" />  
  47.                 <Grid x:Name="layoutuser" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">  
  48.                     <Grid.ColumnDefinitions>  
  49.                         <ColumnDefinition Width="18" />  
  50.                         <ColumnDefinition Width="*" />  
  51.                     </Grid.ColumnDefinitions>  
  52.                     <Image Grid.Column="0" Source="mobile" Aspect="AspectFit" HeightRequest="18" />  
  53.                     <Entry Grid.Column="1" Placeholder="Mobile/Email" />  
  54.                 </Grid>  
  55.                 <Grid x:Name="layoutpass" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2">  
  56.                     <Grid.ColumnDefinitions>  
  57.                         <ColumnDefinition Width="18" />  
  58.                         <ColumnDefinition Width="*" />  
  59.                     </Grid.ColumnDefinitions>  
  60.                     <Image Grid.Column="0" Source="lock" Aspect="AspectFit" HeightRequest="18" />  
  61.                     <Entry Grid.Column="1" Placeholder="Password" />  
  62.                 </Grid>  
  63.                 <Grid x:Name="layoutconfpass" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2">  
  64.                     <Grid.ColumnDefinitions>  
  65.                         <ColumnDefinition Width="18" />  
  66.                         <ColumnDefinition Width="*" />  
  67.                     </Grid.ColumnDefinitions>  
  68.                     <Image Grid.Column="0" Source="key" Aspect="AspectFit" HeightRequest="18" />  
  69.                     <Entry Grid.Column="1" Placeholder="SMS Varification Code" />  
  70.                 </Grid>  
  71.                 <StackLayout x:Name="Social" Opacity="1" Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" Padding="10" Orientation="Horizontal" Spacing="45" HorizontalOptions="CenterAndExpand">  
  72.                     <forms:CachedImage x:Name="GLImage" HeightRequest="45" WidthRequest="45" Source="googlep" Aspect="AspectFit" HorizontalOptions="StartAndExpand">  
  73.                         <forms:CachedImage.Transformations>  
  74.                             <transformations:RoundedTransformation Radius="250" BorderSize="0" />  
  75.                         </forms:CachedImage.Transformations>  
  76.                     </forms:CachedImage>  
  77.                     <forms:CachedImage x:Name="FBImage" HeightRequest="55" WidthRequest="55" Source="facebook" Aspect="AspectFit" HorizontalOptions="CenterAndExpand">  
  78.                         <forms:CachedImage.Transformations>  
  79.                             <transformations:RoundedTransformation Radius="250" BorderSize="0" />  
  80.                         </forms:CachedImage.Transformations>  
  81.                     </forms:CachedImage>  
  82.                     <forms:CachedImage x:Name="TWImage" HeightRequest="45" WidthRequest="45" Source="twitter" Aspect="AspectFit" HorizontalOptions="EndAndExpand">  
  83.                         <forms:CachedImage.Transformations>  
  84.                             <transformations:RoundedTransformation Radius="250" BorderSize="0" />  
  85.                         </forms:CachedImage.Transformations>  
  86.                     </forms:CachedImage>  
  87.                 </StackLayout>  
  88.                 <Button x:Name="btn" Text="Sign In" Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2" VerticalOptions="End" BorderColor="Gray" BorderRadius="5" BorderWidth="5" TextColor="Teal" />  
  89.             </Grid>  
  90.         </Grid>  
  91.     </ContentPage.Content>  
  92. </ContentPage>  

Here, I have set the animation using the C # code. When we tap on the sign-in page, the SMS verification entry is going down and the visible false and social sign-in links are visible. We can have the SMS verification entry appear on the bottom with the animation and signup links  appear in false.

  1. using System;    
  2. using System.Collections.Generic;    
  3. using System.Linq;    
  4. using System.Text;    
  5. using System.Threading.Tasks;    
  6. using Xamarin.Forms;    
  7. using Xamarin.Forms.Xaml;    
  8. namespace XamBuddyApp.XFInterface.XFLogins {    
  9.     [XamlCompilation(XamlCompilationOptions.Compile)]    
  10.     public partial class XFLoginAnimation: ContentPage {    
  11.         public XFLoginAnimation() {    
  12.             InitializeComponent();    
  13.         }    
  14.         protected async override void OnAppearing() {    
  15.             base.OnAppearing();    
  16.             await Task.WhenAll(layoutconfpass.TranslateTo(0, mainGrid.Height, 200, Easing.Linear), Social.TranslateTo(0, -layoutconfpass.Height - 15, 200, Easing.Linear));    
  17.         }    
  18.         private async void mainsignin_Tapped(object sender, EventArgs e) {    
  19.             mainsignin.FontAttributes = FontAttributes.Bold;    
  20.             mainsignup.FontAttributes = FontAttributes.None;    
  21.             await Task.WhenAll(mainbox.TranslateTo(0, 0, 120, Easing.SinOut), layoutconfpass.TranslateTo(0, mainGrid.Height, 500, Easing.SinOut), Social.TranslateTo(0, -layoutconfpass.Height - 15, 500, Easing.SinOut), Social.FadeTo(1, 500));    
  22.             EmptyEntry();    
  23.             this.Title = btn.Text = "Sign In";    
  24.         }    
  25.         private async void mainsignup_Tapped(object sender, EventArgs e) {    
  26.             mainsignup.FontAttributes = FontAttributes.Bold;    
  27.             mainsignin.FontAttributes = FontAttributes.None;    
  28.             await Task.WhenAll(mainbox.TranslateTo(mainbox.Width, 0, 120, Easing.SinOut), layoutconfpass.TranslateTo(0, 0, 500, Easing.SinOut), Social.TranslateTo(0, 0, 500, Easing.SinOut), Social.FadeTo(0, 100));    
  29.             EmptyEntry();    
  30.             this.Title = btn.Text = "Sign Up";    
  31.         }    
  32.         private void EmptyEntry() {    
  33.             txtuser.Text = txtpass.Text = txtconfirm.Text = "";    
  34.             txtuser.Unfocus();    
  35.             txtpass.Unfocus();    
  36.             txtconfirm.Unfocus();    
  37.         }    
  38.     }    
  39. }    

 


Similar Articles