Hey Guys! So the time has come for my contribution to #XamarinUIJuly, and what better day to do it than my Bday? 😀 I guess I will be the one doing the gifting today haha.

What is #XamarinUIJuly? well, it’s a whole month in which everyday one member of the Community debuts some of the cool UI things we can do with Xamarin, this is a great initiative started by one of our community heroes and pancake lover 😜 Steven Thewissen, you can learn more about it and read a bunch of other amazing posts by clicking on our very own badge:

Now that you have all the information about the initiative it’s time to get back to Xam Business! :P, for my contribution I have decided to do a UI Challenge, which is basically just looking up a Design made by some cool guys at dribble, Behance or any other site you prefer and try to bring it to life using all of the things we have available in Xamarin, if you have read my posts about making custom controls you might understand why I feel in love with this particular design :P. (Yesss we are making a pretty timeline 🎊🎊).

Xamarin.Forms UI Challenge

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 (this post): Creation of the project, and implementation of the UI for the Main Page, and Timeline (with its mock data setup).
• 2nd Part: Implementation of Actions Page UI and integration with mock data service, to record new actions.
• 3rd Part: Polishments of UI, Adding custom animations.

Prerequisites

You will need previous knowledge on the following subjects to follow along with the sample projec (all of these topics I have discussed in previous post in my blog, you can revisit them it to refresh any doubts you might have while reading this article):

• Creating a Timeline Custom Control
• MVVM Pattern
• Using Fody Property Change Plugin
• BindableProperties
• Commanding
• Handling and Raising Events

SO LET’S GET TO WORK!

So the screen I have decided to work on for this first part are the following:

Approaching the MainPage Design

When we see the MainPage design, a bunch of ideas comes to mind but a good way to help us think straight that has always worked for me is to draw a wireframe of the possible components I could use to make this UI, before looking at my sketch try and do your own and see if we though of similar components, nooo cheating! 😋 haha.

So After we have our Wireframe next steps are pretty straight forward, by noticing that I would need to generate a square with rounded corners and possibly have to use some gradients for my timeline page, I saw that this was a perfect case for Steven’s Pancake View, so Thank you for releasing them because that exactly what I used, and here is what my MainPage Looks like after implementing it:

Once we have completed implementing the base UI components and they all are aligning nicely, it’s time to add some tapping goodness to each non tappable component I used to create the fake buttons on the navBar and the Growing Plan StackLayout, we can enable any of our views to react to tap by simply creating a Behavior which will attach a TapGesture Recognizer to the component I implement the behavior on.

For this, we are going to create generic BaseBehavior, and then we are going to proceed to create our ViewTappedButtonBehavior which will basically execute a Command and animate the view each time it has been tapped by the user.

Creating our ViewTappedButtonBehavior

• First we create our Base generic behavior.

• Now we can go ahead and create our ViewTappedButtonBehavior and make sure to extend from our generic base since we want to be able to add this behavior to any Xamarin Forms View.

Great job guys! 🥳 now that we have our behavior we simply need to add it to all our corresponding elements and we are finished with this page for now!

To add your behavior simply add the header where you can find it in your project:

Now we simply add it to our element and after that, you should see your element now reacting to taps and animating each time.

APPROACHING THE Timeline DESIGN

Ok Guys! so you already know the drill, time to do our wireframe and see what we can do to work with our timeline screen!

• 

• 

Description of Hotmess in my screenshot:

• Dark Blue: We are going to use another Absolute Layout as our root for this page since we need to be able to position elements one on top of each other and in kind of custom places.
• Red: FakeNavBar, Label, and a Grid, which we can notice can be used exactly the same in our timeline view for our items, so we basically do 2 tasks in one! 🥳
  • Grid Definition:
    • We are going to create 3 columns, 1 for the date, 1 for the leaf icon (only the leaf, the line we already have because of the box view we made across the whole screen), and the last one is for the Details of the action. this we will couple with 2 rows 1 for the title and 1 for the time span since he did the action.
• Light Blue:
  • We are going to add a nice Pancake View and create our green gradient to simulate the gradient background for the timeline component.
• Orange:
  • It’s going to be our Custom Timeline Control (with transparent background) we already implemented previously on my “Creating Custom Controls Part 3: TimelineView” post.
• Magenta & Light Orange:
  • Our 2 BoxViews that simulate the lines that separate our screen vertically

So we can say we need these main things to complete our TimelinePage:

• A Custom Timeline Control
• Pancake View
• BoxViews
• and our Leaf Resources

And Ce Finito Guys! once we have our UI Wireframe defined, it’s just a matter of coding it and praying it all works out 😋, but if you are reading this don’t worry it did work out, if not we wouldn’t have a post hahah.

Here is the Final XAML of the TimelinePage with everything together:

<

Here is our end product!

Great Job Guys!🙈🎊 we now have a really nice looking first stage of our App, that is ready for more work logic wise but it’s definitely a great start in terms of UI, I hope you enjoyed following along making this app as much as I did, Thanks for stopping by and see you in the next one!

Spanish Post:

https://medium.com/@Pujolsluis/xamarin-forms-ui-challenge-ficus-iot-app-c83c2c2c0e15

Note: I also implemented navigation between the screen, MVVM, and Prism on the sample project but all of that was extra and not necessary for the challenge, you can check out the full source code for the project here:

Xamarin.Forms UI Challenge – Ficus IoT App:

https://github.com/Pujolsluis/FicusUIChallenge

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