MasterDetail & Tabbed pages have unexpected results on Android

marcokmarcok USUniversity, Certified XTC Partners ✭✭

Hi! I just started out with the (awesome) Xamarin.Forms, but bumped into a problem yesterday that I can't seem to figure out.

I created a MasterDetail page that contains two Menu options: One that links to a TabbedPage, another to a ContentPage . When opening this on iOS, everything seems to be working fine. Yet, when running this sample in Android, some strange behaviour occurs.

When I open the Drawer (slide the page to the right), I expect the full Page to slide the right. On iOS, this is happening. Yet, on Android, the "Tabs" from the TabbedPage are still stuck on top. The ContentPage does seem to work fine; it's only the Tabs that are stuck in place.

This is the code (very simplified):

public class WrapperPage : MasterDetailPage
{
    public WrapperPage ()
    {
        var menuItems = new List<MenuItem> ()
        {
            new MenuItem() { Title = "Tabbed Page", Page = new Tabbed() },
            new MenuItem() { Title = "Content Page", Page = new Content() }
        };

        // Code that creates a ListView for the .Master and
        // binds to the ItemSelected to change the .Detail
    }
}

public class Tabbed : TabbedPage
{
    public Tabbed ()
    {
        this.Children.Add ( new TabOne() { Title = "One" } );
        this.Children.Add ( new TabTwo() { Title = "Two" } );
        // The Tabs are two simple ContentPages
    }
}

public class Content : ContentPage
{
    public Content ()
    {
        // Simple label for the ContentPage
    }
}

I don't think I'm doing something wrong here (especially since it does seem to work on iOS), or do I just have different expectation?

Attached:

  • ZIP archive with the project
  • Screenshot from iOS (tabs move to the right)
  • Screenshot from Android (tabs don't move to the right)

Best Answer

Answers

  • ChiragMehtaChiragMehta GBMember

    I'm having the same issue. Did you ever solve it?

  • JamesMontemagnoJamesMontemagno USForum Administrator, Xamarin Team, Developer Group Leader Xamurai

    Can you make sure that you update to the latest NuGet package. The latest releases follow the NavigationDrawer style for Android and no content will be pushed, it will just overlay on top of the page.

  • ChiragMehtaChiragMehta GBMember

    The new nuget package has the same issue.

  • Any update on this issue? I'm having the same problem.

  • 2BitNerd2BitNerd USMember ✭✭

    I'm experiencing this too. Any updates?

  • CihanCilCihanCil TRMember ✭✭

    I also think that there is a problem with tabs and masterdetail page on Android.

    Master Page should have been opened on top of tabs, instead it opens below.

    I upload a sample from Xamarin Evolve App. Here, master page should have hide the "All" and "Now" tabs.

  • Is there any update on it ?

  • GilbokLeeGilbokLee KRMember ✭✭

    The same problem. I'm looking for updates, too.

  • 2BitNerd2BitNerd USMember ✭✭

    Bump. I deperately need these features playing well together. Any updates?

  • FaltysMartinFaltysMartin CHUniversity ✭✭

    I would also very much need a update on this. XAMARIN?

  • NateRickardNateRickard USMember, University, Certified XTC Partners ✭✭

    Bump. The master menu needs to be on top of the tabs. Kinda silly this has been reported since June and not even responded to in depth by the forms team...

  • tkowalczyktkowalczyk PLMember, University ✭✭

    Yes that is true, hey Xamarin Team any solutions for this issue?

  • JGoldbergerJGoldberger USMember, Forum Administrator, Xamarin Team, University Xamurai

    HI all,

    There actually is a bug report on this and according to our Forms team lead this is expected behavior. See:
    https://bugzilla.xamarin.com/show_bug.cgi?id=23484

    Last comment from Jason from above:
    "This is how the platform is designed to work when using a MasterDetailPage
    which maps to an Android DrawerLayout."

  • 2BitNerd2BitNerd USMember ✭✭

    Sincere thanks for looking into this. It's the only thing keeping me from using tabbed pages.

  • pauloortinspauloortins BRMember ✭✭

    Any updates?

  • arroyosarroyos MYMember

    wow. still not solutions for this ?

  • Live_in_varunLive_in_varun USMember

    Can anybody provide update on this feature? Overlay drawer over the tabs

  • 2BitNerd2BitNerd USMember ✭✭

    One more bump. We still can't use TabbedPages because of this. We understand that it was designed this way, but we just need a way to override the overlap behavior and we can finally use them!

    Thanks for all you do Xamarin!

  • Lewis_tLewis_t GBUniversity ✭✭

    We are also desperate for this. Any news at all?

    It would be great to know what the feature/fix roadmap is with respect to Xamarin Forms so we can plan accordingly.

  • evolve13evolve13 USMember

    Hi guys,
    I guess we are looking at a dead end. This feature is not planned for release or its not in roadmap. According to Xamarin forms team this is a expected behaviour and so need to look for alternatives.
    Regards

  • rohitasthanarohitasthana USMember

    I used custom tabs for masterdetails page. You can take a look in open source https://github.com/asthanarht/CPXamarin

  • MartinStievenartMartinStievenart USMember, University

    Once again a one year old question with no roadmap or planning for an update.

  • John.6528John.6528 USMember

    Pretty funny, how this still has not been fixed. I guess Xamarin.Forms is not ready for production yet.
    Kinda sad.

  • JohnMillerJohnMiller USForum Administrator, Xamarin Team Xamurai

    Hello All,

    By implementing material design with FormsAppCompatActivity, I think you can get the results you want. Read more here.

  • CarlCrolCarlCrol PHMember

    yes having this problem still. anyway, is there any workaround?

  • NamLeNamLe USUniversity

    Same too =]], over two years.

  • mrBurukmrBuruk USMember

    GOOD . I want to create tabbed page in master detail page. Is do?

  • xiaoyangluxiaoyanglu USMember

    same too,anybody has a solution?

  • NinjaFocksNinjaFocks USMember ✭✭

    We are also having this problem on Android - tried to get the FormsAppCompatActivity example to work and I got inflation exceptions!

  • Hello,

    I guess that most people here have found a solution to this, but I just wanted to post my solution for future readers.

    Open .Droid\Resources\layout\Tabbar.axml
    Find app:tabMode and change it to "scrollable" (which is "fixed" by default).

    Clean/rebuild .Droid project and this should make tabbar scrollable.

    (VS 2015, Xamarin.Forms v2.3.3.180, Xamarin.Android.Support.* 23.3.0)

  • MANIKANTA_GMANIKANTA_G INMember ✭✭
    edited March 2017

    having this problem still.anybody has a solution?

    please any one can help me.

  • MANIKANTA_GMANIKANTA_G INMember ✭✭

    please any one can help me.i am struggling with this issue.

  • ciani.afonsociani.afonso USUniversity ✭✭

    @SANDEEP_G Please, follows the James Montemagno post https://blog.xamarin.com/material-design-for-your-xamarin-forms-android-apps/

    It's work for me updatting my target to 6.0 and using the FormsAppCompatActivity

Sign In or Register to comment.