Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (161).NET Core  (29).NET MAUI  (62)Angular  (74)ASP.NET  (50)ASP.NET Core  (79)ASP.NET MVC  (88)Azure  (36)Blazor  (152)DocIO  (23)Essential JS 2  (84)Essential Studio  (172)File Formats  (28)Flutter  (123)JavaScript  (186)Microsoft  (113)PDF  (67)React  (61)Succinctly series  (128)Syncfusion  (609)TypeScript  (31)Uno Platform  (3)UWP  (4)Vue  (39)Webinar  (35)Windows Forms  (59)WinUI  (52)WPF  (138)Xamarin  (155)XlsIO  (25)Other CategoriesBarcode  (5)BI  (29)Bold BI  (5)Build conference  (6)Business intelligence  (54)Button  (4)C#  (119)Chart  (57)Cloud  (12)Company  (445)Dashboard  (8)Data Science  (3)Data Validation  (6)DataGrid  (55)Development  (393)Doc  (7)DockingManager  (1)eBook  (96)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (23)Extensions  (18)File Manager  (4)Gantt  (11)Gauge  (11)Git  (4)Grid  (28)HTML  (10)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (310)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (30)Performance  (9)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (7)Road Map  (10)Scheduler  (36)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (22)Solution Services  (3)Spreadsheet  (11)SQL  (8)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (92)UI  (223)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (23)Visual Studio Code  (16)Web  (371)What's new  (213)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Replicating an App Login Screen in Xamarin.Forms

Replicating an App Login Screen in Xamarin.Forms

Howdy! We are going to replicate an app login screen in Xamarin.Forms based on this Dribble design.

In this UI design, we have two separate pages for validating email and password.

We are going to break down this UI to explain the step-by-step procedure to create the following pages:

App Login Screen in Xamarin.Forms

Before starting, let’s highlight some significant points in our approach:

  • We will replicate a UI with XAML. To design the UI, we are going to use different components such as Frames, Label.FormattedText, and images. We will also use tips to handle overlapping controls.
  • We are going to implement Syncfusion Xamarin.Forms controls such as Masked Entry (SfMaskedEdit) for email validation and Avatar View (SfAvatarView) to set our login avatar.
  • We will learn how to build designs in a specific orientation (like in the Facebook app).

Let’s code!

Step 1: Main picture block and main layout structure

Let’s create a background by adding an image as shown below. To achieve this, we use the Grid to place the image and establish the main layout for the screen.

Pay attention to this step because we will implement it on this screen and the next!

Main Picture in Xamarin.FormsRefer to the following code example.

<!-- Main structure-->
  <Grid RowDefinitions="*,Auto">
     <!--Main image-->
     <Image Grid.RowSpan="2" Source="Model" VerticalOptions="Start" Aspect="AspectFit"/>
          
     <!—Content of the step 2 and 3 goes here -->

  </Grid>

Step 2: Frame information

Frame information in Xamarin.Forms
Let’s continue with designing the Frame information block! We have a set of controls to present the required information.

Title

Here, we are going to display the text “Hi!” just before the frame design. Refer to the following code example.

<!-- Title-->
 <Label Grid.Row="0" Text="Hi!" FontSize="34" TextColor="White" VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>

 <!-- Content of next step goes here -->

Information frame body 

Now, add the frame and the layout to organize the information in it.

<!--Information Frame-->
  <Frame Grid.Row="1" HasShadow="False" Margin="15,0,15,50" VerticalOptions="FillAndExpand" CornerRadius="20" Opacity="0.9" BackgroundColor="#2e2b2c">
   <Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto" RowSpacing="25" Padding="0,10,0,0">
       <!— Content of next step goes here -->        
   </Grid>
  </Frame>

Information frame details

The frame contains the following components:

Email

To integrate and validate the email address text box, we will use the Syncfusion Xamarin.Forms Masked Entry control. For more details, check the Getting Started with Xamarin.Forms Masked Entry documentation.

Refer to the following code example.

<!--Email validation with Syncfusion Masked Entry control-->
  <syncmaskededit:SfMaskedEdit Grid.Row="0" Watermark="Email" Mask="\w+@\w+\.\w+" MaskType="RegEx" HeightRequest="50"/>

  <!-- Content of next step goes here -->

Social networks

We will use Syncfusion Xamarin.Forms Button control to design the Continue and social network buttons (Continue with Facebook, Google, and Apple). For more details, check the Getting Started with Xamarin Button documentation.

Refer to the following code example.

<!--Syncfusion Buttons control--> 
  <buttons:SfButton Grid.Row="1" Text="Continue" Style="{StaticResource Highlighted}"/>
  <Label Grid.Row="2" Text="or" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" TextColor="White"/>
  <buttons:SfButton Grid.Row="3" ImageSource="Facebook" Text="Continue with Facebook" Style="{StaticResource SocialNetworks}" />
  <buttons:SfButton Grid.Row="4" ImageSource="Google" FontSize="17" Text="Continue with Google" Style="{StaticResource SocialNetworks}"/>
  <buttons:SfButton Grid.Row="5" ImageSource="Apple" FontSize="17" Text="Continue with Apple" Style="{StaticResource SocialNetworks}" />

  <!— Content of next step goes here -->

