Replicating a Facebook-Like UI in Xamarin

Replicating a Facebook-Like UI in Xamarin

In this blog post, we’ll be replicating a Facebook UI in Xamarin.Forms. The Facebook app contains some basic modules like a login page, timeline/wall page, profile page, and some other pages for modifying the settings and creating commercial pages. In this blog, we are going to focus on designing the following three pages:

  • Login page: Requests username and password to log in.
  • Timeline page: Shows all active posted content, such as videos, images, and texts with react and comments sections.
  • Profile page: Shows user information, media, and a friend list.

Designing the login page

To create the login page, I am going to use the Syncfusion Xamarin.Forms Button and Text Input Layout controls.

To start, let’s divide the screen into the following controls:

  • A label to show the text Log In.
  • A label to show a simple description.
  • Text Input Layout with Entry to get User ID.
  • Text Input Layout with Entry to get Password.
  • Button for FORGOT PASSWORD? option.
  • Button to LOG IN.

Code for layout

Use stack and grid layouts to place the controls appropriately.

<StackLayout Margin="{core:OnPlatformOrientationThickness PhonePortrait='20,32', PhoneLandscape='150,32', TabletPortrait='200,50', TabletLandscape='300,50', Desktop='30'}" Spacing="0" VerticalOptions="FillAndExpand" WidthRequest="{OnPlatform Default='-1', UWP='350'}">
Login page UI similar to Facebook in Xamarin.Forms
Login page UI similar to Facebook in Xamarin.Forms
Login page UI similar to Facebook in Xamarin.Forms

Designing profile page

Let’s move on to the second page, where the Avatar View and Badge View controls play a crucial role.

To start, let’s divide the screen into the following controls:

  • Border control for basic layout with rounded corners.
  • Image to show banner image.
  • AvatarView to show profile picture.
  • BadgeView to show availability status.
  • Buttons for the options to Add Story, Edit Profile, Activity Log, More, and See all.
  • Labels to display personal information.

Code for layout

Use stack and grid layouts to place the controls appropriately.

<StackLayout Spacing="0">
Profile page UI similar to Facebook in Xamarin.Forms
Profile page UI similar to Facebook in Xamarin.Forms
Profile page UI similar to Facebook in Xamarin.Forms

Designing a timeline page

This is the main page where the most activity takes place. This page is built using several templates designed using some interesting controls such as Rating, Avatar View, and Cards. ListView is used to create the basic layout.

To start, let’s divide the screen into the following templates:

  • Message post template
  • Picture post template
  • Video post template
  • Post comment template
  • Post reaction template

Message post template

A message post template is designed with:

  • A card view for a card-like layout.
  • Labels for messages.

Code implementation

<cards:SfCardView HasShadow="False" BackgroundColor="LightSkyBlue" Margin="0,0,5,0">
Message post template
Message post template
Message post template

Picture post template

A picture post template is designed with:

  • Labels for descriptions.
  • Images to show pictures

Code implementation

<Grid Padding="0">
Picture message post template
Picture message post template
Picture message post template

Video post template

A video post template is designed with:

  • Labels for descriptions.
  • A media element to play videos.
  • A button to pause and play.

Code implementation

<Grid Padding="0"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition /> </Grid.RowDefinitions>
Video post template
Video post template
Video post template

Comment template

A comments template is designed with:

  • Avatar View to show a picture of the owner of the comment.
  • A label to show the name of the owner of the comment.
  • A label to show the comment.
  • Cards to hold the comment.
  • Entry to get a new comment.
  • Button to post the comment.

Code implementation

<Grid>
Comment view of a post
Comment view of a post
Comment view of a post

Reaction template

A reaction template is designed with:

  • A Rating control with five reaction types:

— Angry

— Happy

— Neutral

— Sad

— Wow

Code implementation

<rating:SfRating.Items>
Reaction view on a post
Reaction view on a post
Reaction view on a post

Showing a menu for a post

Displaying a menu with more options in a post is implemented using the Xamarin Popup control.

Code implementation

<sfPopup:SfPopupLayout x:Name="actionPopupLayout">
More options in a post
More options in a post
More options in a post

Integrating all templates

Now, integrate all the templates using a ListView.

Code implementation

<templates:PostOwnerTemplate/>

And our UI is done!

Facebook-Like UI in Xamarin
Facebook-Like UI in Xamarin
Facebook-Like UI in Xamarin

More pages and template

If you are looking for more interesting built-in templates, you can find them in our Xamarin UI Toolkit. Some of the templates related to this app are:

Conclusion

Thanks for reading! In this blog post, we have seen how to replicate a Facebook-like UI in Xamarin.Forms. Use these steps as a starting point to build your own UI!

Syncfusion’s Xamarin suite offers over 150 UI controls, from basic editors to powerful, advanced controls like DataGrid, Charts, ListView, and Rich Text Editor. Try them and leave your comments in this blog.

You can also contact us through our support forum, Direct-Trac, or feedback portal. We are always happy to assist you!

If you enjoyed this blog, we think you will also like:

Originally published at https://www.syncfusion.com on April 15, 2021.

Syncfusion

Syncfusion provides third-party UI components for React…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store