Xamarin Fragment Swipeable Views Android

In this tutorial you will learn how to create xamarin fragment swipeable views android application.
I will lead you to build a Time Table android app with swipe views,view pager.

Let me give you some information fragment concerning classes which you will use in this tutorial.

Fragment

You can learn about Fragments in detail from this Tutorial.

Go through these tutorials about Tabs and Action Bar.

Swipe Views

Swipeable Views is a horizontal navigation.

Allow users to move from one screen to another with simple swipe views gesture with good user experience.You can swipe views between Tabs,detail view etc.

Fragment Pager Adapter

Fragments Pager Adapter is a subclass of Pager Adapter.

It implement Pager Adapter which represent each layout/activity as a fragment.

Retain it’s position in fragment manager until user move back to that particular fragment or other fragments.

Fragments Pager Adapter is best navigation for fixed numbers of pages/layouts.

View Pager

View Pager is a layout manager used to flip screens of data from left to right vice versa.

Create new xamarin fragment swipeable views android application project.

Go to your Main.axml file and put Frame Layout,View.

Xamarin Fragment Swipeable,xamarin fragment swipeable views,xamarin fragment swipeable views android,fragment swipeable views android,

Next create two new layouts,add View Pager to one layout and add textview to another.

fragment_sample.axml

Xamarin Fragment Swipeable,xamarin fragment swipeable views,xamarin fragment swipeable views android,fragment swipeable views android,

pager_item.axml

Xamarin Fragment Swipeable,xamarin fragment swipeable views,xamarin fragment swipeable views android,fragment swipeable views android,

Ok we are done with layouts.

Now create new class SlidingTabScrollView.cs. In this class we design the tab layout with scrollview,View pager.

SlidingTabScrollView.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.Support.V4.View;
using Android.Util;

namespace SlidingTabLayoutTutorial
{
    public class SlidingTabScrollView : HorizontalScrollView
    {

        private const int TITLE_OFFSET_DIPS = 24;
        private const int TAB_VIEW_PADDING_DIPS = 16;
        private const int TAB_VIEW_TEXT_SIZE_SP = 12;

        private int mTitleOffset;

        private int mTabViewLayoutID;
        private int mTabViewTextViewID;

        private ViewPager mViewPager;
        private ViewPager.IOnPageChangeListener mViewPagerPageChangeListener;

        private static SlidingTabStrip mTabStrip;

        private int mScrollState;

        public interface TabColorizer
        {
            int GetIndicatorColor(int position);
            int GetDividerColor(int position);
        }

        public SlidingTabScrollView(Context context) : this(context, null) { }

        public SlidingTabScrollView(Context context, IAttributeSet attrs) : this(context, attrs, 0) { }

        public SlidingTabScrollView (Context context, IAttributeSet attrs, int defaultStyle) : base(context, attrs, defaultStyle)
        {
            //Disable the scroll bar
            HorizontalScrollBarEnabled = false;

            //Make sure the tab strips fill the view
            FillViewport = true;
            this.SetBackgroundColor(Android.Graphics.Color.Rgb(0xE6, 0xE6, 0xE6)); //Gray color

            mTitleOffset = (int)(TITLE_OFFSET_DIPS * Resources.DisplayMetrics.Density);

            mTabStrip = new SlidingTabStrip(context);
            this.AddView(mTabStrip, LayoutParams.MatchParent, LayoutParams.MatchParent);
        }

        public TabColorizer CustomTabColorizer
        {
            set { mTabStrip.CustomTabColorizer = value; }
        }

        public int [] SelectedIndicatorColor
        {
            set { mTabStrip.SelectedIndicatorColors = value; }
        }

        public int [] DividerColors
        {
            set { mTabStrip.DividerColors = value; }
        }

        public ViewPager.IOnPageChangeListener OnPageListener
        {
            set { mViewPagerPageChangeListener = value; }
        }

