Hey Guys!
It’s time for part 2 of our UI Challenge for our cool IoT App Ficus, in this part we will be looking at the Monitoring Actions for our plant and how we can implement this UI in Xamarin Forms.
FICUS IOT APP FOR GROWING PLANTS
The App I have decided to replicate is one created by a User in dribble called Den Klenkov, I really loved how clean it looks and the fact that he played with the design to make the timeline a bit more interesting for the users when they want to check their history, the App’s doesn’t have a gif with animation on the site but I tried to assume my best what it did, also you should note that we are going to do a series on this UI challenge because there are a few interesting things to deal with and it would be too much for a single post, here is the initial design I found in Dribble:
https://dribbble.com/shots/6522758-IoT-App-for-growing-plants
In short, it’s a cool app that allows the user to grow his own plants and keep track of the activities his doing to reflect on how the plant is doing, allowing him to make adjustments as needed depending on the data the sensors provide him on a daily basis.
So I have decided to split this Challenge into a Series of 3 Parts:
- 1st Part: Creation of the project, and implementation of the UI for the Main Page, and Timeline (with its mock data setup).
- 2nd Part(this post): Implementation of Actions Page UI.
- 3rd Part: Polishments of UI, Adding custom animations.
Prerequisites
We will be using the same project from the 1st part of this series which you can get from here. We are also creating our project with Prism and MVVM if you need more context into these topics we have discussed them in previous articles in my blog which you can go back to and refresh any doubts 🙂
Let’s Get Started!
So what is the first thing we must do each time we are about to start a UI Challenge? You’re right, we have to analyze the design and create a wireframe of which UI Components we could use to make it a reality, remember you can always create a UI in a bunch of different ways so if your wireframe doesn’t look exactly the same as mine it’s still correct if it gets the job done!
Wireframe:
If we take a close look into the UI, we can notice that there is some sort of implicit Grid in the design, since the 4 actions in the middle look like they are static and if we want to offer extra actions to the user the designer has included a button to load maybe a list of extra actions for him to take, so taking this into consideration we can simply use a ScrollView as Root View for our layout and then just add our Grid with 7 rows and 2 columns to cover all positioning cases in the Screen.
First, we define our base Grid and then we can start adding the rest of the elements to the screen starting with our Fake Navbar, title and subtitle labels spaning them on the 2 columns of our 7×2 Grid:
Great job guys!🎊now looking at our wireframe we notice the action elements have rectangles with 2 rounded corners and a really light border around them, so immediately we know we can add a combination of our good old Pancake Views, and inside use a Vertical Stacklayout with an ImageView and a Label to complete the Action Item UI and add a TappedBehavior to the root StackLayout so the user is able to click each action.
Woohoo! now we got our Static Action Items, going back once more to our wireframe to check what is left to complete our UI we notice we have 2 elements left: Confirm Actions Button and the Other Actions Button, but looking at them closely we can notice we already created both of the UI components in our Part I, so we can simply copy and paste our components and adapt them for our new screen.
And Ce Finito!🥳 Once we have all of our elements added to our UI we just need to run our app and confirm that everything is rendering correctly and we have completed our challenge successfully! Congrats for making it this far guys I’m proud of you and I hope this design is useful for you in the future.☺️🙌
Xamarin.Forms UI Challenge – Ficus IoT App:
https://github.com/Pujolsluis/FicusUIChallenge
Spanish Post:
https://medium.com/@Pujolsluis/ui-challenge-ficus-iot-app-part-2-bf2f4fc474de
Made with ❤ by Pujolsluis
Good References to learn more about Xamarin UI
Behaviors – Microsoft Docs:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/behaviors/
Xamarin UI July Calendar:
https://www.thewissen.io/introducing-xamarin-ui-july/#schedule
