PopUp Login & Signup Form in Xamarin.Forms Using AbsoluteLayout

Introduction

 
Here we are going to create a login and signup form on a single page in Xamarin.Form for cross-platform by using ContentPage and different Layouts like AbsoluteLayout, StackLayout, and ContentView.
 

ContentPage

 
It is the main page where we write the whole code.
 

AbsoluteLayout

 
It is the type of Layout in Xamarin. The form is used to create a required Layout on-page. Here we use Proportional Layouts and AbsoluteLayoutFlags to Adjust the height, width, and size of the required layout.
 

ProportionalLayout

 
AbosoluteLayout.Layoutbound(x,y,width,height)
  • X- shows the horizontal position.
  • y- show the vertical position.
  • width- show the width of the object.
  • Height- show the height of the object.

AbsoluteLayoutFlags

 
It specifies how values will be interpreted different AbsoluteLayout flags are used for their specific use these flags are WidthProportional, HeightProportional, XProportional, YProportional, PositionProportional, and SizeProportional.
 

StackLayout

 
Here we use the StackLayout to use the multiple AbsoluteLayout on a single page Because we can not use multiple AbsoluteLayout without StackLayout.
 

Creating a Xamarin.Forms Project

 
Follow the steps to create your application project.
 
Open Visual Studio. Go to File à New Project à Select Cross-PlatformàSelect Mobile App (Xamarin.Forms) à Click Ok
 
 
Now set the settings as given below.
  • Blank app
  • Forms
  • .Net Standard
Now click OK.
 
 

MainPage.xamal

 
 

