Use Tab with new ToolBar (AppCompat v7-21) in mvvmcross

Question

I have use support_v7 Toolbar as ActionBar, but i getting problem to add tabs in my activity. Is there any example to add tab with toolbar. I took a look at http://blog.ostebaronen.dk/2013/11/getting-support-v7-working-with.html

Answer 1

I works just the same as normal Android apps. Use the layouts that Gabriele Mariotti's link has. To make the viewpager work with bindings in MvvmCross you need to use something like this: https://github.com/MvvmCross/MvvmCross-AndroidSupport/blob/master/Cirrious.MvvmCross.Droid.Support.V4/MvxFragmentStatePagerAdapter.cs

For better readability: https://gist.github.com/martijn00/23b00172af9e2c798f3d

Here is some code:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways" />
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="16dp"
            app:tabGravity="center"
            app:tabMode="scrollable" />
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>


    public class SomeFragment : MvxFragment<SomeViewModel>
    {
    public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        var view = base.OnCreateView(inflater, container, savedInstanceState);

        var viewPager = view.FindViewById<Android.Support.V4.View.ViewPager>(Resource.Id.viewpager);
        if (viewPager != null)
        {
            var fragments = new List<MvxViewPagerFragmentAdapter.FragmentInfo>
            {
                new MvxViewPagerFragmentAdapter.FragmentInfo
                {
                    FragmentType = typeof(SomeFragment1),
                    Title = "",
                    ViewModel = ViewModel.ViewModelSomething1
                },
                new MvxViewPagerFragmentAdapter.FragmentInfo
                {
                    FragmentType = typeof(SomeFragment2),
                    Title = ViewModel.ViewModelPopular.TextSource.GetText("Title"),
                    ViewModel = ViewModel.ViewModelSomething2
                },
                new MvxViewPagerFragmentAdapter.FragmentInfo
                {
                    FragmentType = typeof(SomeFragment3),
                    Title = ViewModel.ViewModelContributors.TextSource.GetText("Title"),
                    ViewModel = ViewModel.ViewModelSomething3
                }
            };
            viewPager.Adapter = new MvxViewPagerFragmentAdapter(Activity, Activity.SupportFragmentManager, fragments);
        }

        var tabLayout = view.FindViewById<TabLayout>(Resource.Id.tabs);
        tabLayout.SetupWithViewPager(viewPager);

        return view;
    }
}

public class MvxFragmentStatePagerAdapter
        : FragmentStatePagerAdapter
    {
        private readonly Context _context;

        public IEnumerable<FragmentInfo> Fragments { get; private set; }

        public override int Count
        {
            get { return Fragments.Count(); }
        }

        protected MvxFragmentStatePagerAdapter(IntPtr javaReference, JniHandleOwnership transfer)
            : base(javaReference, transfer)
        {
        }

        public MvxFragmentStatePagerAdapter(
            Context context, FragmentManager fragmentManager, IEnumerable<FragmentInfo> fragments)
            : base(fragmentManager)
        {
            _context = context;
            Fragments = fragments;
        }

        public override Fragment GetItem(int position)
        {
            var fragmentInfo = Fragments.ElementAt(position);
            var fragment = Fragment.Instantiate(_context,
                FragmentJavaName(fragmentInfo.FragmentType));
            ((MvxFragment)fragment).ViewModel = fragmentInfo.ViewModel;
            return fragment;
        }

        protected static string FragmentJavaName(Type fragmentType)
        {
            var namespaceText = fragmentType.Namespace ?? "";
            if (namespaceText.Length > 0)
                namespaceText = namespaceText.ToLowerInvariant() + ".";
            return namespaceText + fragmentType.Name;
        }

        public override ICharSequence GetPageTitleFormatted(int position)
        {
            return new Java.Lang.String(Fragments.ElementAt(position).Title);
        }

        public class FragmentInfo
        {
            public string Title { get; set; }

            public Type FragmentType { get; set; }

            public IMvxViewModel ViewModel { get; set; }
        }
    }