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 :

Code Sharing by Xamarin

Xamarin provides a code sharing technique throughout all the devices. You just need to write a code once and you can use that code throughout the project.

There are basically three types of code sharing technique provided the the Xamarin platform.

1. Shared Code
2. Portable Class Library

The goal of a code-sharing strategy is to support the architecture shown in this diagram, where a single codebase can be utilized by multiple platforms.

Basic reasons of using Xamarin

Xamarin is a  new emerging technology for the cross platform as well as the native mobile applications.It provides the native user interface by the use of C# language as provide by the android studio for android application using java and the XCode for ios and iphone application using objective C/swift language.

Why Xamarin

Today mobile application development has been growing exponentially because of the huge consumer reachability in mobility. This has created ocean full of opportunity for companies and developers to join this mobile revolution. We want to reach as many as possible consumer which means inclusion of these three platform at least: Android, IOS, Windows.

We all know the dominance and popularity of Native which highly overwhelm HTML apps. Developing native app for major three platforms will not be cost effective as it will require java developer for android, objective-c/swift developer for IOS and .NET developer for windows and respective QA and extra resources.

What is Xamarin

When considering how to build iOS and Android applications, many people think that the native languages, Objective-C, Swift, and Java, are the only choice. However, over the past few years, an entire new ecosystem of platforms for building mobile applications has emerged.

Xamarin is unique in this space by offering a single language – C#, class library, and runtime that works across all three mobile platforms of iOS, Android, and Windows Phone (Windows Phone’s native language is already C#), while still compiling native (non-interpreted) applications that are performant enough even for demanding games.

Each of these platforms has a different feature set and each varies in its ability to write native applications – that is, applications that compile down to native code and that interop fluently with the underlying Java subsystem. For example, some platforms only allow apps to be built in HTML and JavaScript, whereas some are very low-level and only allow C/C++ code. Some platforms don’t even utilize the native control toolkit.