Forum Xamarin.Forms

How to disable sliding animation in Android TabBar with Xamarin.Forms?

nmdiasnmdias USMember ✭✭

I'm using a TabbedPage.

Whenever I select a new Tab, there is a sliding animation. I would like to disable this.

There is a Xamarin Sample that does this, without the sliding animation. How can I replicate this?

I'm using a custom ToolBar and a TabBar, and also a FormsAppCompatActivity in my AppActivity.

The Sample provided by Xamarin isn't, so I'm not sure where I can disable these animations.

Thank you

Best Answer

  • nmdiasnmdias USMember ✭✭
    Accepted Answer

    Similar to the Native Android approach described here:

    [assembly: ExportRenderer(typeof(TabsPage), typeof(TabsPageRenderer))]
    namespace App.Droid.Renderers
    {
        public class TabsPageRenderer : TabbedPageRenderer
        {
            ViewPager _viewPager;
            TabLayout _tabLayout;
    
            protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
            {
                base.OnElementChanged(e);
    
                for (int i = 0; i < ChildCount; i++)
                {
                    var v = GetChildAt(i);
                    if (v is ViewPager)
                        _viewPager = (ViewPager)v;
                    else if (v is TabLayout)
                        _tabLayout = (TabLayout)v;
                }
    
                _viewPager.SetPageTransformer(true, new NoAnimationPageTransformer());
    
            }
    
        }
    
        public class NoAnimationPageTransformer : Java.Lang.Object, Android.Support.V4.View.ViewPager.IPageTransformer
        {
            public void TransformPage(Android.Views.View view, float position)
            {
                if (position < 0)
                {
                    view.ScrollX = (int)((float)(view.Width) * position);
                }
                else if (position > 0)
                {
                  view.ScrollX = -(int)((float)(view.Width) * -position);
                }
                else
                {
                  view.ScrollX = 0;
                }
    
            }
    
        }
    
    }
    

Answers

  • nmdiasnmdias USMember ✭✭
    Accepted Answer

    Similar to the Native Android approach described here:

    [assembly: ExportRenderer(typeof(TabsPage), typeof(TabsPageRenderer))]
    namespace App.Droid.Renderers
    {
        public class TabsPageRenderer : TabbedPageRenderer
        {
            ViewPager _viewPager;
            TabLayout _tabLayout;
    
            protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
            {
                base.OnElementChanged(e);
    
                for (int i = 0; i < ChildCount; i++)
                {
                    var v = GetChildAt(i);
                    if (v is ViewPager)
                        _viewPager = (ViewPager)v;
                    else if (v is TabLayout)
                        _tabLayout = (TabLayout)v;
                }
    
                _viewPager.SetPageTransformer(true, new NoAnimationPageTransformer());
    
            }
    
        }
    
        public class NoAnimationPageTransformer : Java.Lang.Object, Android.Support.V4.View.ViewPager.IPageTransformer
        {
            public void TransformPage(Android.Views.View view, float position)
            {
                if (position < 0)
                {
                    view.ScrollX = (int)((float)(view.Width) * position);
                }
                else if (position > 0)
                {
                  view.ScrollX = -(int)((float)(view.Width) * -position);
                }
                else
                {
                  view.ScrollX = 0;
                }
    
            }
    
        }
    
    }
    
  • ReinierKops.1905ReinierKops.1905 NLUniversity ✭✭
    edited July 2018

    With Xamarin.Forms 3.0 and above, the following code will work:

    '[assembly: ExportRenderer(typeof(TabbedPage), typeof(TabsPageRenderer))]

    namespace App.Droid.Renderers
    {
    public class TabsPageRenderer : TabbedPageRenderer
    {
    Context _context;
    ViewPager _viewPager;
    TabLayout _tabLayout;

        public TabsPageRenderer(Context context)
        {
            _context = context;
        }
    
        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);
    
            var view = ((ViewGroup)GetChildAt(0));
    
            for (int i = 0; i < view.ChildCount; i++)
            {
                var v = view.GetChildAt(i);
    
                if (v is ViewPager)
                    _viewPager = (ViewPager)v;
                else if (v is TabLayout)
                    _tabLayout = (TabLayout)v;
            }
    
            _viewPager.SetPageTransformer(true, new NoAnimationPageTransformer());
        }
    }
    
    public class NoAnimationPageTransformer : Java.Lang.Object, ViewPager.IPageTransformer
    {
        public void TransformPage(Android.Views.View view, float position)
        {
            if (position < 0)
            {
                view.ScrollX = (int)((float)(view.Width) * position);
            }
            else if (position > 0)
            {
                view.ScrollX = -(int)((float)(view.Width) * -position);
            }
            else
            {
                view.ScrollX = 0;
            }
    
        }
    
    }
    

    }'

  • JohnSmith.0620JohnSmith.0620 USMember ✭✭
    edited September 2018

    Hi,

    I have tried the code you both suggested, but GetChildAt returns a RelativeLayout (probably because I'm using a bottom tab layout). I don't suppose you guys know a way around it?

    Thanks!

  • mazucenamazucena Member

    @JohnSmith.0620 said:
    Hi,

    I have tried the code you both suggested, but GetChildAt returns a RelativeLayout (probably because I'm using a bottom tab layout). I don't suppose you guys know a way around it?

    Thanks!

    Have you found a solution @JJohnSmith.0620?

  • mazucenamazucena Member

    @JohnSmith.0620 said:
    Hi,

    I have tried the code you both suggested, but GetChildAt returns a RelativeLayout (probably because I'm using a bottom tab layout). I don't suppose you guys know a way around it?

    Thanks!

    Have you found a solution @JJohnSmith.0620?

  • marcelo_lunamarcelo_luna Member
    edited September 2019

    If you are using bottom tab layout just set

    android:TabbedPage.IsSmoothScrollEnabled="false"

    inside the tag TabbedPage

Sign In or Register to comment.