Xamarin

Creating Sliding Tab Layout Interface Using Xamarin Android Using Visual Studio RC 2017

Introduction

Xamarin is a development platform, which allows us to code native, cross-platform iOS, Android and Windows phone apps in C#.

UI Designers

The tools which we use to create mobile user interfaces are called the designers. These generate Extensible Markup Language (XML) files in their respective proprietary file formats. Two designers are available from Xamarin: Xamarin Designer for Android, Xamarin Designer for iOS. With the availability of these designers, the need for the original, native XML editors has diminished. Anything you might need to build Android or iOS UI's can be found in Xamarin’s tools. However, iOS developers still frequently use the Xcode Interface Builder and Android developers (less frequently) use XML editors such as the Android Development Tools (ADT) plug-in for Eclipse. An XML layout is an XML layout and the tool is largely a matter of taste and personal preference and even the decision to use a designer tool lies on him. Some Xamarin developers are opting to code UIs by hand in C# for all the platforms with no designer use whatsoever. I recommend the designers to help them to learn the file formats, UI elements and their properties. Some people use a designer tool like training wheels, until they’re ready to ride freestyle.

Requirements

  • Visual Studio RC 2017
  • Xamarin Studio Packages should be installed
  • Self confidence with creativity

Steps should be followed

Please follow my steps to create sliding Tab layout interface to use this tutorial effectively.

Step 1

Launch Visual Studio RC 2017 and go to file new project.

Step 2

There is a need to select Android template from the list, name the Application, press to create the Project and select where to save the project.

 

Step 3

Here, we go to our new project has been created and then we need to navigate to Designer Page. To open the Designer page, you need to open Solution Explorer ViewàSolution Explorer.

 

Step 4

Now, open Designer page and in Solution ExploreràResourcesàLayoutàMain.Xaml, you need to select, as shown below.

 

Step 5

Add the code given below in Layout folder as Main.axml and fragment_sample.axml and pager_item.axml.

Main.axml
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     android:background="#E2E2E2"  
  7.     android:id="@+id/sample_main_layout">  
  8.     <View  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="1dp"  
  11.         android:background="@android:color/darker_gray" />  
  12.     <FrameLayout  
  13.         android:id="@+id/sample_content_fragment"  
  14.         android:layout_weight="2"  
  15.         android:layout_width="match_parent"  
  16.         android:layout_height="0px" />  
  17. </LinearLayout>  
pager_item.axml
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical"  
  6.     android:gravity="center">  
  7.     <TextView  
  8.         android:id="@+id/item_subtitle"  
  9.         android:layout_width="wrap_content"  
  10.         android:layout_height="wrap_content"  
  11.         android:textAppearance="?android:attr/textAppearanceLarge"  
  12.         android:text="Page:" />  
  13.     <TextView  
  14.         android:id="@+id/item_title"  
  15.         android:layout_width="wrap_content"  
  16.         android:layout_height="wrap_content"  
  17.         android:textSize="80sp" />  
  18. </LinearLayout>  
 fragment_sample.axml
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical">  
  6.     <SlidingTabLayoutTutorial.SlidingTabScrollView  
  7.         android:id="@+id/sliding_tabs"  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="wrap_content" />  
  10.     <android.support.v4.view.ViewPager  
  11.         android:id="@+id/viewpager"  
  12.         android:layout_width="match_parent"  
  13.         android:layout_height="0px"  
  14.         android:layout_weight="1"  
  15.         android:background="@android:color/white" />  
  16. </LinearLayout>  
Step 6

Add C# code given below in your project under .SlidingTabLayoutTutorials.

MainActivity.cs
  1. using System;  
  2. using Android.App;  
  3. using Android.Content;  
  4. using Android.Runtime;  
  5. using Android.Views;  
  6. using Android.Widget;  
  7. using Android.OS;  
  8. using App10;  
  9.   
  10. namespace SlidingTabLayoutTutorial  
  11. {  
  12.     [Activity(Label = "Sliding Tab Layout", MainLauncher = true, Icon = "@drawable/xs")]  
  13.     public class MainActivity : Activity  
  14.     {  
  15.   
  16.         protected override void OnCreate(Bundle bundle)  
  17.         {  
  18.             base.OnCreate(bundle);  
  19.   
  20.             // Set our view from the "main" layout resource  
  21.             SetContentView(Resource.Layout.Main);  
  22.   
  23.             FragmentTransaction transaction = FragmentManager.BeginTransaction();  
  24.             SlidingTabsFragment fragment = new SlidingTabsFragment();  
  25.             transaction.Replace(Resource.Id.sample_content_fragment, fragment);  
  26.             transaction.Commit();  
  27.   
  28.         }  
  29.   
  30.         public override bool OnCreateOptionsMenu(IMenu menu)  
  31.         {  
  32.             MenuInflater.Inflate(Resource.Menu.actionbar_main, menu);  
  33.             return base.OnCreateOptionsMenu(menu);  
  34.         }  
  35.   
  36.     }  
  37. }  
