DEV Community 👩‍💻👨‍💻

Cover image for Fresh Tabs in Xamarin.Android!
Federico Navarrete
Federico Navarrete

Posted on • Updated on

Fresh Tabs in Xamarin.Android!

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:

NuGet Badge BubbleTabs.Xamarin

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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();
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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

example

Follow me at:

LinkedIn YouTube Instagram Cyber Prophets Sharing Your Stories
LinkedIn YouTube Instagram RedCircle Podcast RedCircle Podcast

sponsor me

Top comments (0)

Take Your Github Repository To The Next Level

Take Your Github Repository To The Next Level 🚀️: A step-by-step guide on creating the perfect Github repository.