        public ViewPager ViewPager
        {
            set
            {
                mTabStrip.RemoveAllViews();

                mViewPager = value;
                if (value != null)
                {
                    value.PageSelected += value_PageSelected;
                    value.PageScrollStateChanged += value_PageScrollStateChanged;
                    value.PageScrolled += value_PageScrolled;
                    PopulateTabStrip();
                }
            }
        }

        void value_PageScrolled(object sender, ViewPager.PageScrolledEventArgs e)
        {
            int tabCount = mTabStrip.ChildCount;

            if ((tabCount == 0) || (e.Position < 0) || (e.Position >= tabCount))
            {
                //if any of these conditions apply, return, no need to scroll
                return;
            }

            mTabStrip.OnViewPagerPageChanged(e.Position, e.PositionOffset);

            View selectedTitle = mTabStrip.GetChildAt(e.Position);

            int extraOffset = (selectedTitle != null ? (int)(e.Position * selectedTitle.Width) : 0);

            ScrollToTab(e.Position, extraOffset);

            if (mViewPagerPageChangeListener != null)
            {
                mViewPagerPageChangeListener.OnPageScrolled(e.Position, e.PositionOffset, e.PositionOffsetPixels);
            }

        }

        void value_PageScrollStateChanged(object sender, ViewPager.PageScrollStateChangedEventArgs e)
        {
            mScrollState = e.State;

            if (mViewPagerPageChangeListener != null)
            {
                mViewPagerPageChangeListener.OnPageScrollStateChanged(e.State);
            }
        }

        void value_PageSelected(object sender, ViewPager.PageSelectedEventArgs e)
        {
            if (mScrollState == ViewPager.ScrollStateIdle)
            {
                mTabStrip.OnViewPagerPageChanged(e.Position, 0f);
                ScrollToTab(e.Position, 0);

            }

            if (mViewPagerPageChangeListener != null)
            {
                mViewPagerPageChangeListener.OnPageSelected(e.Position);
            }
        }

        private void PopulateTabStrip()
        {
            PagerAdapter adapter = mViewPager.Adapter;
            
            for (int i = 0; i < adapter.Count; i++) { TextView tabView = CreateDefaultTabView(Context); tabView.Text = ((SlidingTabsFragment.SamplePagerAdapter)adapter).GetHeaderTitle(i); tabView.SetTextColor(Android.Graphics.Color.Black); tabView.Tag = i; tabView.Click += tabView_Click; mTabStrip.AddView(tabView); } } void tabView_Click(object sender, EventArgs e) { TextView clickTab = (TextView)sender; int pageToScrollTo = (int)clickTab.Tag; mViewPager.CurrentItem = pageToScrollTo; } private TextView CreateDefaultTabView(Android.Content.Context context) { TextView textView = new TextView(context); textView.Gravity = GravityFlags.Center; textView.SetTextSize(ComplexUnitType.Sp, TAB_VIEW_TEXT_SIZE_SP); textView.Typeface = Android.Graphics.Typeface.DefaultBold; if (Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.Honeycomb)
            {
                TypedValue outValue = new TypedValue();
                Context.Theme.ResolveAttribute(Android.Resource.Attribute.SelectableItemBackground, outValue, false);
                textView.SetBackgroundResource(outValue.ResourceId);
            }

            if (Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.IceCreamSandwich)
            {
                textView.SetAllCaps(true);
            }

            int padding = (int)(TAB_VIEW_PADDING_DIPS * Resources.DisplayMetrics.Density);
            textView.SetPadding(padding, padding, padding, padding);

            return textView;
        }

        protected override void OnAttachedToWindow()
        {
            base.OnAttachedToWindow();

            if (mViewPager != null)
            {
                ScrollToTab(mViewPager.CurrentItem, 0);
            }
        }

        private void ScrollToTab(int tabIndex, int extraOffset)
        {
            int tabCount = mTabStrip.ChildCount;

            if (tabCount == 0 || tabIndex < 0 || tabIndex >= tabCount)
            {
               //No need to go further, dont scroll
                return;
            }

            View selectedChild = mTabStrip.GetChildAt(tabIndex);
            if (selectedChild != null)
            {
                int scrollAmountX = selectedChild.Left + extraOffset;

                if (tabIndex >0 || extraOffset > 0)
                {
                    scrollAmountX -= mTitleOffset;
                }

                this.ScrollTo(scrollAmountX, 0);
            }

        }

    }
}

