Here Be Dragons: Xamarin.Forms And Material Design

In my last post, I noted the following:

We are planning on using the master-detail view for the Android version of the app while following the material design guidelines. For iOS the app will use a tabbed bar along the bottom of the screen and a settings icon in the navigation bar.

I had made this decision after I had put together a proof-of-concept app using the master-detail view, slapped a nice coat of material design paint on it and paraded it around to a few people for some feedback. It looked really nice, shiny…at least in Android, but not to worry, I could make some OS specific adjustments for iOS. It seemed like a good direction.

Yesterday, I took my proof-of-concept app, picked out the pieces I needed and rolled them into my actual app. The Android app was to have a navigation drawer (master) which slid over the tab page (detail). I spent the morning pulling everything together, applying the theme, adjusting colours, testing, then finally, I implemented the tabs in the detail page. This is what the result looked like:

bg2ZWV

Where I expected the master navigation drawer to slide over the toolbar and tabs, it instead only slid over the detail page. This is particularly problematic since not all of the detail pages use tabs.

I found numerous posts of this behaviour and a Xamarin bug report. Apparently it’s expected behaviour and will not be fixed.

I guess it’s back to the drawing board for the navigation…sigh.

Sprint 1: The Great Learning Curve

We had the sprint retro for our first 2 week iteration and did not have much to show for it. The learning curve of Xamarin, plus time for planning and time stolen by other projects caused the velocity to make a major hit. Only 4 of 8 story points were completed in sprint 1, the remaining 4 story points were pushed into sprint 2. Nevertheless, we did have something to show for it, a working app, themed to meet the client’s needs with login and data retrieval functionality which was integrate with the real life backend.

There is quite a bit of learning left to do. We are working to find a good navigational flow for the app while ensuring it is visibly pleasing and meets the UI guidelines of both iOS and Android. We are planning on using the master-detail view for the Android version of the app while following the material design guidelines. For iOS the app will use a tabbed bar along the bottom of the screen and a settings icon in the navigation bar.

A couple of notes here. I am constantly working between a “test project” and a real project. The test project gives me the opportunity to experiment with various UI changes such as styles, controls, flows without impacting/polluting the real project, a way to make mistakes with little cost. Second, I have ran into this build issue with the default Xamarin.iOS project multiple times and thought it would be a good idea to share it.