Login UI Designs - Xamarin Form

 Login Designs



Login UI Designs - Xamarin Form


Login UI Form 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.Design4"
             Shell.NavBarIsVisible="False">
    <ContentPage.Content>
        <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" RowSpacing="0"  Padding="20,50,20,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="100"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="40"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="50"></RowDefinition>
                <RowDefinition Height="60"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>
            <Label Grid.Row="0"  Text="Welcome Back!" FontSize="24" FontAttributes="Bold" TextColor="#1C375C" HorizontalOptions="CenterAndExpand"></Label>
            <Label Grid.Row="1" Text="Login in to account" TextColor="#1C375C"  HorizontalOptions="CenterAndExpand"></Label>
            <BoxView Grid.Row="2"></BoxView>
            <Label Grid.Row="3"  Text=" User Name" TextColor="#1C375C"  HorizontalOptions="StartAndExpand"></Label>
            <Entry Grid.Row="4"   HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Entry>
            <BoxView Grid.Row="5"></BoxView>
            <Label Grid.Row="6"  Text=" Password" TextColor="#1C375C"  HorizontalOptions="StartAndExpand"></Label>
            <Entry Grid.Row="7"  IsPassword="True" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Entry>
            <BoxView Grid.Row="8"></BoxView>
            <Button Grid.Row="9" Text="Login" BackgroundColor="#1C375C" CornerRadius="20"></Button>
            <Label Grid.Row="10" Text="or signin with" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"></Label>
            <StackLayout Grid.Row="11" 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="12" Text="Forget Password?" FontAttributes="Bold" HorizontalOptions="CenterAndExpand"></Label>
            <Button Grid.Row="13" CornerRadius="20" Text="Don't have an account? Sign up here" BackgroundColor="White" TextColor="#1C375C" BorderWidth="2" BorderColor="#1C375C" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"></Button>
        </Grid>
    </ContentPage.Content>
</ContentPage>

Login UI 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.Design5"
             Shell.NavBarIsVisible="False"
             NavigationPage.HasNavigationBar="False"
             BackgroundColor="#1C375C">
    <ContentPage.Content>
        <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>

            </Grid.RowDefinitions>
            <Image Grid.Row="0" Margin="0,20,0,20" Source="xamarinlogo.png" Aspect="AspectFit" HeightRequest="180" WidthRequest="80"></Image>
            <Frame Grid.Row="1" Margin="20,30" BorderColor="#1C375C" HasShadow="True"  CornerRadius="50" >
                <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" RowSpacing="20" Padding="20">
                    <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="7" Text="Forget Password" FontAttributes="Bold" HorizontalOptions="CenterAndExpand"></Label>
                    <Label Grid.Row="8"  Text="Don't have an account? Sign up here" HorizontalOptions="CenterAndExpand"></Label>

                </Grid>
            </Frame>
        </Grid>
    </ContentPage.Content> 
</ContentPage>



