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