Login Page UI Design

Three Login page Designs

Login page is the most important part of the any application(mobile, web, window). It take credential from user and check whether this user is registered or not, what credential does he have.

It should be very simple with no overloaded information and also easy to use.

Login Page for xamarin developer


Today we are going to learn three different designs of login. 

Login Design used for signing in your mobile application using xamarin form


.xaml code
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="LoginUIDesigns.Views.Login.Design1"
             Shell.NavBarIsVisible="False"
             NavigationPage.HasNavigationBar="False"
             BackgroundColor="#1C375C"
             xmlns:fontawesome="clr-namespace:LoginUIDesigns.Models">
    <ContentPage.Content>
        <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>
            <Image Grid.Row="0" Margin="0,30" Source="xamarinlogo.png" Aspect="AspectFit" HeightRequest="180" WidthRequest="80"> </Image>
            <Frame Grid.Row="1" Margin="0,0,0,-40" BorderColor="#1C375C" HasShadow="True"  CornerRadius="50" HeightRequest="700">
                <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" RowSpacing="20" Padding="20,50,20,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Label Grid.Row="0"  Text="Welcome Back!" FontSize="24" FontAttributes="Bold" TextColor="#1C375C" HorizontalOptions="CenterAndExpand"></Label>
                    <Label Grid.Row="1" Margin="0,-15,0,0" Text="Login in to account" TextColor="#1C375C"  HorizontalOptions="CenterAndExpand"></Label>
                    <Entry Grid.Row="2" Placeholder="Username" Margin="0,20,0,0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Entry>
                    <Entry Grid.Row="3" Placeholder="Password" IsPassword="True" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Entry>
                    <Button Grid.Row="4" Text="Login" BackgroundColor="#1C375C" CornerRadius="20"></Button>
                    <Label Grid.Row="5" Text="or signin with" HorizontalOptions="CenterAndExpand"></Label>
                    <StackLayout Grid.Row="6" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Spacing="40">
                        <Image Source="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSo626DNKJxdHM-VNRD0m7x_8Jim-r9kRalJQ" WidthRequest="30"
                               HeightRequest="30" Aspect="AspectFit"></Image>
                        <Image Source="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRnLfAn36-LTYNHjioWgvu-0KUTIDDrW5lX_g" WidthRequest="30"
                               HeightRequest="30" Aspect="AspectFit"></Image>
                        <Image Source="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-icon-png-transparent-background-osteopathy-16.png" WidthRequest="30"
                               HeightRequest="30" Aspect="AspectFit"></Image>
                        <Image Source="https://cdn-icons-png.flaticon.com/512/174/174857.png" WidthRequest="30"
                               HeightRequest="30" Aspect="AspectFit"></Image>
                    </StackLayout>
                    <Label Grid.Row="7" Text="Forget Password" FontAttributes="Bold" HorizontalOptions="CenterAndExpand"></Label>
                    <Label Grid.Row="8" Margin="0,-10,0,0" Text="Don't have an account? Sign up here" HorizontalOptions="CenterAndExpand"></Label>
                 </Grid>
            </Frame>
        </Grid>
    </ContentPage.Content>
</ContentPage>

Beautiful Login Page Design using xamarin form


