Skip to content

Latest commit

 

History

History
76 lines (58 loc) · 2.8 KB

collectionview-scrollbar-visible-android.md

File metadata and controls

76 lines (58 loc) · 2.8 KB
title description type page_title slug tags res_type
Ensuring CollectionView Scrollbar is Always Visible on Android in MAUI
This article demonstrates how to make the CollectionView's scrollbar always visible on Android
how-to
How to Keep the CollectionView Scrollbar Always Visible on Android
collectionview-scrollbar-visible-android
collectionview, scrollbar, android, visible, maui,
kb

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:

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.

See Also