SlidingTabScrollView.cs
  1. using System;  
  2. using System.Linq;  
  3. using Android.Content;  
  4. using Android.OS;  
  5. using Android.Views;  
  6. using Android.Widget;  
  7. using Android.Util;  
  8.   
  9. namespace SlidingTabLayoutTutorial  
  10. {  
  11.     public class SlidingTabScrollView : HorizontalScrollView  
  12.     {  
  13.   
  14.         private const int TITLE_OFFSET_DIPS = 24;  
  15.         private const int TAB_VIEW_PADDING_DIPS = 16;  
  16.         private const int TAB_VIEW_TEXT_SIZE_SP = 12;  
  17.   
  18.         private int mTitleOffset;  
  19.   
  20.         private int mTabViewLayoutID;  
  21.         private int mTabViewTextViewID;  
  22.   
  23.         private ViewPager mViewPager;  
  24.         private ViewPager.IOnPageChangeListener mViewPagerPageChangeListener;  
  25.   
  26.         private static SlidingTabStrip mTabStrip;  
  27.   
  28.         private int mScrollState;  
  29.   
  30.         public interface TabColorizer  
  31.         {  
  32.             int GetIndicatorColor(int position);  
  33.             int GetDividerColor(int position);  
  34.         }  
  35.   
  36.         public SlidingTabScrollView(Context context) : this(context, null) { }  
  37.   
  38.         public SlidingTabScrollView(Context context, IAttributeSet attrs) : this(context, attrs, 0) { }  
  39.   
  40.         public SlidingTabScrollView (Context context, IAttributeSet attrs, int defaultStyle) : base(context, attrs, defaultStyle)  
  41.         {  
  42.             //Disable the scroll bar  
  43.             HorizontalScrollBarEnabled = false;  
  44.   
  45.             //Make sure the tab strips fill the view  
  46.             FillViewport = true;  
  47.             this.SetBackgroundColor(Android.Graphics.Color.Rgb(0xE5, 0xE5, 0xE5)); //Gray color  
  48.   
  49.             mTitleOffset = (int)(TITLE_OFFSET_DIPS * Resources.DisplayMetrics.Density);  
  50.   
  51.             mTabStrip = new SlidingTabStrip(context);  
  52.             this.AddView(mTabStrip, LayoutParams.MatchParent, LayoutParams.MatchParent);  
  53.         }  
  54.   
  55.         public TabColorizer CustomTabColorizer  
  56.         {  
  57.             set { mTabStrip.CustomTabColorizer = value; }  
  58.         }  
  59.   
  60.         public int [] SelectedIndicatorColor  
  61.         {  
  62.             set { mTabStrip.SelectedIndicatorColors = value; }  
  63.         }  
  64.   
  65.         public int [] DividerColors  
  66.         {  
  67.             set { mTabStrip.DividerColors = value; }  
  68.         }  
  69.   
  70.         public ViewPager.IOnPageChangeListener OnPageListener  
  71.         {  
  72.             set { mViewPagerPageChangeListener = value; }  
  73.         }  
  74.   
  75.         public ViewPager ViewPager  
  76.         {  
  77.             set  
  78.             {  
  79.                 mTabStrip.RemoveAllViews();  
  80.   
  81.                 mViewPager = value;  
  82.                 if (value != null)  
  83.                 {  
  84.                     value.PageSelected += value_PageSelected;  
  85.                     value.PageScrollStateChanged += value_PageScrollStateChanged;  
  86.                     value.PageScrolled += value_PageScrolled;  
  87.                     PopulateTabStrip();  
  88.                 }  
  89.             }  
  90.         }  
  91.   
  92.         void value_PageScrolled(object sender, ViewPager.PageScrolledEventArgs e)  
  93.         {  
  94.             int tabCount = mTabStrip.ChildCount;  
  95.   
  96.             if ((tabCount == 0) || (e.Position < 0) || (e.Position >= tabCount))  
  97.             {  
  98.                 //if any of these conditions apply, return, no need to scroll  
  99.                 return;  
  100.             }  
  101.   
  102.             mTabStrip.OnViewPagerPageChanged(e.Position, e.PositionOffset);  
  103.   
  104.             View selectedTitle = mTabStrip.GetChildAt(e.Position);  
  105.   
  106.             int extraOffset = (selectedTitle != null ? (int)(e.Position * selectedTitle.Width) : 0);  
  107.   
  108.             ScrollToTab(e.Position, extraOffset);  
  109.   
  110.             if (mViewPagerPageChangeListener != null)  
  111.             {  
  112.                 mViewPagerPageChangeListener.OnPageScrolled(e.Position, e.PositionOffset, e.PositionOffsetPixels);  
  113.             }  
  114.   
  115.         }  
  116.   
  117.         void value_PageScrollStateChanged(object sender, ViewPager.PageScrollStateChangedEventArgs e)  
  118.         {  
  119.             mScrollState = e.State;  
  120.   
  121.             if (mViewPagerPageChangeListener != null)  
  122.             {  
  123.                 mViewPagerPageChangeListener.OnPageScrollStateChanged(e.State);  
  124.             }  
  125.         }  
  126.   
  127.         void value_PageSelected(object sender, ViewPager.PageSelectedEventArgs e)  
  128.         {  
  129.             if (mScrollState == ViewPager.ScrollStateIdle)  
  130.             {  
  131.                 mTabStrip.OnViewPagerPageChanged(e.Position, 0f);  
  132.                 ScrollToTab(e.Position, 0);  
  133.   
  134.             }  
  135.   
  136.             if (mViewPagerPageChangeListener != null)  
  137.             {  
  138.                 mViewPagerPageChangeListener.OnPageSelected(e.Position);  
  139.             }  
  140.         }  
  141.   
  142.         private void PopulateTabStrip()  
  143.         {  
  144.             PagerAdapter adapter = mViewPager.Adapter;  
  145.               
  146.             for (int i = 0; i < adapter.Count; i++)  
  147.             {  
  148.                 TextView tabView = CreateDefaultTabView(Context);  
  149.                 tabView.Text = ((SlidingTabsFragment.SamplePagerAdapter)adapter).GetHeaderTitle(i);  
  150.                 tabView.SetTextColor(Android.Graphics.Color.Black);  
  151.                 tabView.Tag = i;  
  152.                 tabView.Click += tabView_Click;  
  153.                 mTabStrip.AddView(tabView);  
  154.             }  
  155.   
  156.         }  
  157.   
  158.         void tabView_Click(object sender, EventArgs e)  
  159.         {  
  160.             TextView clickTab = (TextView)sender;  
  161.             int pageToScrollTo = (int)clickTab.Tag;  
  162.             mViewPager.CurrentItem = pageToScrollTo;  
  163.         }  
  164.   
  165.         private TextView CreateDefaultTabView(Android.Content.Context context)  
  166.         {  
  167.             TextView textView = new TextView(context);  
  168.             textView.Gravity = GravityFlags.Center;  
  169.             textView.SetTextSize(ComplexUnitType.Sp, TAB_VIEW_TEXT_SIZE_SP);  
  170.             textView.Typeface = Android.Graphics.Typeface.DefaultBold;  
  171.   
  172.             if (Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.Honeycomb)  
  173.             {  
  174.                 TypedValue outValue = new TypedValue();  
  175.                 Context.Theme.ResolveAttribute(Android.Resource.Attribute.SelectableItemBackground, outValue, false);  
  176.                 textView.SetBackgroundResource(outValue.ResourceId);  
  177.             }  
  178.   
  179.             if (Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.IceCreamSandwich)  
  180.             {  
  181.                 textView.SetAllCaps(true);  
  182.             }  
  183.   
  184.             int padding = (int)(TAB_VIEW_PADDING_DIPS * Resources.DisplayMetrics.Density);  
  185.             textView.SetPadding(padding, padding, padding, padding);  
  186.   
  187.             return textView;  
  188.         }  
  189.   
  190.         protected override void OnAttachedToWindow()  
  191.         {  
  192.             base.OnAttachedToWindow();  
  193.   
  194.             if (mViewPager != null)  
  195.             {  
  196.                 ScrollToTab(mViewPager.CurrentItem, 0);  
  197.             }  
  198.         }  
  199.   
  200.         private void ScrollToTab(int tabIndex, int extraOffset)  
  201.         {  
  202.             int tabCount = mTabStrip.ChildCount;  
  203.   
  204.             if (tabCount == 0 || tabIndex < 0 || tabIndex >= tabCount)  
  205.             {  
  206.                //No need to go further, dont scroll  
  207.                 return;  
  208.             }  
  209.   
  210.             View selectedChild = mTabStrip.GetChildAt(tabIndex);  
  211.             if (selectedChild != null)  
  212.             {  
  213.                 int scrollAmountX = selectedChild.Left + extraOffset;  
  214.   
  215.                 if (tabIndex >0 || extraOffset > 0)  
  216.                 {  
  217.                     scrollAmountX -= mTitleOffset;  
  218.                 }  
  219.   
  220.                 this.ScrollTo(scrollAmountX, 0);  
  221.             }  
  222.   
  223.         }  
  224.   
  225.     }  
  226. }  
