How to create tabbed page in Xamarin.Forms similar to that of Facebook app

Question

I am working with Xamarin.Forms and I would like to create a navigation method similar to that of the Facebook app and also other newer versions of different apps. Here are two pictures, one of Facebook app on Android and the other is of KakaoTalk, also on Android.

I've tried several different ways to implement this. For example I wrapped the MainPage (TabbedPage) inside a NavigationPage. I also tried wrapping the MainPage (ContentPage) inside a NavigationPage then calling

PushAsync(new TabbedPage());

inside the MainPage via the Navigation property. I also tried wrapping the children of the MainPage (TabbedPage) inside separate NavigationPages. None of these attempts resulted in the desired effect.

I would like the following to happen. When a user taps on a Button or something that navigates to another page I'd like a ContentPage to pop in front of everything (tab bar included) except for the Navigation bar (or Action Bar). Obviously this happens via the PushAsync() method which also results in a small back arrow appearing in the Nav bar. My understanding is that a PushAsync() call pushes the chosen page onto the navigation stack provided by the NavigationPage. Therefore if a TabbedPage is wrapped inside a NavigationPage a new ContentPage would not be able to pop in front of the tabs like in the two applications mentioned above.

This, plus the fact that the tab bars of said apps don't get inside the ActionBar (in Android) in landscape mode leads me to believe that what I'm trying to achieve is best done not using TabbedPage but something that acts like a tab bar, e.g. a horizontal stack of Buttons perhaps.

Has anyone implemented this correctly and in an elegant way using Xamarin.Forms? So again, I would like to make this tab like navigation with the tabs staying underneath the ActionBar in landscape mode and a new Page appearing in front of the tabs (hiding them) when pushed onto the navigation stack. Do you think this can be done with Custom Renderers? Of course in iOS these are done with tabs but in Android I'm not sure.

What I would like is not necessarily code examples, but a best practice on this issue. So again, this is in Xamarin.Forms with a common PCL project and an Android and iOS project. Thank you in advance for your answers and advices!

P.S.: I've obviously searched this site before (Google as well) but I've found no real articles on this issue.

Answer 1

I have used ToolbarItems order=primary for navigation bar menu button and ToolbarItems order=secondary for tab bar on top.I have PCL the code written is in XAML. :)

http://codeworks.it/blog/?p=232

Answer 2

My understanding is that a PushAsync() call pushes the chosen page onto the navigation stack provided by the NavigationPage. Therefore if a TabbedPage is wrapped inside a NavigationPage a new ContentPage would not be able to pop in front of the tabs like in the two applications mentioned above.

This is not true actually. According to Xamarin API Doc, the Navigation property is context-aware, i.e. it will find all its parents until there is a NavigationPage.

In Android, only one NavigationPage is allowed and therefore even you call PushAsync() inside the TabbedPage, it will still push via your wrapping NavigationPage.