Pop to root on tabclick FreshTabbedNavigationContainer on android

Question

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?

Answer 1

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:

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.