Replicating sample Xamarin.Forms UI: Rumble.
Introduction
Today we will be doing a bit of UI, and we will replicate a page from this dribble illustration by Ben Jober which can be found here. The final output will look like this.
1. Partition the design into smaller subsets
I usually take this approach so I can be able to write my code in bite-size chunks and focus and one and only one thing on the page, this helps keep my focus on one thing in case the design is a bit complex and overwhelming. In our case, this will be the basic partition that we will implement.
2. Create a file new Xamarin App.
Once done partitioning our page and we have a basic idea of how our page will be implemented, we can go ahead and create a file new Xamarin App. Since we are working on only one page of the design, all our code will be implemented in the MainPage.xaml. The first element we will implement will be a vertical stacklayout which will contain the rest of the elements (This is the darker gray shade from the partition above).
3. Include icon files
Since we have a few icons we will be using in our app, we can go ahead and include icons now. The process is pretty straightforward.
3.1 Download the font icon files here.
3.2 I usually rename my .ttf file something intuitive i.e (FontIcons.ttf).
3.3 Click here and upload your recently downloaded .ttf file so you can convert your font Icon to a C# class file. Name your class FontIcon.cs
3.4 Now in visual studio, create a new folder in the shared project, name it fonts, and paste the .ttf font file you downloaded earlier.
3.5 Create a new class and name it FontIcons.cs then paste the code you generated in step 3.3
3.6 Make sure the class is a public static class.
3.7 Select the public const in the class then CTRL + F then replace all public const with public static readonly. Replace all occurrences, in the end, you should have a font icons file that looks like this.
3.8 Right-click on the .tff file then go to propoperties and ensure the build action is set to an embedded resource.
3.9 Go to AssemblyInfo.cs and export the .tff file like this.
4. Implement the first block
Now back to the MainPage.xaml let's implement the first partitioned block which will be a horizontal stacklayout that will contain 3 children (close button, rumble logo and name, and the search button).
5. Implement the second block
which contains a vertical stacklayout that contains 3 children
(An avatar view with user image, username, and the analytics). The block two stacklayout should be immediately after the block one stacklayout and should look like this.
6. Implement the third block
This is a vertical stacklayout with 2 children which are horizontal stacklayouts that in turn contain frames with an icon and a description. The block three stacklayout should be immediately after the block two stacklayout and should look like this.
7. Implement the last block
This will be a horizontal stacklayout containing the sign-out text and icon both centered horizontally. This stacklayout should be immediately after block 3 stacklayout and look like this.
The entire source code will be available here.
Thank you for spending time to read this, hope you found this article helpful.
8. Final product
Afterthought
Writing code no matter how small is almost always guaranteed to be a learning curve of some sort, In this case, it feels no different, there are a few things I think I could do better, e.g How I handle my font icons, that process can be simplified I am also not so impressed with using my icons in images as glyphs. hmmm, I'm sure I could try to use text or a label for that….
