Talk With Angel Garcia!

Talk With Angel Garcia!

a blog about software and beers

House Plant – Xamarin Forms App UI Concept.

Hi folks! Some weeks ago I was looking for inspiration to practice my UI skills in Xamarin Forms with XAML, and searching around Dribbble I saw Rendi Ramadana’s profile, I wrote him an email for a collaboration and he accepted to send me the Adobe XD designs for this concept called “House Plant”.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8509c94d-ef76-410a-ae39-bd8adf6e9fdf/Screen_Shot_2020-09-12_at_12.10.22_AM.png

So, the idea is to take this Adobe XD project and bring it to life with Xamarin Forms.

I’ll be using Prism as MVVM framework, so the first thing we need to create is a Master-Detail in the Prism way, call the master “MainPage” and the detail “HomePage”, also create the corresponding view models for each page.

And this is the ViewModelBase:

Finally we need to register those views and navigate to the MainPage when the app opens:

So far we already have this:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a737f371-b1bb-4a3e-be42-63e47f577bb7/Screen_Shot_2020-09-14_at_11.02.08_PM.png
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/490d0f14-89b4-4708-a749-f13b4faa9247/Screen_Shot_2020-09-14_at_11.02.13_PM.png

Before starting the markup of our views, let’s add the color palette used in the design, this will be our MainTheme:

Add the MainTheme as the default theme by merging the theme’s ResourceDictionary into the application-level ResourceDictionary that’s defined in App.xaml:

Header and menu.

Now the fun part begins, we will make a custom header for the app:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ac644247-d0d7-47b4-aa90-005535829764/Screen_Shot_2020-09-14_at_11.09.04_PM.png

Here we need to export the icons (menu_icon and search_icon) for iOS and Android from Adobe XD and import them to the specific platform, we also need to import the font “Poppins” used in this design (see how to do it).

The HomePage XAML with this header will be like this:

Add the AppNameLabelStyle to the App.xaml:

Looking good 😎:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ed053821-d40c-4660-8b0c-572b85f57acc/Screen_Shot_2020-09-15_at_12.55.15_AM.png

But hey! We the new hamburger menu is not working, it’s just an icon, let’s add the functionality to make this work as expected.

As the master page that holds the menu is outside of the home page, we will need to use a nice Prism feature called Event Aggregator which is an event mechanism that enables communications between loosely coupled components in the application.

First create a the event:

Subscribe the MainPageViewModel to the event and add a handler that toggles the menu:

Publish the event in responses to a command in the HomePageViewModel:

And finally, add a tap gesture recognizer to the menu icon image in the HomePage view:

🔥🔥🔥 Nice, now we have the original menu behaviour in our custom header!

Featured plants carrousel.

For making this layout for the featured plants we will use a Carrousel View.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4fe9a609-133a-4859-b5f4-c2b6fd44f18a/Screen_Shot_2020-09-15_at_9.01.40_PM.png

Before going to the XAML, let’s define our models:

Modify the HomePageViewModel for adding the Featured Plants ObservableCollection and add the two plants:

Add the following XAML to the HomePage view to create the base for our CarrouselView:

And this is the first impression:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d8a62a1a-93be-4228-8735-df134045a409/Screen_Shot_2020-09-15_at_10.11.32_PM.png

For making the featured plants component we will need to export the plant images in the same dimensions with transparency, once exported from Adobe XD and imported in each platform with the names plant1 and plant2.

The component layout will be something like this:

With 2 new styles for the labels at the bottom of the component:

As result, we already have our beauty component looking like this:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8af0e2bd-8237-42a3-ae57-c8d26ebe8ee4/Screen_Shot_2020-09-16_at_12.01.25_AM.png

Did you noticed the fixed gray background on each plant? Well, it’s time to do some triggers for making a dynamic assign of the colors based on the plant category.

With Data Triggers we can evaluate the Enum of PlantCategory straight in the XAML, add this to the fisrt Frame in the component:

Voilà! our carrousel with the beautiful featured plants is done! 😍

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/af26a39b-fe74-4ca0-a1e5-903bec233cb6/Screen_Shot_2020-09-16_at_12.16.27_AM.png

Plants categories.

I really like this categories layout:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f1a3b475-6a19-4f6c-adf1-38cf92aedb59/Screen_Shot_2020-09-16_at_12.20.15_AM.png

Let’s start with the base grid layout for this part:

With a new style for the categories title:

Yessir! this is taking form:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/af5c6695-6845-4854-a650-12f22b28052a/Screen_Shot_2020-09-16_at_12.55.56_AM.png

For the gradient background we will add the new Brush_Experimental flag to our AppDelegate and MainActivity [See the initial setup].

We will also need to import to the project the background images for the three categories, name them: outside_plant_category, inside_plant_category and cactus_plant_category.

So, for complete this categories layout we will do a Grid inside each Frame to do some tricks using a BoxView as the gradient background with a 50% of opacity, an image with AspectFill for the Frame background and a simple Label over all the elements inside the Grid.

Also add this style for the category name label:

Ladies and gentlemen, the HomePage is done ✅

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9bdc9b56-b9d7-41b9-a401-f1d6119bb666/Screen_Shot_2020-09-16_at_1.48.03_AM.png

Plant details page.

The details page will be a little bit simpler than the home, first we need to create a the view called “PlantDetailsPage” and its view-model “PlantDetailsPageViewModel” and register them in the App.xaml.cs for navigation, we also need to add a tap gesture recognizer to the CarrouselView elements in the HomePage to execute a command for do the navigation.

So, let’s add the new view and its view-model:

We can’t forget to add the TapGestureRecognizer to the Grid container of the CarrouselView DataTemplate in the HomePage and the Command to the HomePageViewModel:

Now if we tap on any plat of the carrousel we see this (plant details page):

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/074739d3-9751-4643-a44b-e2c22e6abe27/Screen_Shot_2020-09-16_at_7.03.36_PM.png

🖼 Time to put some style, lets define the base layout to our plant details view, export the back icon as back_icon on each platform and start with the following XAML for the PlantDetailsPage:

This is how it looks:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4029fcc8-32c8-402f-b4f3-998da6e3ee48/Screen_Shot_2020-09-16_at_9.07.51_PM.png

Let’s add the back action to the icon with a TapGestureRecognizer backed by a command in the view model of the details page:

And of course the command in the view model:

Cool, now that we have all the logic part and the base layout in the details, let’s add the image, names and description, later we are going to do the “Reminders” part.

Add the labels styles:

Go back to the PlantDetailsPage.xaml and put the following:

We are almost done, let’s see how is looking now:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ffafb31e-4cd5-42eb-bb4d-fdb31feb2421/Screen_Shot_2020-09-16_at_9.37.03_PM.png

The final part is the reminders layout, we will make a Vertical Grid using a Bindable FlexLayout, the DataTemplate will be a grid inside a frame with an icon, reminder label, description label.

Export the four reminders icons as water_drop_icon (0,0), leaf_icon (0, 1), sun_light_icon (1,0) and thermometer_icon (1,1).

The PlantDetailsPage XAML will be like this:

😎 YES! We are done! Look at this:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/df4e75e0-7d87-4924-8d3b-bd4bdbf1e782/Screen_Shot_2020-09-16_at_10.58.47_PM.png

See you in my next post! 🚀

See the code on Github

DROP A COMMENT

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.