Download Code

Xamarin Tabs Layout Example Android

In this tutorial you’ll learn how to create xamarin tabs layout example android application.

First i’ll give you some basic information about all the classes you will use in this tutorial/project.

Xamarin Tabs Layout

Tab layout android is basically used to switch between different views.Each contains grouped content.

Tab Host

Tab Host is basically contains two views.First set of tab label and a Frame Layout object which responsible to display contents or views.

Tab Widget

Tab Widget used to display list of tabs with label.Each tab represent a page.Tab Widget use parent element TabHost to switch different views.

TabActivity

TabActivity class is deprecated in API Level 13.It is replaced with Fragments.

You are not concern with this class i am just letting you to know about this point.

You can also use Activity class for simple tab not for swipe able views or tabs layout.For Fragments read this tutorial.

Ok you”ll design basic tab layout in this tutorial.

First i’ll tell you that you have two ways to create tabs and each tabs concerning activity so we will go for first one and then second one.

Now create new android application project.

After creating project go to your Main.axml.You should have Relative Layout within your xml file like this.

Xamarin Tabs,Xamarin Tabs Layout,Xamarin Tabs Layout Example,Xamarin Tabs Layout Example Android,Tabs Layout Example android,

Now next go to UI components panel Composite.Find TabHost,drag and drop on your layout.Then XML will be.

Xamarin Tabs,Xamarin Tabs Layout,Xamarin Tabs Layout Example,Xamarin Tabs Layout Example Android,Tabs Layout Example android,

Now if you go to Main.axml view then you will see.

  • TabHost -> Linear Layout ->  TabWidget ->    FrameLayout
  • Linear Layout (can contains multiple UI components)
  • Linear Layout (can contains multiple UI components)
  • Linear Layout (can contains multiple UI components)

You can add buttons or any UI components within each Linear Layout within Frame Layout.Now if you run android application project you will have nothing because you haven’t setup tabs in your MainActivity.java class.

Next you will setup tabs in your activity.First create two variables.One for TabHost and the other is for TabSpecs.

Then refer your tab host in your class and call a method setup() to add tabs within tab host like this.

Now use TabSpecs which means now you are going to add some specification of tabs like name,tag,action etc.Then after doing that your final MainAcitivty.cs will look like this.

MainActivity.cs

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

namespace XamarinTabLayout
{
	[Activity(Label = "XamarinTabLayout", MainLauncher = true, Icon = "@mipmap/icon")]
#pragma warning disable CS0618 // Type or member is obsolete
	public class MainActivity : Activity
#pragma warning restore CS0618 // Type or member is obsolete
	{
		TabHost th;
		TabHost.TabSpec spec;

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

			// Set our view from the "main" layout resource
			SetContentView(Resource.Layout.Main);
			th = FindViewById(Resource.Id.tabhost);

			th.Setup();
			spec = th.NewTabSpec("tab1");
			spec.SetContent(Resource.Id.tab1);
			spec.SetIndicator("Check In");
			th.AddTab(spec);

			spec = th.NewTabSpec("tab1");
			spec.SetContent(Resource.Id.tab2);
			spec.SetIndicator("Check In");

			th.AddTab(spec);

			spec = th.NewTabSpec("tab1");
			spec.SetContent(Resource.Id.tab3);
			spec.SetIndicator("Check In");

			th.AddTab(spec);
		}

	}
}

Now Run your xamarin tabs layout example android application project.

Xamarin Tabs,Xamarin Tabs Layout,Xamarin Tabs Layout Example,Xamarin Tabs Layout Example Android,Tabs Layout Example android,

that’s it for xamarin tabs layout example android tutorial.

Thanks