Ensuring CollectionView Scrollbar is Always Visible on Android in MAUI

Environment

Product	CollectionView for .NET MAUI
Version	7.1.0

Description

Currently, the CollectionView's scrollbars are not visible by default on Android devices. I want to make the scrollbar always visible to enhance user experience.

This KB article also answers the following questions:

How to enable the vertical scrollbar in the CollectionView on Android?
How to customize the scrollbar appearance in a MAUI CollectionView on Android?
How to use a custom drawable for the scrollbar thumb in an Android MAUI applications?

Solution

To make the CollectionView's scrollbar always visible on Android, follow these steps:

1. Create the Scrollbar Thumb Drawable

First, create a thumb drawable for the scrollbar in the Android project's Resources -> drawable folder. Name this file "scrollview_thumb.xml". Here is an example of how the XML content might look:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle" >
  <corners android:radius="4dp" />
  <solid android:color="@color/customColorScrollbar"/>
</shape>

Ensure that the build action of this file is set to MauiXaml.

2. Configure the ScrollView Handler

Access the native ScrollView through a mapper to the ScrollViewHandler and apply the necessary configurations to make the scrollbar visible:

csharp

Microsoft.Maui.Handlers.ScrollViewHandler.Mapper.AppendToMapping("MyCustom", (handler, view) => {

#if ANDROID
    handler.PlatformView.VerticalScrollBarEnabled = true;
    handler.PlatformView.ScrollBarStyle = Android.Views.ScrollbarStyles.OutsideOverlay;
    handler.PlatformView.VerticalScrollbarThumbDrawable = AndroidX.AppCompat.Content.Res.AppCompatResources.GetDrawable(Microsoft.Maui.ApplicationModel.Platform.AppContext, Drawable.scrollview_thumb);
    handler.PlatformView.ScrollbarFadingEnabled = false;
    handler.PlatformView.ScrollBarSize = 20;
#endif
});

By setting VerticalScrollBarEnabled to true and specifying a custom drawable for the VerticalScrollbarThumbDrawable, the vertical scrollbar will always be visible on Android devices.