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

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:App2"
x:Class="App2.MainPage" BackgroundImage="back.jpg">
    <AbsoluteLayout >
        <StackLayout AbsoluteLayout.LayoutBounds="1, 0.5, 1,0.5"
AbsoluteLayout.LayoutFlags="All"
HorizontalOptions="Center"
VerticalOptions="Center"
Padding="50" BackgroundColor="#421814">
            <StackLayout Orientation="Horizontal">
                <Label Text="LogIn" FontSize="Large" FontFamily="Forte"
TextColor="White"></Label>
                <Image Source="log.png" HeightRequest="100" WidthRequest="70"></Image>
            </StackLayout>
            <Label Text="Email:" TextColor="#0065b1" ></Label>
            <Entry Placeholder="Enter your email" VerticalOptions="Center" ></Entry>
            <Label Text="Password:" TextColor="#0065b1"></Label>
            <Entry Placeholder="Enter your password" IsPassword="True"
VerticalOptions="Center"></Entry>
            <StackLayout Orientation="Horizontal">
                <Button x:Name="Button" Text="Login" FontSize="Small" TextColor="White"
BackgroundColor="#f49600" HorizontalOptions="StartAndExpand"></Button>
                <Label Text="OR" HorizontalOptions="Center"></Label>
                <Button x:Name="signup" Text="SignUp" TextColor="White"
HorizontalOptions="EndAndExpand" FontSize="Small"
BackgroundColor="#f49600" Clicked="Signup_Clicked"></Button>
            </StackLayout>
            <Label Text="Forgotten your password?" TextColor="Azure"
FontSize="Small" FontFamily="bold"></Label>
        </StackLayout>
        <StackLayout AbsoluteLayout.LayoutBounds="0,1,1,60"
AbsoluteLayout.LayoutFlags="XProportional,YProportional,WidthProportional"
BackgroundColor="#60443b"
Orientation="Horizontal">
            <Label Text="We're on social media!" FontSize="Medium"
FontFamily="Forte" TextColor="AliceBlue"></Label>
            <ImageButton Source="twtr.png" HeightRequest="20" WidthRequest="40"></ImageButton>
            <ImageButton Source="gml.png" HeightRequest="20" WidthRequest="40"></ImageButton>
            <ImageButton Source="fb.png" HeightRequest="20" WidthRequest="40"></ImageButton>
            <ImageButton Source="ins.png" HeightRequest="20" WidthRequest="40"></ImageButton>
            <ImageButton Source="yutb.png" HeightRequest="20" WidthRequest="40"></ImageButton>
        </StackLayout>
        <ContentView x:Name="popup"
AbsoluteLayout.LayoutBounds="1, 0.2, 1,1"
AbsoluteLayout.LayoutFlags="All"
HorizontalOptions="Center"
VerticalOptions="Center"
IsVisible="False"
Padding="50" BackgroundColor="#421814">
            <StackLayout >
                <StackLayout Orientation="Horizontal">
                    <Label Text="SignUp" FontSize="Large" FontFamily="Forte" TextColor="White"></Label>
                    <Image Source="sigup.png" HeightRequest="100" WidthRequest="200"></Image>
                </StackLayout>
                <StackLayout Orientation="Horizontal">
                    <Label Text="First Name:" TextColor="#0065b1" ></Label>
                    <Entry Placeholder="Enter first name" VerticalOptions="Center"></Entry>
                    <Label Text="Last Name:" TextColor="#0065b1"></Label>
                    <Entry Placeholder="Enter last name" VerticalOptions="Center"></Entry>
                </StackLayout>
                <Label Text="Email:" TextColor="#0065b1" ></Label>
                <Entry Placeholder="Enter your email" VerticalOptions="Center"></Entry>
                <Label Text="Password:" TextColor="#0065b1"></Label>
                <Entry Placeholder="Enter your password" IsPassword="True" VerticalOptions="Center"></Entry>
                <Label Text="Confirm Password:" TextColor="#0065b1"></Label>
                <Entry Placeholder="Confirm your password" IsPassword="True" VerticalOptions="Center"></Entry>
                <StackLayout Orientation="Horizontal">
                    <Button x:Name="Submit" Text="Submit" FontSize="Small"
TextColor="White" BackgroundColor="#f49600"
HorizontalOptions="StartAndExpand"></Button>
                    <Label Text="OR" HorizontalOptions="Center"></Label>
                    <Button x:Name="log" Text="Login" TextColor="White"
HorizontalOptions="EndAndExpand" FontSize="Small"
BackgroundColor="#f49600" Clicked="Log_Clicked"></Button>
                </StackLayout>
            </StackLayout>
        </ContentView>
    </AbsoluteLayout>
</ContentPage>

MainPage.xamal.cs

 

 

MainPage.xamal.cs code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace App2
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
private void Signup_Clicked(object sender, EventArgs e)
{
popup.IsVisible = true;
}
private void Log_Clicked(object sender, EventArgs e)
{
popup.IsVisible = false;
}
}
}

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.