Hello guys!! This time, I created a post that’s a little different than my usual posts, I built a Facebook Profile UI! So you’ll be able to the whole code, I will list the elements I used and leave some explanatory posts so you can understand them better in case you have not used them yet.
Let me tell you that this is a topic that I really L-O-V-E 😍, because when we’re doing, watching or learning this type of exercise, we can really see how powerful Xamarin Forms is when it comes to building UIs. 💪
Tools that I used
To replicate the Facebook Profile UI, I used the following tools:
🔹 PancakeView – It’s a NuGet Package that make it easier to manage our UI, giving us different functions such as rounded corners, borders, shadows and more! https://github.com/sthewissen/Xamarin.Forms.PancakeView
🔹 MVVM design pattern – Pattern helps us separate the business logic and the user interface, this eases the test, maintenance and evolution of our code. https://askxammy.com/applying-mvvm-design-pattern/
🔹 Bindable layout Structure – It’s very effective when you need to add the same layout model more than once, since it allows you to add it once and the rest will be binded! https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/bindable-layouts
🔹 CollectionView – Allows us display a list of data. It’s very similar to the ListView but this control enhances the performance and memory management of the list and covers different layout presentations such as: Vertical, horizontal and grid, making it a lot better and saving us our precious development time.
🔹 FFImageLoading – Is a NuGet Package that provides the ability to load images and to help reduce the resource consumption and optimizing the resources sizes. https://askxammy.com/optimizing-handling-images-with-ffimageloading/
🔹 Styles – A style is a set of visual properties that are defined with the objective of assigning specific visual characteristics for as many controls as you want to set. https://askxammy.com/how-to-work-with-styles-xaml-in-xamarin-forms/
🔹 GridView – Is a layout type that allow to organice out screen elements in rows in columns to achieve a grid model. https://askxammy.com/working-with-gridlayout-in-xamarin-forms/
🔹 Blocking orientation – https://askxammy.com/little-things-that-you-might-know-to-prepare-your-project/
In the main image of this post, I added some screenshot of the IOS version, now I’ll leave those of the Android one.
If you want to become a better XAML UI Developer, It’s important to practice more with this type of projects in order to master XAML! I’ll take this opportunity to leave you this link in which I leave some advices about how to work on the UI! I hope it is very useful for you! 😊
And finally the Facebook Profile UI repository 😍
Thanks for reading!!!