Fresh Tabs in Xamarin.Android!
Tags: xamarin, android, tabs, style
Published: 2019-07-07 09:20:28

Can we break the standards a little bit of Android and design something unique?

I'd say it's possible, not so long ago I was trying to re-write some of my apps that have heavy tab dependency and because nowadays, we have really large phones, the next idea that comes to our mind is the Bottom Tabs! Which in fact are cool, but they can be controversial if you have only 2 tabs! Google even [advice](https://material.io/design/components/bottom-navigation.html#usage) you not to do it and you should use the boring and less stylish regular tabs!

<img src="https://www.androidhive.info/wp-content/uploads/2015/09/android-tab-layout-landscape-view.png" width="400px" />

They tend to look boring and not nice at all and let's not talk to add an icon, that's a Gordian Knot. There is no straightforward code if you want to support the latest versions of Android.

After that I started to think and search for an alternative and magically, I found this cool control: [BubbleTabs by Florent CHAMPIGNY](https://github.com/florent37). Is it good? Well, let's see it in action!

<img src="https://raw.githubusercontent.com/florent37/BubbleTab/master/media/withScreen_cropped.png" width="400px" />

Which one do you like the most?

I'd say you prefer the second one as I do and therefore, I spent some time bringing the control to live in Xamarin. How to use it? Let's see!

### **Step 1. Download the package from NuGet:**

[![NuGet Badge BubbleTabs.Xamarin](https://buildstats.info/nuget/BubbleTabs.Xamarin)](https://www.nuget.org/packages/BubbleTabs.Xamarin)


### **Step 2. Create your new style!**

**Style.xml**

```xml
<resources>
  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
	<!-- Customize your theme here. -->
	<item name="colorPrimary">@color/colorPrimary</item>
	<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
	<item name="colorAccent">@color/colorAccent</item>
  </style>
</resources>
```

### **Step 3. Configure your Layout**

```xml
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="vertical">

	<com.github.florent37.bubbletab.BubbleTab
		android:id="@+id/bubbleTab"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:clipToPadding="false"
		android:background="@android:color/white"
		android:elevation="10dp"
		app:bubbleTab_circleColor="@color/colorAccent"
		app:bubbleTab_circleRatio="1.25">
		<ImageView
			android:layout_width="match_parent"
			android:layout_height="match_parent"
			android:layout_weight="1"
			android:padding="16dp"
			android:src="@drawable/icon1" />
		<ImageView
			android:layout_width="match_parent"
			android:layout_height="match_parent"
			android:layout_weight="1"
			android:padding="16dp"
			android:src="@drawable/icon2" />
		<ImageView
			android:layout_width="match_parent"
			android:layout_height="match_parent"
			android:layout_weight="1"
			android:padding="16dp"
			android:src="@drawable/icon3" />
	</com.github.florent37.bubbletab.BubbleTab>

	<android.support.v4.view.ViewPager
		android:id="@+id/viewPager"
		android:layout_width="match_parent"
		android:layout_height="match_parent"/>
</LinearLayout>
```

This code Layout is just for an example of a tab:

**bubblepage_tab.xml**

```xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/recyclerView"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="#e9eaed"
	android:orientation="vertical">
</android.support.v7.widget.RecyclerView>
```

### **Step 4. Add your Tabs to your activity and build your Adapter**

```csharp
public class YourActivity : AppCompatActivity
{
	protected override void OnCreate(Bundle savedInstanceState)
	{
		base.OnCreate(savedInstanceState);

		// Set our view from the "main" layout resource
		SetContentView(Resource.Layout.Main);
		BubbleTab bubbleTab= FindViewById<BubbleTab>(Resource.Id.bubbleTab);
		ViewPager viewPager= FindViewById<ViewPager>(Resource.Id.viewPager);

		viewPager.Adapter = new FakeAdapter(SupportFragmentManager);

		bubbleTab.SetupWithViewPager(viewPager);
	}

	public class FakeAdapter : FragmentStatePagerAdapter
	{
		public FakeAdapter(Android.Support.V4.App.FragmentManager fm) : base(fm)
		{
			Fm = fm;
		}

		public override int Count
		{
			get { return 5; }
		}

		public Android.Support.V4.App.FragmentManager Fm { get; }

		public override Android.Support.V4.App.Fragment GetItem(int position)
		{
			switch (position)
			{
				default:
					return FakeFragment.NewInstance();
			}
		}
	}

	public class FakeFragment : Android.Support.V4.App.Fragment
	{
		public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
		{
			return inflater.Inflate(Resource.Layout.bubbletab_page, container, false);
		}


		public static Android.Support.V4.App.Fragment NewInstance()
		{
			return new FakeFragment();
		}
	}
}
```

And that's all! Now you have beautiful and fresh tabs in Xamarin!

![example](https://raw.githubusercontent.com/florent37/BubbleTab/master/media/video.gif)

### Follow me on:

|  Personal  |  LinkedIn  |YouTube|Instagram|Cyber Prophets|Sharing Your Stories|
|:----------|:----------|:------------:|:------------:|:------------:|:------------:|
|[![Personal](https://raw.githubusercontent.com/FANMixco/federiconavarrete/master/img/favicons/favicon.png)](https://federiconavarrete.com)|[![LinkedIn](https://i.stack.imgur.com/idQWu.png)](https://www.linkedin.com/in/federiconavarrete)|[![YouTube](https://i.stack.imgur.com/CFPMR.png)](https://youtube.com/c/FedericoNavarrete)|[![Instagram](https://i.stack.imgur.com/PIfqY.png)](https://www.instagram.com/federico_the_consultant)|[![RedCircle Podcast](https://i.stack.imgur.com/4XICF.png)](https://redcircle.com/shows/cyber-prophets)|[![RedCircle Podcast](https://i.stack.imgur.com/4XICF.png)](https://redcircle.com/shows/sharing-your-stories)|

[![sponsor me](https://raw.githubusercontent.com/FANMixco/Xamarin-SearchBar/master/bmc-rezr5vpd.gif)](https://www.buymeacoffee.com/fanmixco)