question

MacDev-4847 avatar image
0 Votes"
MacDev-4847 asked JarvanZhang-MSFT edited

ScrollView Paging for Android

Xamarin Forms. I am using a ScrollView, which contains a WebView and I need the scrollView to work on Android in the same way as the iOS scrollView PAGING. How to make paging for Android?

dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered JarvanZhang-MSFT edited

The previous post is about scrolling vertically. To add the function to a horizontal scrollView, try using the following code.

[assembly: ExportRenderer(typeof(ScrollView), typeof(CustomScrollViewRenderer))]
namespace TestApplication_5.Droid
{
    public class CustomScrollViewRenderer : ScrollViewRenderer
    {
        ScrollView scrollView;
        public CustomScrollViewRenderer(Context context) : base(context)
        {
        }
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
            scrollView = Element as Xamarin.Forms.ScrollView;
        }
        public override void Fling(int velocityY)
        {
            base.Fling(velocityY / 1000);
        }

        double mOldScrollX = 0;
        double mCurScrollX = 0;
        public override bool OnTouchEvent(MotionEvent ev)
        {
            switch (ev.Action)
            {
                case MotionEventActions.Down:
                    mOldScrollX = scrollView.ScrollX;
                    break;
                case MotionEventActions.Up:

                    mCurScrollX = scrollView.ScrollX;
                    if (mCurScrollX - mOldScrollX > 50)
                    {
                        scrollView.ScrollToAsync(mOldScrollX + scrollView.Width, 0, true);
                    }
                    else if ((mCurScrollX - mOldScrollX) < -50)
                    {
                        scrollView.ScrollToAsync(mOldScrollX - scrollView.Width, 0, true);
                    }
                    else
                    {
                        scrollView.ScrollToAsync(mOldScrollX, 0, true);
                    }
                    break;
                default:
                    break;
            }
            return false;
        }
    }
}
· 7
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

This code works, but it moves one step forward or backward.

This is code does not work:

case MotionEventActions.Down:
mOldScrollX = scrollView.ScrollX;
break;

0 Votes 0 ·

but it moves one step forward or backward. This is code does not work

Hi, MacDev. Could you post more details about the issue?

0 Votes 0 ·

Uploaded video to cloud

2ombfor


0 Votes 0 ·
Show more comments
JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered MacDev-4847 commented

Hello,​

Welcome to our Microsoft Q&A platform!

Native Android ListView doesn't provide a property to enable the paging function directly. For this function, try to create custom ScrollView renderer to set touch listener to rewrite the OnTouch event. Here is the sample code, you could refer to it.

[assembly: ExportRenderer(typeof(ScrollView), typeof(CustomScrollViewRenderer))]
namespace TestApplication_5.Droid
{
    public class CustomScrollViewRenderer : ScrollViewRenderer
    {
        Xamarin.Forms.ScrollView scrollView;
        public CustomScrollViewRenderer(Context context) : base(context)
        {
        }
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
            scrollView = Element as Xamarin.Forms.ScrollView;
            this.SetOnTouchListener(new CustomTouchListenter(scrollView));
        }

        public override void Fling(int velocityY)
        {
            base.Fling(velocityY / 1000); //reduce the scrolling's inertia 
        }
    }

    public class CustomTouchListenter : Java.Lang.Object, IOnTouchListener
    {
        ScrollView scrollView;
        public CustomTouchListenter(ScrollView scrollView)
        {
            this.scrollView = scrollView;
        }

        double mOldScrollY = 0;
        double mCurScrollY = 0;
        public bool OnTouch(Android.Views.View v, MotionEvent e)
        {
            switch (e.Action)
            {

                case MotionEventActions.Down:
                    mOldScrollY = scrollView.ScrollY;
                    break;
                case MotionEventActions.Up:
                    mCurScrollY = scrollView.ScrollY;
                    if (mCurScrollY - mOldScrollY > 100)
                    {
                        scrollView.ScrollToAsync(0, mOldScrollY + 800, true);
                    }
                    else if ((mCurScrollY - mOldScrollY) < -100)
                    {
                        scrollView.ScrollToAsync(0, mOldScrollY - 800, true);
                    }
                    else
                    {
                        scrollView.ScrollToAsync(0, mOldScrollY, true);
                    }
                    break;
                default:
                    break;
            }
            return false;
        }
    }
}

To scroll a page each time, you could try the CarouselView control. CarouselView is a view for presenting data in a scrollable layout, where users can swipe to move through a collection of items.

Best Regards,

Jarvan Zhang


If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Stop scrolling does not work.

0 Votes 0 ·

What does the 'stop scrolling' mean? Could you please post more details about that?

0 Votes 0 ·

My horizontal scroll should scroll with pauses, as it works in iOS ScrollView Paging, if I have a 414 width screen, then the scroll should scroll to the left or right by 414 px and pause, but on Android it will scroll non-stop and there is no PAGING effect like in iOS

0 Votes 0 ·