SlidingTabFragment.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5.   
  6. using Android.App;  
  7. using Android.Content;  
  8. using Android.OS;  
  9. using Android.Runtime;  
  10. using Android.Util;  
  11. using Android.Views;  
  12. using Android.Widget;  
  13. using Android.Support.V4.View;  
  14.   
  15. namespace SlidingTabLayoutTutorial  
  16. {  
  17.     public class SlidingTabsFragment : Fragment  
  18.     {  
  19.         private SlidingTabScrollView mSlidingTabScrollView;  
  20.         private ViewPager mViewPager;  
  21.   
  22.         public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)  
  23.         {  
  24.             return inflater.Inflate(Resource.Layout.fragment_sample, container, false);  
  25.         }  
  26.   
  27.         public override void OnViewCreated(View view, Bundle savedInstanceState)  
  28.         {  
  29.             mSlidingTabScrollView = view.FindViewById<SlidingTabScrollView>(Resource.Id.sliding_tabs);  
  30.             mViewPager = view.FindViewById<ViewPager>(Resource.Id.viewpager);  
  31.             mViewPager.Adapter = new SamplePagerAdapter();  
  32.   
  33.             mSlidingTabScrollView.ViewPager = mViewPager;  
  34.         }  
  35.   
  36.         public class SamplePagerAdapter : PagerAdapter  
  37.         {  
  38.             List<string> items = new List<string>();  
  39.   
  40.             public SamplePagerAdapter() : base()  
  41.             {  
  42.                 items.Add("Xamarin");  
  43.                 items.Add("Android");  
  44.                 items.Add("Tutorial");  
  45.                 items.Add("Part");  
  46.                 items.Add("12");  
  47.                 items.Add("Hooray");  
  48.             }  
  49.   
  50.             public override int Count  
  51.             {  
  52.                 get { return items.Count; }  
  53.             }  
  54.   
  55.             public override bool IsViewFromObject(View view, Java.Lang.Object obj)  
  56.             {  
  57.                 return view == obj;  
  58.             }  
  59.   
  60.             public override Java.Lang.Object InstantiateItem(ViewGroup container, int position)  
  61.             {  
  62.                 View view = LayoutInflater.From(container.Context).Inflate(Resource.Layout.pager_item, container, false);  
  63.                 container.AddView(view);  
  64.   
  65.                 TextView txtTitle = view.FindViewById<TextView>(Resource.Id.item_title);  
  66.                 int pos = position + 1;  
  67.                 txtTitle.Text = pos.ToString();  
  68.   
  69.                 return view;  
  70.             }  
  71.   
  72.             public string GetHeaderTitle (int position)  
  73.             {  
  74.                 return items[position];  
  75.             }  
  76.   
  77.             public override void DestroyItem(ViewGroup container, int position, Java.Lang.Object obj)  
  78.             {  
  79.                 container.RemoveView((View)obj);  
  80.             }  
  81.         }  
  82.     }  
  83. }  