After done with this class go to your fragment_sample.axml layout.Add this class to layout.

Xamarin Fragment Swipeable,xamarin fragment swipeable views,xamarin fragment swipeable views android,fragment swipeable views android,

Now create new fragment class which means just a class.Extend this class with fragment because using this class we will replace our fragments with optional fragment clicked by user.

SlidingTabsFragment.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Util;
using Android.Views;
using Android.Widget;
using Android.Support.V4.View;

namespace SlidingTabLayoutTutorial
{
    public class SlidingTabsFragment : Fragment
    {
        private SlidingTabScrollView mSlidingTabScrollView;
        private ViewPager mViewPager;

        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            return inflater.Inflate(Resource.Layout.fragment_sample, container, false);
        }

        public override void OnViewCreated(View view, Bundle savedInstanceState)
        {
            mSlidingTabScrollView = view.FindViewById(Resource.Id.sliding_tabs);
            mViewPager = view.FindViewById(Resource.Id.viewpager);
            mViewPager.Adapter = new SamplePagerAdapter();

            mSlidingTabScrollView.ViewPager = mViewPager;
        }

        public class SamplePagerAdapter : PagerAdapter
        {
            List items = new List();

            public SamplePagerAdapter() : base()
            {
                items.Add("Monday");
                items.Add("Tuesday");
                items.Add("Wednesday");
                items.Add("Thursday");
                items.Add("Friday");
                items.Add("Saturday");
            }

            public override int Count
            {
                get { return items.Count; }
            }

            public override bool IsViewFromObject(View view, Java.Lang.Object obj)
            {
                return view == obj;
            }

            public override Java.Lang.Object InstantiateItem(ViewGroup container, int position)
            {
                View view = LayoutInflater.From(container.Context).Inflate(Resource.Layout.pager_item, container, false);
                container.AddView(view);

                TextView txtTitle = view.FindViewById(Resource.Id.item_title);
                int pos = position + 1;
				if (pos == 1)
				{
					txtTitle.Text = "Monday";
				}
				else if (pos == 2)
				{
					txtTitle.Text = "Tuesday";
				}
				else if (pos == 3)
				{
					txtTitle.Text = "Wednesday";
				}
				else if (pos == 4)
				{
					txtTitle.Text = "Thursday";
				}
				else if (pos == 5)
				{
					txtTitle.Text = "Friday";
				}
				else if (pos == 6)
				{
					txtTitle.Text = "Saturday";
				}
                //txtTitle.Text = pos.ToString();

                return view;
            }

            public string GetHeaderTitle (int position)
            {
                return items[position];
            }

            public override void DestroyItem(ViewGroup container, int position, Java.Lang.Object obj)
            {
                container.RemoveView((View)obj);
            }
        }
    }
}

Go to your MainActivity.cs class.

using System;
using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;

namespace SlidingTabLayoutTutorial
{
    [Activity(Label = "TimeTableApp", MainLauncher = true, Icon = "@drawable/xs")]
    public class MainActivity : Activity
    {

        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);

            FragmentTransaction transaction = FragmentManager.BeginTransaction();
            SlidingTabsFragment fragment = new SlidingTabsFragment();
            transaction.Replace(Resource.Id.sample_content_fragment, fragment);
            transaction.Commit();

        }

        
       
    }
}


At last go to your Xamarin Fragment Swipeable Views Android project Values directory and add resources layout.

Xamarin Fragment Swipeable,xamarin fragment swipeable views,xamarin fragment swipeable views android,fragment swipeable views android,

Run your xamarin fragment swipeable views android application project to see how you can swipe views.

Xamarin Fragment Swipeable,xamarin fragment swipeable views,xamarin fragment swipeable views android,fragment swipeable views android,

that’s it for xamarin fragment swipeable views android tutorial.

Thanks