Scroll bar indicator in Scroll View, Collection View , List View

Question

There are Collection views /Scroll views used in our app where user can actually scroll and see things , How do i indicate to the user that this is a scroll view and user can actually scroll to see more details when he lands on a page ?

1. Scroll Bar visibility set to always does not help
2. Is there a way to change colors ? - In Xamarin forms we use custom Renderer . I tried the same in MAUI but scrollViewRenderer is obselete and it was suggesting us to use handlers , I tried the same but could not succeed.

What is the best way to indicate to the user that its a scroll view and they have to scroll?

Answer 1

Hello,

For Android, you could customize the scrollbar and keep it visible all the time in the following ways:

Step 1. Create a singleton of MainActivity in MainActivity.cs

public class MainActivity : MauiAppCompatActivity {
    public static MainActivity Instance { get; private set; }
    protected override void OnCreate(Bundle bundle)
    {
        base.OnCreate(bundle);
        Instance = this;
    }
}

Step 2. Add a custom scrollbar and keep it visible.

        protected override void OnHandlerChanged()
        {
            base.OnHandlerChanged();
#if ANDROID
            var view = test_coll.Handler.PlatformView as Android.Views.View; // test_coll is the name of collectionview
            view.VerticalScrollBarEnabled = true;
            view.ScrollBarStyle = Android.Views.ScrollbarStyles.InsideOverlay;
// You c use your own scrollbars by putting your own custom scrollbar styles into `Platforms/Android/Resources/Drawable` folder.
            view.VerticalScrollbarThumbDrawable = AppCompatResources.GetDrawable(MainActivity.Instance, Resource.Drawable.btn_checkbox_checked_mtrl);
            view.ScrollbarFadingEnabled = false;
#endif
        }

For iOS, the scroll view only shows the scroll bar when scrolling, which is not customizable due to Apple's limitations.

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

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.

Answer 2

I have resolved this based on SDK levels,

Please find the answer. Grid Scroll is the name of my collection view /scroll view

       protected override void OnHandlerChanged()
       {
            base.OnHandlerChanged();
#if ANDROID
            if (Android.OS.Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.Q)
            {
                var view = GridScroll.Handler.PlatformView as Android.Views.View;
                view.VerticalScrollBarEnabled = true;
                view.ScrollBarStyle = Android.Views.ScrollbarStyles.InsideOverlay;
                view.VerticalScrollbarThumbDrawable = AndroidX.AppCompat.Content.Res.AppCompatResources.GetDrawable(MainActivity.Instance, Resource.Drawable.custom_scrollbar_style);
                view.ScrollbarFadingEnabled = false;
            }
            else 
            {
                Java.Lang.Reflect.Field mScrollCacheField = Java.Lang.Class.FromType(typeof(Android.Views.View)).GetDeclaredField("mScrollCache");
                mScrollCacheField.Accessible = true;
                var scr = GridScroll.Handler.PlatformView as Android.Views.View;
                scr.ScrollBarStyle = Android.Views.ScrollbarStyles.InsideOverlay;
                scr.VerticalScrollBarEnabled = true;
                scr.ScrollbarFadingEnabled = false;
                Java.Lang.Object mScrollCache = mScrollCacheField.Get(scr);// scr is your Scroll View  

                Java.Lang.Reflect.Field scrollBarField = mScrollCache.Class.GetDeclaredField("scrollBar");
                scrollBarField.Accessible = true;
                Java.Lang.Object scrollBar = scrollBarField.Get((Java.Lang.Object)mScrollCache);


                Java.Lang.Reflect.Method method = scrollBar.Class.GetDeclaredMethod("setVerticalThumbDrawable", Java.Lang.Class.FromType(typeof(Android.Graphics.Drawables.Drawable)));
                method.Accessible = true;
                method.Invoke(scrollBar, Android.App.Application.Context.GetDrawable(Resource.Drawable.custom_scrollbar_style));

            }
#endif
        }