SlidingTabStrips.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5.   
  6. using Android.App;  
  7. using Android.Content;  
  8. using Android.OS;  
  9. using Android.Runtime;  
  10. using Android.Views;  
  11. using Android.Widget;  
  12. using Android.Graphics;  
  13. using Android.Util;  
  14.   
  15. namespace SlidingTabLayoutTutorial  
  16. {  
  17.     public class SlidingTabStrip : LinearLayout  
  18.     {  
  19.         //Copy and paste from here................................................................  
  20.         private const int DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS = 2;  
  21.         private const byte DEFAULT_BOTTOM_BORDER_COLOR_ALPHA = 0X26;  
  22.         private const int SELECTED_INDICATOR_THICKNESS_DIPS = 8;  
  23.         private int[] INDICATOR_COLORS = { 0x19A319, 0x0000FC };  
  24.         private int[] DIVIDER_COLORS = { 0xC5C5C5 };  
  25.   
  26.         private const int DEFAULT_DIVIDER_THICKNESS_DIPS = 1;  
  27.         private const float DEFAULT_DIVIDER_HEIGHT = 0.5f;  
  28.   
  29.         //Bottom border  
  30.         private int mBottomBorderThickness;  
  31.         private Paint mBottomBorderPaint;  
  32.         private int mDefaultBottomBorderColor;  
  33.   
  34.         //Indicator  
  35.         private int mSelectedIndicatorThickness;  
  36.         private Paint mSelectedIndicatorPaint;  
  37.   
  38.         //Divider  
  39.         private Paint mDividerPaint;  
  40.         private float mDividerHeight;  
  41.   
  42.         //Selected position and offset  
  43.         private int mSelectedPosition;  
  44.         private float mSelectionOffset;  
  45.   
  46.         //Tab colorizer  
  47.         private SlidingTabScrollView.TabColorizer mCustomTabColorizer;  
  48.         private SimpleTabColorizer mDefaultTabColorizer;  
  49.         //Stop copy and paste here........................................................................  
  50.   
  51.         //Constructors  
  52.         public SlidingTabStrip (Context context) : this(context, null)  
  53.         { }  
  54.   
  55.         public SlidingTabStrip (Context context, IAttributeSet attrs) : base(context, attrs)  
  56.         {  
  57.             SetWillNotDraw(false);  
  58.   
  59.             float density = Resources.DisplayMetrics.Density;  
  60.   
  61.             TypedValue outValue = new TypedValue();  
  62.             context.Theme.ResolveAttribute(Android.Resource.Attribute.ColorForeground, outValue, true);  
  63.             int themeForeGround = outValue.Data;  
  64.             mDefaultBottomBorderColor = SetColorAlpha(themeForeGround, DEFAULT_BOTTOM_BORDER_COLOR_ALPHA);  
  65.   
  66.             mDefaultTabColorizer = new SimpleTabColorizer();  
  67.             mDefaultTabColorizer.IndicatorColors = INDICATOR_COLORS;  
  68.             mDefaultTabColorizer.DividerColors = DIVIDER_COLORS;  
  69.   
  70.             mBottomBorderThickness = (int)(DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS * density);  
  71.             mBottomBorderPaint = new Paint();  
  72.             mBottomBorderPaint.Color = GetColorFromInteger(0xC5C5C5); //Gray  
  73.   
  74.             mSelectedIndicatorThickness = (int)(SELECTED_INDICATOR_THICKNESS_DIPS * density);  
  75.             mSelectedIndicatorPaint = new Paint();  
  76.   
  77.             mDividerHeight = DEFAULT_DIVIDER_HEIGHT;  
  78.             mDividerPaint = new Paint();  
  79.             mDividerPaint.StrokeWidth = (int)(DEFAULT_DIVIDER_THICKNESS_DIPS * density);  
  80.         }  
  81.   
  82.         public SlidingTabScrollView.TabColorizer CustomTabColorizer  
  83.         {  
  84.             set  
  85.             {  
  86.                 mCustomTabColorizer = value;  
  87.                 this.Invalidate();  
  88.             }  
  89.         }  
  90.   
  91.         public int [] SelectedIndicatorColors  
  92.         {  
  93.             set  
  94.             {  
  95.                 mCustomTabColorizer = null;  
  96.                 mDefaultTabColorizer.IndicatorColors = value;  
  97.                 this.Invalidate();  
  98.             }  
  99.         }  
  100.   
  101.         public int [] DividerColors  
  102.         {  
  103.             set  
  104.             {  
  105.                 mDefaultTabColorizer = null;  
  106.                 mDefaultTabColorizer.DividerColors = value;  
  107.                 this.Invalidate();  
  108.             }  
  109.         }  
  110.   
  111.         private Color GetColorFromInteger(int color)  
  112.         {  
  113.             return Color.Rgb(Color.GetRedComponent(color), Color.GetGreenComponent(color), Color.GetBlueComponent(color));  
  114.         }  
  115.   
  116.         private int SetColorAlpha(int color, byte alpha)  
  117.         {  
  118.             return Color.Argb(alpha, Color.GetRedComponent(color), Color.GetGreenComponent(color), Color.GetBlueComponent(color));  
  119.         }  
  120.   
  121.         public void OnViewPagerPageChanged(int position, float positionOffset)  
  122.         {  
  123.             mSelectedPosition = position;  
  124.             mSelectionOffset = positionOffset;  
  125.             this.Invalidate();  
  126.         }  
  127.   
  128.         protected override void OnDraw(Canvas canvas)  
  129.         {  
  130.             int height = Height;  
  131.             int tabCount = ChildCount;  
  132.             int dividerHeightPx = (int)(Math.Min(Math.Max(0f, mDividerHeight), 1f) * height);  
  133.             SlidingTabScrollView.TabColorizer tabColorizer = mCustomTabColorizer != null ? mCustomTabColorizer : mDefaultTabColorizer;  
  134.   
  135.             //Thick colored underline below the current selection  
  136.             if (tabCount > 0)  
  137.             {  
  138.                 View selectedTitle = GetChildAt(mSelectedPosition);  
  139.                 int left = selectedTitle.Left;  
  140.                 int right = selectedTitle.Right;  
  141.                 int color = tabColorizer.GetIndicatorColor(mSelectedPosition);  
  142.   
  143.                 if (mSelectionOffset > 0f && mSelectedPosition < (tabCount - 1))  
  144.                 {  
  145.                     int nextColor = tabColorizer.GetIndicatorColor(mSelectedPosition + 1);  
  146.                     if (color != nextColor)  
  147.                     {  
  148.                         color = blendColor(nextColor, color, mSelectionOffset);  
  149.                     }  
  150.   
  151.                     View nextTitle = GetChildAt(mSelectedPosition + 1);  
  152.                     left = (int)(mSelectionOffset * nextTitle.Left + (1.0f - mSelectionOffset) * left);  
  153.                     right = (int)(mSelectionOffset * nextTitle.Right + (1.0f - mSelectionOffset) * right);  
  154.                 }  
  155.   
  156.                 mSelectedIndicatorPaint.Color = GetColorFromInteger(color);  
  157.   
  158.                 canvas.DrawRect(left, height - mSelectedIndicatorThickness, right, height, mSelectedIndicatorPaint);  
  159.   
  160.                 //Creat vertical dividers between tabs  
  161.                 int separatorTop = (height - dividerHeightPx) / 2;  
  162.                 for (int i = 0; i < ChildCount; i++)  
  163.                 {  
  164.                     View child = GetChildAt(i);  
  165.                     mDividerPaint.Color = GetColorFromInteger(tabColorizer.GetDividerColor(i));  
  166.                     canvas.DrawLine(child.Right, separatorTop, child.Right, separatorTop + dividerHeightPx, mDividerPaint);  
  167.                 }  
  168.   
  169.                 canvas.DrawRect(0, height - mBottomBorderThickness, Width, height, mBottomBorderPaint);  
  170.             }  
  171.         }  
  172.   
  173.         private int blendColor(int color1, int color2, float ratio)  
  174.         {  
  175.             float inverseRatio = 1f - ratio;  
  176.             float r = (Color.GetRedComponent(color1) * ratio) + (Color.GetRedComponent(color2) * inverseRatio);  
  177.             float g = (Color.GetGreenComponent(color1) * ratio) + (Color.GetGreenComponent(color2) * inverseRatio);  
  178.             float b = (Color.GetBlueComponent(color1) * ratio) + (Color.GetBlueComponent(color2) * inverseRatio);  
  179.   
  180.             return Color.Rgb((int)r, (int)g, (int)b);  
  181.         }  
  182.   
  183.         private class SimpleTabColorizer : SlidingTabScrollView.TabColorizer  
  184.         {  
  185.             private int[] mIndicatorColors;  
  186.             private int[] mDividerColors;  
  187.   
  188.             public int GetIndicatorColor(int position)  
  189.             {  
  190.                 return mIndicatorColors[position % mIndicatorColors.Length];  
  191.             }  
  192.   
  193.             public int GetDividerColor (int position)  
  194.             {  
  195.                 return mDividerColors[position % mDividerColors.Length];  
  196.             }  
  197.              
  198.             public int[] IndicatorColors  
  199.             {  
  200.                 set { mIndicatorColors = value; }  
  201.             }  
  202.   
  203.             public int[] DividerColors  
  204.             {  
  205.                 set { mDividerColors = value; }  
  206.             }  
  207.         }  
  208.     }  
  209. }  
Conclusion

This project shows you how to create SlidingTabLayout. 

Output

 



Thank you for reading. 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs