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:


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.

Leave a Reply

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