Xaml Code

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="LoginUIDesigns.Views.Login.Design6"
             Shell.NavBarIsVisible="False"
             BackgroundColor="#1C375C">
    <ContentPage.Content>
        <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="5" RowDefinitions="700,Auto">
            <Path Grid.Row="0" Data="m290,136l175,0l0,124.8l-174,136.2l-1,-260.99999z" Aspect="Fill"
                VerticalOptions="FillAndExpand" Fill="white" HorizontalOptions="FillAndExpand" />
            <Grid Grid.Row="0" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand">
                <Label Text="Xamarin UI Designs" Margin="0,20,0,0" HorizontalOptions="CenterAndExpand" TextColor="#1C375C" FontAttributes="Bold" FontSize="25"></Label>
                <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>
                    </Grid.RowDefinitions>
                    <Label Grid.Row="1"  Text="Login in to account" TextColor="#1C375C"  HorizontalOptions="CenterAndExpand"></Label>
                    <Label Grid.Row="2" Margin="0,40,0,0" Text="User Name" FontAttributes="Bold" TextColor="#1C375C"  HorizontalOptions="Start"></Label>
                    <Entry Grid.Row="3" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Entry>
                    <Label Grid.Row="4" Text="Password" FontAttributes="Bold" TextColor="#1C375C"  HorizontalOptions="Start"></Label>
                    <Entry Grid.Row="5" IsPassword="True" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Entry>
                    <Button Grid.Row="6" Text="Login" HorizontalOptions="Start" Margin="0,40,0,0" WidthRequest="120" BackgroundColor="#1C375C" TextColor="White" CornerRadius="20"></Button>

                    <Frame Grid.Row="7" HasShadow="True" Margin="10,235,0,-50" CornerRadius="100" BackgroundColor="White"  HorizontalOptions="Start">
                        <Image Margin="-10" Source="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSo626DNKJxdHM-VNRD0m7x_8Jim-r9kRalJQ"
                              Aspect="AspectFit"></Image>
                    </Frame>

                    <Frame Grid.Row="7" HasShadow="True" Margin="100,150,0,30" CornerRadius="100" BackgroundColor="White"  HorizontalOptions="Start">
                        <Image Margin="-10" Source="https://cdn-icons-png.flaticon.com/512/174/174857.png" 
                              Aspect="AspectFit"></Image>
                    </Frame>

                    <Frame Grid.Row="7" HasShadow="True" Margin="190,60,0,120" CornerRadius="100" BackgroundColor="White"  HorizontalOptions="Start">
                        <Image Margin="-10" Source="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRnLfAn36-LTYNHjioWgvu-0KUTIDDrW5lX_g" 
                              Aspect="AspectFit"></Image>
                    </Frame>

                    <Frame Grid.Row="7" HasShadow="True" Margin="280,-30,0,210" CornerRadius="100" BackgroundColor="White"  HorizontalOptions="Start">
                        <Image Margin="-10" Source="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-icon-png-transparent-background-osteopathy-16.png" 
                              Aspect="AspectFit"></Image>
                    </Frame>
                </Grid>

            </Grid>
            <Path Grid.Row="1" Margin="0,-200,0,0" Data="m148.58865,377.76642l110.41135,-175.76642l0,176.99999l-111,0l0.58865,-1.23357z" Aspect="Fill"
                VerticalOptions="FillAndExpand" Fill="white" HorizontalOptions="FillAndExpand" />
            <Button Grid.Row="1" Text="Register" HorizontalOptions="End" VerticalOptions="Start" Margin="0,-20,20,0" BackgroundColor="#1C375C" TextColor="White" CornerRadius="20"></Button>
        </Grid>
    </ContentPage.Content>
</ContentPage>

There are more login pages as shown in below image. Please go through this link to get code for below login pages.

If you have any question then please ask me in comment section.

Conclusion: Today we learn two design of login page.
-

Comments

  1. AnonymousMay 30, 2024 at 1:26 AM

    Ager adding xaml code in my project I am getting below error.

    Type Path not found in xmlns HTTP://xasmarin.com/schemas/2014/forms

    ReplyDelete

Post a Comment

Popular posts from this blog

Push Notifications in .NET MAUI: A Comprehensive Guide

Image
Join our exclusive WhatsApp group for Xamarin and .NET MAUI developers to connect with experts, share insights, and get help with your projects. Whether you're a beginner or an experienced developer, this group is the perfect place to enhance your skills and collaborate with the community. What are Push Notifications? Push notifications are messages sent directly to a user's mobile device from a server, even when the app is not actively being used. They are a crucial part of mobile app development, enabling real-time communication with users. Notifications can inform users about new content, updates, reminders, or other important information, thus enhancing user engagement and retention. Watch video to understand code: Implementing Push Notifications in Android and iOS using .NET MAUI In this blog, we'll explore how to implement push notifications in a .NET MAUI application for both Android and iOS platforms. We'll start by setting up a Firebase ...
Read more

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

Image
Push Notification using Firebase in xamarin form (Android and IOS) 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 -> Click on property -> In left menu select "Androi...
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