ActionBar with Tabbed Layout in Android

The code sample below demonstrates how to add Tabbed Layout to Action Bar. The Action Bar will display all the tabs concurrently and make all the tabs equal in size based on the widest tab label.

The Tabbed layout with action bar can be achieved in two ways based on the requirement.

1) Add Tabs to Action Bar:
When you are developing an App in Android with only Xamarin, you can go with this implementation.

a) Add FrameLayout in view, .axml file where selected Tab content will be loaded upon respective tab selection.
     <FrameLayout
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/frameLayout1" />

b) In the onCreate method of an activity, set the NavigationMode on Action Bar as below.

ActionBar.NavigationMode = ActionBarNavigationMode.Tabs;

c) Following code is sample to add the Tab to action bar.

   ActionBar.Tab tab = ActionBar.NewTab();
    tab.SetText(Resources.GetString(Resource.String.tab1_text));
    tab.SetIcon(Resource.Drawable.tab1_icon);
    tab.TabSelected += (sender, args) => {
                           // Do something when tab is selected
                       }
    ActionBar.AddTab(tab);

d) Each tab in the action bar is associated with the fragment, below is the sample code to create a fragment activity.

public class WhatsOnFragment : Fragment
        {
            public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
            {
                View view = inflater.Inflate(Resource.Layout.sample_fragment, null);
                 view.FindViewById<TextView>(Resource.Id.textView1).SetText(Resource.String.whatson_tab_label);
                 return view;
            }
        }

e) Action Bar will notify in application about state changes in a tab with events. Here, fragment will be associated to the FrameLayout onTabSelected event as below.

void TabOnTabSelected(object sender, ActionBar.TabEventArgs tabEventArgs)
        {
            ActionBar.Tab tab = (ActionBar.Tab)sender;

            Fragment frag = new WhatsOnFragment();
            tabEventArgs.FragmentTransaction.Replace(Resource.Id.frameLayout1, frag);
        }

f) Earlier we used to implement the tabs with TabActivity which is deprecated in Android 4.0

2) Add tabs to Action Bar with TabHost:

When you are developing an app in Android Xamarin with MVVMCross, where bindings will be associated with ViewModels, hence below approach will be followed.

a) TabHost widget is added to layout (.axml ) and used as container for tabs.

     <TabHost
             android:id="@android:id/tabhost"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <LinearLayout
                 android:orientation="vertical"
                 android:layout_width="fill_parent"
                 android:layout_height="fill_parent">
                 <TabWidget
                      android:id="@android:id/tabs"
                     android:orientation="horizontal"
                     android:layout_width="fill_parent"
                     android:layout_height="wrap_content"
                     android:layout_weight="0" />
                 <FrameLayout
                      android:id="@android:id/tabcontent"
                     android:layout_width="0dp"
                     android:layout_height="0dp"
                     android:layout_weight="0" />
                 <FrameLayout
                      android:id="@+id/actualtabcontent"
                     android:layout_width="fill_parent"
                     android:layout_height="0dp"
                     android:layout_weight="1" />
            </LinearLayout>
        </TabHost>

a) Make sure to inherit the view.cs with MvxTabsFragmentActivity to get availability of adding tabs.
b) As discussed above, each tab should be associated with fragment activity, in this case it should be MvxFragment as below.

public class Tab1Fragment : MvxFragment
    {
         public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            base.OnCreateView(inflater, container, savedInstanceState);
            var view = this.BindingInflate(Resource.Layout.fragement_tab1, null);
            return view;
        }
    }

c) Below is the fragment layout with viewmodel bindings.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView
         android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        local:MvxBind="Text Item1" />
</LinearLayout>

d) Define the constructor in View.cs  and pass the actual tab content id to base constructor.

public EmployeeView()
            : base(Resource.Layout.EmployeeView, Resource.Id.actualtabcontent)
        {
        }

e) MvxTabFragmentActivity has AddTabs function which can be overrided to add a new Tab. While adding the tab, specify the fragment to load upon selection, tab name, tab image if required and binding ViewModel as below.

protected override void AddTabs(Bundle args)
        {
            AddTab<Tab1Fragment>("1", "Tab 1", args, this.EmployeeViewModel);
             AddTab<Tab2Fragment>("2", "Tab 2", args, this.EmployeeViewModel);
             AddTab<Tab3Fragment>("3", "Tab 3", args, this.EmployeeViewModel);
        }

Please download the working sample from below link.
https://www.nullskull.com/FileUpload/-407123783_Tabs.zip