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;
  10. namespace SlidingTabLayoutTutorial
  11. {
  12. [Activity(Label = "Sliding Tab Layout", MainLauncher = true, Icon = "@drawable/xs")]
  13. public class MainActivity : Activity
  14. {
  16. protected override void OnCreate(Bundle bundle)
  17. {
  18. base.OnCreate(bundle);
  20. // Set our view from the "main" layout resource
  21. SetContentView(Resource.Layout.Main);
  23. FragmentTransaction transaction = FragmentManager.BeginTransaction();
  24. SlidingTabsFragment fragment = new SlidingTabsFragment();
  25. transaction.Replace(Resource.Id.sample_content_fragment, fragment);
  26. transaction.Commit();
  28. }
  30. public override bool OnCreateOptionsMenu(IMenu menu)
  31. {
  32. MenuInflater.Inflate(Resource.Menu.actionbar_main, menu);
  33. return base.OnCreateOptionsMenu(menu);
  34. }
  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;
  9. namespace SlidingTabLayoutTutorial
  10. {
  11. public class SlidingTabScrollView : HorizontalScrollView
  12. {
  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;
  18. private int mTitleOffset;
  20. private int mTabViewLayoutID;
  21. private int mTabViewTextViewID;
  23. private ViewPager mViewPager;
  24. private ViewPager.IOnPageChangeListener mViewPagerPageChangeListener;
  26. private static SlidingTabStrip mTabStrip;
  28. private int mScrollState;
  30. public interface TabColorizer
  31. {
  32. int GetIndicatorColor(int position);
  33. int GetDividerColor(int position);
  34. }
  36. public SlidingTabScrollView(Context context) : this(context, null) { }
  38. public SlidingTabScrollView(Context context, IAttributeSet attrs) : this(context, attrs, 0) { }
  40. public SlidingTabScrollView (Context context, IAttributeSet attrs, int defaultStyle) : base(context, attrs, defaultStyle)
  41. {
  42. //Disable the scroll bar
  43. HorizontalScrollBarEnabled = false;
  45. //Make sure the tab strips fill the view
  46. FillViewport = true;
  47. this.SetBackgroundColor(Android.Graphics.Color.Rgb(0xE5, 0xE5, 0xE5)); //Gray color
  49. mTitleOffset = (int)(TITLE_OFFSET_DIPS * Resources.DisplayMetrics.Density);
  51. mTabStrip = new SlidingTabStrip(context);
  52. this.AddView(mTabStrip, LayoutParams.MatchParent, LayoutParams.MatchParent);
  53. }
  55. public TabColorizer CustomTabColorizer
  56. {
  57. set { mTabStrip.CustomTabColorizer = value; }
  58. }
  60. public int [] SelectedIndicatorColor
  61. {
  62. set { mTabStrip.SelectedIndicatorColors = value; }
  63. }
  65. public int [] DividerColors
  66. {
  67. set { mTabStrip.DividerColors = value; }
  68. }
  70. public ViewPager.IOnPageChangeListener OnPageListener
  71. {
  72. set { mViewPagerPageChangeListener = value; }
  73. }
  75. public ViewPager ViewPager
  76. {
  77. set
  78. {
  79. mTabStrip.RemoveAllViews();
  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. }
  92. void value_PageScrolled(object sender, ViewPager.PageScrolledEventArgs e)
  93. {
  94. int tabCount = mTabStrip.ChildCount;
  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. }
  102. mTabStrip.OnViewPagerPageChanged(e.Position, e.PositionOffset);
  104. View selectedTitle = mTabStrip.GetChildAt(e.Position);
  106. int extraOffset = (selectedTitle != null ? (int)(e.Position * selectedTitle.Width) : 0);
  108. ScrollToTab(e.Position, extraOffset);
  110. if (mViewPagerPageChangeListener != null)
  111. {
  112. mViewPagerPageChangeListener.OnPageScrolled(e.Position, e.PositionOffset, e.PositionOffsetPixels);
  113. }
  115. }
  117. void value_PageScrollStateChanged(object sender, ViewPager.PageScrollStateChangedEventArgs e)
  118. {
  119. mScrollState = e.State;
  121. if (mViewPagerPageChangeListener != null)
  122. {
  123. mViewPagerPageChangeListener.OnPageScrollStateChanged(e.State);
  124. }
  125. }
  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);
  134. }
  136. if (mViewPagerPageChangeListener != null)
  137. {
  138. mViewPagerPageChangeListener.OnPageSelected(e.Position);
  139. }
  140. }
  142. private void PopulateTabStrip()
  143. {
  144. PagerAdapter adapter = mViewPager.Adapter;
  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. }
  156. }
  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. }
  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;
  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. }
  179. if (Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.IceCreamSandwich)
  180. {
  181. textView.SetAllCaps(true);
  182. }
  184. int padding = (int)(TAB_VIEW_PADDING_DIPS * Resources.DisplayMetrics.Density);
  185. textView.SetPadding(padding, padding, padding, padding);
  187. return textView;
  188. }
  190. protected override void OnAttachedToWindow()
  191. {
  192. base.OnAttachedToWindow();
  194. if (mViewPager != null)
  195. {
  196. ScrollToTab(mViewPager.CurrentItem, 0);
  197. }
  198. }
  200. private void ScrollToTab(int tabIndex, int extraOffset)
  201. {
  202. int tabCount = mTabStrip.ChildCount;
  204. if (tabCount == 0 || tabIndex < 0 || tabIndex >= tabCount)
  205. {
  206. //No need to go further, dont scroll
  207. return;
  208. }
  210. View selectedChild = mTabStrip.GetChildAt(tabIndex);
  211. if (selectedChild != null)
  212. {
  213. int scrollAmountX = selectedChild.Left + extraOffset;
  215. if (tabIndex >0 || extraOffset > 0)
  216. {
  217. scrollAmountX -= mTitleOffset;
  218. }
  220. this.ScrollTo(scrollAmountX, 0);
  221. }
  223. }
  225. }
  226. }