.xaml code
 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="LoginUIDesigns.Views.Login.Design2"
             Shell.NavBarIsVisible="False">
    <ContentPage.Content>
        <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" RowSpacing="20" Padding="20,0,20,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
            </Grid.RowDefinitions>
            <StackLayout Grid.Row="0" HeightRequest="250" Margin="-20,0" Padding="20" BackgroundColor="#1C375C" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                <Image Source="xamarinlogo.png" Aspect="AspectFit" HeightRequest="180" WidthRequest="80" VerticalOptions="CenterAndExpand"></Image>
            </StackLayout>
            <Label Grid.Row="1"  Text="Welcome Back!" Margin="0,20,0,0" FontSize="24" FontAttributes="Bold" TextColor="#1C375C" HorizontalOptions="CenterAndExpand"></Label>
            <Label Grid.Row="2" Margin="0,-15,0,0" Text="Login in to account" TextColor="#1C375C"  HorizontalOptions="CenterAndExpand"></Label>
            <Entry Grid.Row="3" Placeholder="Username" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Entry>
            <Entry Grid.Row="4" Placeholder="Password" IsPassword="True" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Entry>
            <Button Grid.Row="5" Text="Login" BackgroundColor="#1C375C" CornerRadius="20"></Button>
            <Label Grid.Row="6" Text="or signin with" HorizontalOptions="CenterAndExpand"></Label>
            <StackLayout Grid.Row="7" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Spacing="40">
                <Image Source="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSo626DNKJxdHM-VNRD0m7x_8Jim-r9kRalJQ" WidthRequest="30"
                               HeightRequest="30" Aspect="AspectFit"></Image>
                <Image Source="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRnLfAn36-LTYNHjioWgvu-0KUTIDDrW5lX_g" WidthRequest="30"
                               HeightRequest="30" Aspect="AspectFit"></Image>
                <Image Source="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-icon-png-transparent-background-osteopathy-16.png" WidthRequest="30"
                               HeightRequest="30" Aspect="AspectFit"></Image>
                <Image Source="https://cdn-icons-png.flaticon.com/512/174/174857.png" WidthRequest="30"
                               HeightRequest="30" Aspect="AspectFit"></Image>
            </StackLayout>
            <Label Grid.Row="8" Text="Forget Password" FontAttributes="Bold" HorizontalOptions="CenterAndExpand"></Label>
            <Label Grid.Row="9" Margin="0,-10,0,0" Text="Don't have an account? Sign up here" HorizontalOptions="CenterAndExpand"></Label>
         </Grid>
    </ContentPage.Content>
</ContentPage>

Login UI Design using xamarin form for mobile app developer

.xaml code
 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="LoginUIDesigns.Views.Login.Design3"
             Shell.NavBarIsVisible="False">
    <ContentPage.Content>
        <StackLayout>
            <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" RowSpacing="20" Padding="20,0,20,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                </Grid.RowDefinitions>
                <Path Grid.Row="0" Margin="-20,0" Data="m132.34,154.23002l209.00002,0l0,0.66666c-66.50001,28 -156.50001,72.87853 -209.00002,96.76573l0,-97.43239z"
                      Stroke="#1C375C" Fill="#1C375C" HeightRequest="220" Aspect="Fill" ></Path>
                <Image  Grid.Row="0" Margin="-18,-20,0,0" Source="xamarinlogo.png" Aspect="AspectFit" HeightRequest="180" WidthRequest="150" VerticalOptions="Start" HorizontalOptions="Start" ></Image>
                <Label Grid.Row="1"  Text="Welcome Back!" Margin="0,-50,0,0" FontSize="24" FontAttributes="Bold" TextColor="#1C375C" HorizontalOptions="CenterAndExpand"></Label>
                <Label Grid.Row="2" Margin="0,-15,0,0" Text="Login in to account" TextColor="#1C375C"  HorizontalOptions="CenterAndExpand"></Label>
                <Entry Grid.Row="3" Placeholder="Username" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Entry>
                <Entry Grid.Row="4" Placeholder="Password" IsPassword="True" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Entry>
                <Button Grid.Row="5" Text="Login" BackgroundColor="#1C375C" CornerRadius="20"></Button>
                <Label Grid.Row="6" Text="or signin with" HorizontalOptions="CenterAndExpand"></Label>
                <StackLayout Grid.Row="7" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Spacing="40">
                    <Image Source="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSo626DNKJxdHM-VNRD0m7x_8Jim-r9kRalJQ" WidthRequest="30"
                               HeightRequest="30" Aspect="AspectFit"></Image>
                    <Image Source="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRnLfAn36-LTYNHjioWgvu-0KUTIDDrW5lX_g" WidthRequest="30"
                               HeightRequest="30" Aspect="AspectFit"></Image>
                    <Image Source="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-icon-png-transparent-background-osteopathy-16.png" WidthRequest="30"
                               HeightRequest="30" Aspect="AspectFit"></Image>
                    <Image Source="https://cdn-icons-png.flaticon.com/512/174/174857.png" WidthRequest="30"
                               HeightRequest="30" Aspect="AspectFit"></Image>
                </StackLayout>

                <Label Grid.Row="8" Text="Forget Password" FontAttributes="Bold" HorizontalOptions="CenterAndExpand"></Label>
                <Label Grid.Row="9" Margin="0,-10,0,0" Text="Don't have an account? Sign up here" HorizontalOptions="CenterAndExpand"></Label>
                <Path Grid.Row="10" Margin="-20,0" Data="m333.5114,204.27502l115.48359,-59l-0.00813,123.08816c-101.06176,0.76114 -113.03789,-0.51177 -246.99185,-0.49297l131.51639,-63.59519z"
                      Stroke="#1C375C" Fill="#1C375C" HeightRequest="143" Aspect="Fill" ></Path>
            </Grid>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>
Watch video to understand code
-

Comments

  1. Eko RadesnaJanuary 29, 2022 at 7:33 AM

    Hey, thank you for the examples. It's very great and helpful for me who is a newbie in Xamarin Forms. Thanks again

    ReplyDelete
    Replies
    1. Xamarin UI DesignFebruary 4, 2022 at 10:09 AM

      Thanks for your comment. this code is explain in https://www.youtube.com/watch?v=Ay51XR9A6O4.
      If you want any UI design let me know I will try to design that UI

      Delete
  2. Mohit NegiFebruary 24, 2022 at 8:07 PM

    Very Nice UI Design Good Job.. 😊

    ReplyDelete
  3. MobibizJuly 14, 2022 at 3:48 PM

    Nice blog. Good information for beginners.
    Xamarin app development company
    Mobile app development company Gurgaon

    ReplyDelete
  4. AnonymousFebruary 12, 2024 at 2:56 AM

    i whant code the xaml.cs

    ReplyDelete
    Replies
    1. My BlogMarch 7, 2024 at 11:53 AM

      This only UI design. it does not required xaml.cs

      Delete

Post a Comment

Popular posts from this blog

Explore the UI libraries available for .NET MAUI at no cost.

Image
  In this article, we'll explore some of the free libraries available for .NET MAUI. Please, support my blog by clicking on our sponsors ad! In this article, we'll explore some of the free libraries available for .NET MAUI. I think many developers, when creating applications, seek free or open-source UI libraries that enhance the user experience, are compatible, or at least have support plans for .NET MAUI. That's why today, I want to share some options I found that you can explore and implement in your projects: MauiBlazor  Specifically crafted for .NET MAUI, this library provides Blazor UI components for cross-platform development. Repository: MauiBlazor on GitHub Built on Blazor, this library allows you to create cross-platform applications using C#, HTML, and JavaScript. Note: Ensure to review the documentation and updates to confirm compatibility with your .NET MAUI version. Comet  Initially designed for Xamarin.Forms, Comet is a UI framewor
Read more

Push Notification using Firebase in xamarin form (Android and IOS)

Image
Push Notification using Firebase in xamarin form (Android and IOS) Please, support my blog by clicking on our sponsors ad! Watch video to understand the code: https://youtu.be/1Ixc_B86mDk Follow steps to create push notification in both project. Create Project in  https://console.firebase.google.com/ Create Project for push notification After Creating Project add app for both IOS and Android Project. Create app in project For Both IOS and Android project add Package name. Package name should be same as your package name in Xamarin Android and IOS Project. Click on Register App Download Google Service json. If you are in android app then download google-services.json else if you are in ios app then download "GoogleService-Info.plist" file Click Next then click Next then Click Continue to console button. We have created project in firebase console now we will continue coding in xamarin. In Android Project add Internet Permission. Right click on android project ->
Read more

School UI Design using xamarin form

Image
School UI Design using xamarin form All Part of School UI Design: https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-using-xamarin-form.html https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-using-xamarin-form_4.html https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-using-xamarin-form_10.html https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-fees-gallery-profile.html First add  Fontawesome  in your project. First image is for Dashboard, Second is for TimeTable and last is for Syllabus. Rest of the page will publish in next blog. You can also replace the calendar view with another calendar control as listed below: Calendar Control 1 Calendar Contorl 2 Code is explain in this video First we will change NavigationDrawercolor. In App.xaml add following code in Application.Resources Tag <Application.Resources> <ResourceDictionary> <OnPlatform x:TypeArguments="x:String" x:Key="FontAwesom
Read more