MainPage.xamal Code

  1. <?xml version="1.0" encoding="utf-8" ?>    
  2. <ContentPage    
  3.     xmlns="http://xamarin.com/schemas/2014/forms"    
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"    
  5.     xmlns:local="clr-namespace:App2"    
  6. x:Class="App2.MainPage" BackgroundImage="back.jpg">    
  7.     <AbsoluteLayout >    
  8.         <StackLayout AbsoluteLayout.LayoutBounds="1, 0.5, 1,0.5"    
  9. AbsoluteLayout.LayoutFlags="All"    
  10. HorizontalOptions="Center"    
  11. VerticalOptions="Center"    
  12. Padding="50" BackgroundColor="#421814">    
  13.             <StackLayout Orientation="Horizontal">    
  14.                 <Label Text="LogIn" FontSize="Large" FontFamily="Forte"    
  15. TextColor="White"></Label>    
  16.                 <Image Source="log.png" HeightRequest="100" WidthRequest="70"></Image>    
  17.             </StackLayout>    
  18.             <Label Text="Email:" TextColor="#0065b1" ></Label>    
  19.             <Entry Placeholder="Enter your email" VerticalOptions="Center" ></Entry>    
  20.             <Label Text="Password:" TextColor="#0065b1"></Label>    
  21.             <Entry Placeholder="Enter your password" IsPassword="True"    
  22. VerticalOptions="Center"></Entry>    
  23.             <StackLayout Orientation="Horizontal">    
  24.                 <Button x:Name="Button" Text="Login" FontSize="Small" TextColor="White"    
  25. BackgroundColor="#f49600" HorizontalOptions="StartAndExpand"></Button>    
  26.                 <Label Text="OR" HorizontalOptions="Center"></Label>    
  27.                 <Button x:Name="signup" Text="SignUp" TextColor="White"    
  28. HorizontalOptions="EndAndExpand" FontSize="Small"    
  29. BackgroundColor="#f49600" Clicked="Signup_Clicked"></Button>    
  30.             </StackLayout>    
  31.             <Label Text="Forgotten your password?" TextColor="Azure"    
  32. FontSize="Small" FontFamily="bold"></Label>    
  33.         </StackLayout>    
  34.         <StackLayout AbsoluteLayout.LayoutBounds="0,1,1,60"    
  35. AbsoluteLayout.LayoutFlags="XProportional,YProportional,WidthProportional"    
  36. BackgroundColor="#60443b"    
  37. Orientation="Horizontal">    
  38.             <Label Text="We're on social media!" FontSize="Medium"    
  39. FontFamily="Forte" TextColor="AliceBlue"></Label>    
  40.             <ImageButton Source="twtr.png" HeightRequest="20" WidthRequest="40"></ImageButton>    
  41.             <ImageButton Source="gml.png" HeightRequest="20" WidthRequest="40"></ImageButton>    
  42.             <ImageButton Source="fb.png" HeightRequest="20" WidthRequest="40"></ImageButton>    
  43.             <ImageButton Source="ins.png" HeightRequest="20" WidthRequest="40"></ImageButton>    
  44.             <ImageButton Source="yutb.png" HeightRequest="20" WidthRequest="40"></ImageButton>    
  45.         </StackLayout>    
  46.         <ContentView x:Name="popup"    
  47. AbsoluteLayout.LayoutBounds="1, 0.2, 1,1"    
  48. AbsoluteLayout.LayoutFlags="All"    
  49. HorizontalOptions="Center"    
  50. VerticalOptions="Center"    
  51. IsVisible="False"    
  52. Padding="50" BackgroundColor="#421814">    
  53.             <StackLayout >    
  54.                 <StackLayout Orientation="Horizontal">    
  55.                     <Label Text="SignUp" FontSize="Large" FontFamily="Forte" TextColor="White"></Label>    
  56.                     <Image Source="sigup.png" HeightRequest="100" WidthRequest="200"></Image>    
  57.                 </StackLayout>    
  58.                 <StackLayout Orientation="Horizontal">    
  59.                     <Label Text="First Name:" TextColor="#0065b1" ></Label>    
  60.                     <Entry Placeholder="Enter first name" VerticalOptions="Center"></Entry>    
  61.                     <Label Text="Last Name:" TextColor="#0065b1"></Label>    
  62.                     <Entry Placeholder="Enter last name" VerticalOptions="Center"></Entry>    
  63.                 </StackLayout>    
  64.                 <Label Text="Email:" TextColor="#0065b1" ></Label>    
  65.                 <Entry Placeholder="Enter your email" VerticalOptions="Center"></Entry>    
  66.                 <Label Text="Password:" TextColor="#0065b1"></Label>    
  67.                 <Entry Placeholder="Enter your password" IsPassword="True" VerticalOptions="Center"></Entry>    
  68.                 <Label Text="Confirm Password:" TextColor="#0065b1"></Label>    
  69.                 <Entry Placeholder="Confirm your password" IsPassword="True" VerticalOptions="Center"></Entry>    
  70.                 <StackLayout Orientation="Horizontal">    
  71.                     <Button x:Name="Submit" Text="Submit" FontSize="Small"    
  72. TextColor="White" BackgroundColor="#f49600"    
  73. HorizontalOptions="StartAndExpand"></Button>    
  74.                     <Label Text="OR" HorizontalOptions="Center"></Label>    
  75.                     <Button x:Name="log" Text="Login" TextColor="White"    
  76. HorizontalOptions="EndAndExpand" FontSize="Small"    
  77. BackgroundColor="#f49600" Clicked="Log_Clicked"></Button>    
  78.                 </StackLayout>    
  79.             </StackLayout>    
  80.         </ContentView>    
  81.     </AbsoluteLayout>    
  82. </ContentPage> 

MainPage.xamal.cs

 
 

MainPage.xamal.cs code

  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. namespace App2    
  8. {    
  9. public partial class MainPage : ContentPage    
  10. {    
  11. public MainPage()    
  12. {    
  13. InitializeComponent();    
  14. }    
  15. private void Signup_Clicked(object sender, EventArgs e)    
  16. {    
  17. popup.IsVisible = true;    
  18. }    
  19. private void Log_Clicked(object sender, EventArgs e)    
  20. {    
  21. popup.IsVisible = false;    
  22. }    
  23. }    
  24. }   
Output
 
Login Page
 
 
Now, click signup to go signup form
 
 

Summary

 
In this article, we learned about PopUp Login & Signup Form in Xamarin. Forms using AbsoluteLayout.