SlidingTabFragment.cs
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  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;
  15. namespace SlidingTabLayoutTutorial
  16. {
  17. public class SlidingTabsFragment : Fragment
  18. {
  19. private SlidingTabScrollView mSlidingTabScrollView;
  20. private ViewPager mViewPager;
  22. public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
  23. {
  24. return inflater.Inflate(Resource.Layout.fragment_sample, container, false);
  25. }
  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();
  33. mSlidingTabScrollView.ViewPager = mViewPager;
  34. }
  36. public class SamplePagerAdapter : PagerAdapter
  37. {
  38. List<string> items = new List<string>();
  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. }
  50. public override int Count
  51. {
  52. get { return items.Count; }
  53. }
  55. public override bool IsViewFromObject(View view, Java.Lang.Object obj)
  56. {
  57. return view == obj;
  58. }
  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);
  65. TextView txtTitle = view.FindViewById<TextView>(Resource.Id.item_title);
  66. int pos = position + 1;
  67. txtTitle.Text = pos.ToString();
  69. return view;
  70. }
  72. public string GetHeaderTitle (int position)
  73. {
  74. return items[position];
  75. }
  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;
  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;
  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 };
  26. private const int DEFAULT_DIVIDER_THICKNESS_DIPS = 1;
  27. private const float DEFAULT_DIVIDER_HEIGHT = 0.5f;
  29. //Bottom border
  30. private int mBottomBorderThickness;
  31. private Paint mBottomBorderPaint;
  32. private int mDefaultBottomBorderColor;
  34. //Indicator
  35. private int mSelectedIndicatorThickness;
  36. private Paint mSelectedIndicatorPaint;
  38. //Divider
  39. private Paint mDividerPaint;
  40. private float mDividerHeight;
  42. //Selected position and offset
  43. private int mSelectedPosition;
  44. private float mSelectionOffset;
  46. //Tab colorizer
  47. private SlidingTabScrollView.TabColorizer mCustomTabColorizer;
  48. private SimpleTabColorizer mDefaultTabColorizer;
  49. //Stop copy and paste here........................................................................
  51. //Constructors
  52. public SlidingTabStrip (Context context) : this(context, null)
  53. { }
  55. public SlidingTabStrip (Context context, IAttributeSet attrs) : base(context, attrs)
  56. {
  57. SetWillNotDraw(false);
  59. float density = Resources.DisplayMetrics.Density;
  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);
  66. mDefaultTabColorizer = new SimpleTabColorizer();
  67. mDefaultTabColorizer.IndicatorColors = INDICATOR_COLORS;
  68. mDefaultTabColorizer.DividerColors = DIVIDER_COLORS;
  70. mBottomBorderThickness = (int)(DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS * density);
  71. mBottomBorderPaint = new Paint();
  72. mBottomBorderPaint.Color = GetColorFromInteger(0xC5C5C5); //Gray
  74. mSelectedIndicatorThickness = (int)(SELECTED_INDICATOR_THICKNESS_DIPS * density);
  75. mSelectedIndicatorPaint = new Paint();
  77. mDividerHeight = DEFAULT_DIVIDER_HEIGHT;
  78. mDividerPaint = new Paint();
  79. mDividerPaint.StrokeWidth = (int)(DEFAULT_DIVIDER_THICKNESS_DIPS * density);
  80. }
  82. public SlidingTabScrollView.TabColorizer CustomTabColorizer
  83. {
  84. set
  85. {
  86. mCustomTabColorizer = value;
  87. this.Invalidate();
  88. }
  89. }
  91. public int [] SelectedIndicatorColors
  92. {
  93. set
  94. {
  95. mCustomTabColorizer = null;
  96. mDefaultTabColorizer.IndicatorColors = value;
  97. this.Invalidate();
  98. }
  99. }
  101. public int [] DividerColors
  102. {
  103. set
  104. {
  105. mDefaultTabColorizer = null;
  106. mDefaultTabColorizer.DividerColors = value;
  107. this.Invalidate();
  108. }
  109. }
  111. private Color GetColorFromInteger(int color)
  112. {
  113. return Color.Rgb(Color.GetRedComponent(color), Color.GetGreenComponent(color), Color.GetBlueComponent(color));
  114. }
  116. private int SetColorAlpha(int color, byte alpha)
  117. {
  118. return Color.Argb(alpha, Color.GetRedComponent(color), Color.GetGreenComponent(color), Color.GetBlueComponent(color));
  119. }
  121. public void OnViewPagerPageChanged(int position, float positionOffset)
  122. {
  123. mSelectedPosition = position;
  124. mSelectionOffset = positionOffset;
  125. this.Invalidate();
  126. }
  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;
  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);
  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. }
  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. }
  156. mSelectedIndicatorPaint.Color = GetColorFromInteger(color);
  158. canvas.DrawRect(left, height - mSelectedIndicatorThickness, right, height, mSelectedIndicatorPaint);
  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. }
  169. canvas.DrawRect(0, height - mBottomBorderThickness, Width, height, mBottomBorderPaint);
  170. }
  171. }
  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);
  180. return Color.Rgb((int)r, (int)g, (int)b);
  181. }
  183. private class SimpleTabColorizer : SlidingTabScrollView.TabColorizer
  184. {
  185. private int[] mIndicatorColors;
  186. private int[] mDividerColors;
  188. public int GetIndicatorColor(int position)
  189. {
  190. return mIndicatorColors[position % mIndicatorColors.Length];
  191. }
  193. public int GetDividerColor (int position)
  194. {
  195. return mDividerColors[position % mDividerColors.Length];
  196. }
  198. public int[] IndicatorColors
  199. {
  200. set { mIndicatorColors = value; }
  201. }
  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.