Download Code

Xamarin Fragments ActionBar Tabs Android

In this tutorial you will learn how to create Xamarin Fragments ActionBar tabs Android Application.

Before starting this tutorial you should have some knowledge of

Fragments

A fragment is a particular portion of UI in an activity.

One Activity can contain multiple fragments to build flexible UI.

Create new android application project.Go to your Main.axml File and add Frame Layout.Xamarin Fragments,Xamarin fragments actionbar,xamarin fragments actionbar tabs,xamarin fragments actionbar tabs android,fragments actionbar tabs android,

Next create new layout by right click on Layout > New File > Layout.Add text view and ImageView in that.

Xamarin Fragments,Xamarin fragments actionbar,xamarin fragments actionbar tabs,xamarin fragments actionbar tabs android,fragments actionbar tabs android,

Now Don’t touch your MainActivity.cs Class 🙂 yet.

Create new class Fragments in which you will create three fragment classes.

Fragments.cs

using Android.App;
using Android.OS;
using Android.Views;
using Android.Widget;

namespace com.xamarin.example.actionbar.tabs
{
    public class SpeakersFragment : Fragment
    {
        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            View view = inflater.Inflate(Resource.Layout.simple_fragment, null);
            view.FindViewById(Resource.Id.textView1).SetText(Resource.String.speakers_tab_label);
            view.FindViewById(Resource.Id.imageView1).SetImageResource(Resource.Drawable.ic_action_speakers);
            return view;
        }
    }

    public class SessionsFragment : Fragment
    {
        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            View view = inflater.Inflate(Resource.Layout.simple_fragment, null);
            view.FindViewById(Resource.Id.textView1).SetText(Resource.String.sessions_tab_label);
            view.FindViewById(Resource.Id.imageView1).SetImageResource(Resource.Drawable.ic_action_sessions);
            return view;
        }
    }

    public class WhatsOnFragment : Fragment
    {
        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            View view = inflater.Inflate(Resource.Layout.simple_fragment, null);
            view.FindViewById(Resource.Id.textView1).SetText(Resource.String.whatson_tab_label);
            view.FindViewById(Resource.Id.imageView1).SetImageResource(Resource.Drawable.ic_action_whats_on);
            return view;
        }
    }
}

Now go to your MainActivity.cs class.

  • Create Fragments array
  • Set ActionBar Navigation Mode
  • Method to set instance in individual tab
  • At last use fragments to replace them

MainActivity.cs

using Android.App;
using Android.OS;
using Android.Util;

namespace com.xamarin.example.actionbar.tabs
{
    [Activity(Label = "@string/app_name", MainLauncher = true, Icon = "@drawable/ic_launcher")]
    public class MainActivity : Activity
    {
        static readonly string Tag = "ActionBarTabsSupport";

        Fragment[] _fragments;

        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

            SetContentView(Resource.Layout.Main);

            ActionBar.NavigationMode = ActionBarNavigationMode.Tabs;
            SetContentView(Resource.Layout.Main);

            _fragments = new Fragment[]
                         {
                             new WhatsOnFragment(),
                             new SpeakersFragment(),
                             new SessionsFragment()
                         };

            AddTabToActionBar(Resource.String.whatson_tab_label, Resource.Drawable.ic_action_whats_on);
            AddTabToActionBar(Resource.String.speakers_tab_label, Resource.Drawable.ic_action_speakers);
            AddTabToActionBar(Resource.String.sessions_tab_label, Resource.Drawable.ic_action_sessions);
        }

        void AddTabToActionBar(int labelResourceId, int iconResourceId)
        {
            ActionBar.Tab tab = ActionBar.NewTab()
                                         .SetText(labelResourceId)
                                         .SetIcon(iconResourceId);
            tab.TabSelected += TabOnTabSelected;
            ActionBar.AddTab(tab);
        }

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

            Log.Debug(Tag, "The tab {0} has been selected.", tab.Text);
            Fragment frag = _fragments[tab.Position];
            tabEventArgs.FragmentTransaction.Replace(Resource.Id.frameLayout1, frag);
        }
    }
}

Strings.XML

Xamarin Fragments,Xamarin fragments actionbar,xamarin fragments actionbar tabs,xamarin fragments actionbar tabs android,fragments actionbar tabs android,

Run your Xamarin Fragments ActionBar tabs Android application project.

Xamarin Fragments,Xamarin fragments actionbar,xamarin fragments actionbar tabs,xamarin fragments actionbar tabs android,fragments actionbar tabs android,

That’s it for Xamarin Fragments ActionBar tabs Android tutorial.

Thanks.