Fresh Tabs in Xamarin.Android!

#xamarin #android #tabs #style

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 you not to do it and you should use the boring and less stylish regular tabs!

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. Is it good? Well, let's see it in action!

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:

Step 2. Create your new style!

Style.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

<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 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

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();
        }
    }
}