Labels

We are going to use a label to add all additional registration options (Don’t have an account? Forgot your password?). We are using the same label for these options but with different styles. To save time and for better app performance, we are using Label.FormattedText. It allows us to customize the size and style within the same Label. For more details, refer to this article on best practices for UI handling.

Refer to the following code example.

<Label Grid.Row="6" Margin="0,10,0,0">
  <Label.FormattedText>
     <FormattedString>
        <Span Text="Don't have an account? " TextColor="White"/>
        <Span Text="Sign Up" TextColor="{StaticResource MainColor}" FontAttributes="Bold"/>
     </FormattedString>
  </Label.FormattedText>
</Label>

<Label Grid.Row="7" Text="Forget your password?" TextColor="{StaticResource MainColor}" FontAttributes="Bold"/>

We’re done with our first screen !!

Step 3: Login information

Now, let’s continue with the replica of the second screen!

Login information in Xamarin.FormsLet’s name this page Log In. We’ll use the same main layout structure as on the previous page.

Refer to the following code example.

<!-- Main structure-->
<Grid RowDefinitions="*,*">
  <!--Main image-->
  <Image Grid.Row="0"  Source="Model" VerticalOptions="Start" Aspect="AspectFill"/>
  <!-- Main information-->
  <Label Grid.Row="0" Text="Log In" FontSize="36" TextColor="White" FontAttributes="Bold" Padding="20,0,0,30" VerticalOptions="CenterAndExpand"/>
      
  <!— Content of next step goes here -->      
</Grid>

Now, let’s design the structure of the frame and its layout in addition to the avatar view on the login page.

Frame and grid

Refer to the following code example.

<Frame Grid.Row="0" Grid.RowSpan="2" HasShadow="False" Padding="25,50" Margin="10,0,10,40" VerticalOptions="CenterAndExpand" CornerRadius="20" Opacity="0.9" BackgroundColor="#2e2b2c">
 <Grid ColumnDefinitions="Auto,*" RowDefinitions="*,Auto,Auto,Auto,Auto" RowSpacing="15">
    <!— Content of next step goes here -->              
 </Grid>
</Frame>

Avatar view

To add the avatar image, I am going to use Syncfusion Xamarin.Forms Avatar View control. To do so, we have to add Syncfusion.Xamarin.Core NuGet package and then include the following namespace.

xmlns:sfavatar="clr-namespace:Syncfusion.XForms.AvatarView;assembly=Syncfusion.Core.XForms"

Next, we add the implementation logic for the Avatar View control, followed by the name and email as avatar information.

<sfavatar:SfAvatarView ContentType="Custom" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2"
                       ImageSource="Profile"
                       VerticalOptions="Center"
                       HorizontalOptions="Center"   
                       HeightRequest="70"
                       CornerRadius="35"
                       WidthRequest="70"
                       Margin="0,0,20,0"/>

 <!-- Avatar information-->
   <Label Grid.Column="1" Grid.Row="0" Text="Jane Dow" FontAttributes="Bold" TextColor="White" FontSize="19" VerticalTextAlignment="End"/>
   <Label Grid.Column="1" Grid.Row="1" Text="Jane.doe@gmail.com" TextColor="White" VerticalTextAlignment="Start"/>

 <!-- Content of next step goes here -->

Password validation

Finally, we add the password field, the Continue button to send the information (using the Syncfusion Xamarin.Forms Button), and the label to retrieve a forgotten password.

Refer to the following code example.

<Entry Grid.ColumnSpan="2" Margin="0,20,0,0" Grid.Row="2" IsPassword="True" Placeholder="********" HeightRequest="50"/>
    <buttons:SfButton Grid.ColumnSpan="2" Grid.Row="3" Text="Continue" Style="{StaticResource Highlighted}" />
    <Label Grid.ColumnSpan="2" Grid.Row="4" Text="Forgot your password?" TextColor="{StaticResource MainColor}" FontAttributes="Bold"/&gt

And our UI is done!

GitHub reference

Check out our complete example code for replicating an app login screen in Xamarin.Forms on GitHub.

Conclusion

Thanks for reading! In this blog, we have seen how to replicate an app login screen using Syncfusion Xamarin.Forms UI controls. Try out the steps provided here and leave your feedback in the comments section below!

Syncfusion’s Xamarin suite offers over 150 UI controls, from basic editors to powerful, advanced controls like DataGridChartsListView, and Rich Text Editor. Use them to build elite applications!

You can contact us through our support forumsupport tickets, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top