New to Telerik UI for .NET MAUI? Start a free 30-day trial

Ensuring CollectionView Scrollbar is Always Visible on Android in MAUI

Updated over 6 months ago

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

<?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.