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

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. }