Creating Tabbar with icons in Xamarin android

In this blog we are going to learn about how to add a Tab Bar with icons in Xamarin Android

Solution and Steps

Here are the steps to add tabs with icons in Xamarin Android app :

Steps 1 :

Create a empty xamarin android project in visual studio.

Steps 2 :

Now open your main.axml layout file which is in the Resources -> layout folder, you can choose or create your own layout file, in my case i have used main.axml file and paste the code below :

Steps 3

	<?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.design.widget.TabLayout
	android:id="@+id/tabs"
	android:layout_width="match_parent"
	app:tabGravity="fill"
	app:tabMode="fixed"
	app:tabIndicatorHeight="4dp"
	android:background="#01a0e2"
	style="@style/MyCustomTabLayout"
	android:layout_height="wrap_content" />
	</android.support.design.widget.AppBarLayout>
	<android.support.v4.view.ViewPager
	android:id="@+id/viewpager"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	app:layout_behavior="@string/appbar_scrolling_view_behavior" />
	</android.support.design.widget.CoordinatorLayout>

view raw main.axml hosted with ❤ by GitHub

Now add three more file in the layout folder and name it as 'Tablayout1.axml', 'Tablayout2.axml' and 'Tablayout3.axml' and paste the code below in three tab pages :
Tablayout1.axml

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:minWidth="25px"
	android:minHeight="25px">
	<TextView
	android:text="First Page"
	android:textAppearance="?android:attr/textAppearanceLarge"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:id="@+id/textView1" />
	</LinearLayout>

view raw Tablayout1.axml hosted with ❤ by GitHub

Tablayout2.axml

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:minWidth="25px"
	android:minHeight="25px">
	<TextView
	android:text="Second Page"
	android:textAppearance="?android:attr/textAppearanceLarge"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:id="@+id/textView1" />
	</LinearLayout>

view raw Tablayout2.axml hosted with ❤ by GitHub

Tablayout3.axml

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:minWidth="25px"
	android:minHeight="25px">
	<TextView
	android:text="Third Page"
	android:textAppearance="?android:attr/textAppearanceLarge"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:id="@+id/textView1" />
	</LinearLayout>

view raw Tablayout3.axml hosted with ❤ by GitHub

Steps 4 :
Now add three icons for the three different tabs :

Steps 5 :
Now create a folder called "Fragments" in the main root directory of the project and add three fragment in this folder called "TabFragment1.cs", "TabFragment2.cs" and "TabFragment3.cs" and add the below code in each of the fragments  cs file  :

TabFragment1.cs

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Text;
	using Android.App;
	using Android.Content;
	using Android.OS;
	using Android.Runtime;
	using Android.Util;
	using Android.Views;
	using Android.Widget;
	namespace XamarinViewpager.Fragments
	{
	public class TabFragment1 : Android.Support.V4.App.Fragment
	{
	public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
	{
	// Use this to return your custom view for this Fragment
	// return inflater.Inflate(Resource.Layout.YourFragment, container, false);
	var v = inflater.Inflate(Resource.Layout.Tablayout1, container, false);
	return v;
	}
	}
	}

view raw TabFragment1.cs hosted with ❤ by GitHub

TabFragment2.cs

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Text;
	using Android.App;
	using Android.Content;
	using Android.OS;
	using Android.Runtime;
	using Android.Util;
	using Android.Views;
	using Android.Widget;
	namespace XamarinViewpager.Fragments
	{
	public class TabFragment2 : Android.Support.V4.App.Fragment
	{
	public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
	{
	// Use this to return your custom view for this Fragment
	// return inflater.Inflate(Resource.Layout.YourFragment, container, false);
	var v = inflater.Inflate(Resource.Layout.Tablayout2, container, false);
	return v;
	}
	}
	}

view raw TabFragment2.cs hosted with ❤ by GitHub

TabFragment3.cs

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Text;
	using Android.App;
	using Android.Content;
	using Android.OS;
	using Android.Runtime;
	using Android.Util;
	using Android.Views;
	using Android.Widget;
	namespace XamarinViewpager.Fragments
	{
	public class TabFragment3 : Android.Support.V4.App.Fragment
	{
	public override void OnCreate(Bundle savedInstanceState)
	{
	base.OnCreate(savedInstanceState);
	// Create your fragment here
	}
	public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
	{
	var v = inflater.Inflate(Resource.Layout.Tablayout3, container, false);
	return v;
	}
	}
	}

view raw TabFragment3.cs hosted with ❤ by GitHub

Steps 6 :
Now go to MainActivity.cs file and add the following code :

	using System;
	using Android.App;
	using Android.Content;
	using Android.Runtime;
	using Android.Views;
	using Android.Widget;
	using Android.OS;
	using Android.Support.V4.View;
	using Android.Support.V7.App;
	using Android.Support.Design.Widget;
	using V4Fragment = Android.Support.V4.App.Fragment;
	using V4FragmentManager = Android.Support.V4.App.FragmentManager;
	using System.Collections.Generic;
	using XamarinViewpager.Fragments;
	using V7Toolbar = Android.Support.V7.Widget.Toolbar;
	namespace XamarinViewpager
	{
	[Android.Runtime.Preserve(AllMembers = true)]
	[Activity(Label = "XamarinViewpager", MainLauncher = true, Icon = "@drawable/icon", Theme = "@style/Theme.DesignDemo")]
	public class MainActivity : AppCompatActivity
	{
	ViewPager viewpager;
	private int[] imageResId = {
	Resource.Drawable.icon1,
	Resource.Drawable.icon2,
	Resource.Drawable.icon3
	};
	protected override void OnCreate(Bundle bundle)
	{
	Window.RequestFeature(WindowFeatures.NoTitle);
	base.OnCreate(bundle);
	SetContentView(Resource.Layout.Main);
	viewpager = FindViewById<Android.Support.V4.View.ViewPager>(Resource.Id.viewpager);
	if (viewpager.Adapter == null)
	{
	setupViewPager(viewpager);
	}
	else
	{
	viewpager.Adapter.NotifyDataSetChanged();
	}
	var tabLayout = FindViewById<TabLayout>(Resource.Id.tabs);
	tabLayout.SetupWithViewPager(viewpager);
	for (int i = 0; i < tabLayout.TabCount; i++)
	{
	tabLayout.GetTabAt(i).SetIcon(this.GetDrawable(imageResId[i]));
	}
	}
	void setupViewPager(Android.Support.V4.View.ViewPager viewPager)
	{
	var adapter = new Adapter(SupportFragmentManager);
	adapter.AddFragment(new TabFragment1(), "");
	adapter.AddFragment(new TabFragment2(), "");
	adapter.AddFragment(new TabFragment3(), "");
	viewPager.Adapter = adapter;
	viewpager.Adapter.NotifyDataSetChanged();
	}
	}
	class Adapter : Android.Support.V4.App.FragmentPagerAdapter
	{
	List<V4Fragment> fragments = new List<V4Fragment>();
	List<string> fragmentTitles = new List<string>();
	public Adapter(V4FragmentManager fm) : base(fm)
	{
	}
	public void AddFragment(V4Fragment fragment, String title)
	{
	fragments.Add(fragment);
	fragmentTitles.Add(title);
	}
	public override V4Fragment GetItem(int position)
	{
	return fragments[position];
	}
	public override int Count
	{
	get { return fragments.Count; }
	}
	public override Java.Lang.ICharSequence GetPageTitleFormatted(int position)
	{
	return new Java.Lang.String(fragmentTitles[position]);
	}
	}
	}

view raw MainActivity.cs hosted with ❤ by GitHub

Here you can see the following output screen :