androidxamarin.formsfreshmvvm

Pop to root on tabclick FreshTabbedNavigationContainer on android


Consider a tabbar with "home" and "profile" buttons, when i click on either i switch between two pages, on the "home" page the user can navigate multiple times up in the navigationstack still having the focus on the "home" tab indicating that this is where the user came from.

Now, on iOS whenever the user clicks on "home" from high up in the navigationstack the user is popped to root and all is well, this is not the case on android however, on android the user has to pop one page at a time by clicking on the backbutton to get to the root.

Is this intended behavior, am i doing something wrong, does someone have a clue as to what i can do to get the desired behavior?


Solution

  • This is the intended behavior between iOS and Android .

    If you need to make the Android has the same effect with iOS, you need to custom TabbedPageRenderer to achieve that. And the bottom tab bar effect can custom a FreshTabbedNavigationContainer . Last, we will use MessagingCenter to send message to Forms to pop to Root Page.

    For example, CustomFreshTabbedNavigationContainer class:

    public class CustomFreshTabbedNavigationContainer : FreshTabbedNavigationContainer
    {
        public CustomFreshTabbedNavigationContainer()
        {
            On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
            MessagingCenter.Subscribe<object>(this, "Hi", (sender) =>
            {
                // Do something whenever the "Hi" message is received
                PopToRoot(true);
            });
        }
    }
    

    Used in App.xaml.cs:

    public App()
    {
        InitializeComponent();
    
        var container = new CustomFreshTabbedNavigationContainer();
        container.AddTab<FirstPageModel>("Home", default);
        container.AddTab<ProfilePageModel>("Profile", default);
        MainPage = container;
    }
    

    Now we will create a CustomTabbedPageRenderer in Android:

    public class CustomTabbedPageRenderer : TabbedPageRenderer, BottomNavigationView.IOnNavigationItemSelectedListener
    {
        public CustomTabbedPageRenderer(Context context) : base(context)
        {
        }
    
        int previousItemId = 0;
    
        bool BottomNavigationView.IOnNavigationItemSelectedListener.OnNavigationItemSelected(IMenuItem item)
        {
            base.OnNavigationItemSelected(item);
    
            if (item.IsChecked)
            {
    
                if (previousItemId != item.ItemId)
                {
                    previousItemId = item.ItemId;
                }
                else
                {
                    Console.WriteLine("ok");
                    MessagingCenter.Send<object>(this, "Hi");
                }
            }
    
            return true;
        }
    }
    

    The effect:

    enter image description here

    Note: If need to have the same effect with the top Tabbar in Android, there is different code in CustomTabbedPageRenderer. You can have a look at this discussion.