Change scroll appearance in Xamarin's ListView

Question

Is there a way to change scroll shape in Xamarin's ListView?

1. I want to increase the scroll thickness.
2. I want to change the scroll color.
3. I want the scroll to always be visible.

Are three things possible?

Currently, it is only visible while scrolling. And the thickness is too small. I want to change the color to the color I want.

Can I change the features I have listed?

Answer 1

Hello,

Can I change the features I have listed?

Yes. You can create a custom renderer for your ListView.

change the scroll color.

For Android. You can custom a scrollbar with listView.VerticalScrollbarThumbDrawable= Context.GetDrawable(Resource.Drawable.scrollbar); in the listviewRenderer. Then you can create a xml file that called scrollbar.xml in the Resources folder-> Drawable folder with following code.

   <?xml version="1.0" encoding="utf-8" ?>  
   <shape android:shape="rectangle"  
       xmlns:android="http://schemas.android.com/apk/res/android">  
       <gradient  
            android:angle="45"  
            android:centerColor="#65FF8215"  
            android:endColor="#87FD2125"  
            android:startColor="#65FF8215" />  
       <corners android:radius="20dp" />  
   </shape>  

For changing the scroll thickness and keep the scroll bar visible, you can use listView.ScrollBarSize and listView.ScrollbarFadingEnabled = false

   [assembly: ExportRenderer(typeof(Xamarin.Forms.ListView), typeof(NativeAndroidListViewRenderer))]  
   namespace XFormsListDemo.Droid  
   {  
       public class NativeAndroidListViewRenderer : ListViewRenderer  
       {  
           public NativeAndroidListViewRenderer(Context context) : base(context)  
           {  
           }  
          protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ListView> e)  
           {  
               base.OnElementChanged(e);  
               if (Control != null)  
               {  
                   Android.Widget.ListView listView = Control as Android.Widget.ListView;  
                   listView.VerticalScrollbarThumbDrawable= Context.GetDrawable(Resource.Drawable.scrollbar);  
                   listView.ScrollBarSize = 30;  
                  // listView.ScrollBarFadeDuration = 2000;  
                   listView.ScrollbarFadingEnabled = false;  
               }  
           }  
       }  
   }  

====================
Update=====================

I am using Android 5.1 version.

If you use android 5.1, setVerticalThumbDrawable donot expose in android 5.1, But we can use refect to get it and set it with following code in listview custom renderer.

   if (Control != null)  
               {  
                   Android.Widget.ListView listView = Control as Android.Widget.ListView;  
                   
                    Field mScrollCacheField = Java.Lang.Class.FromType(typeof(Android.Views.View)).GetDeclaredField("mScrollCache");  
                    mScrollCacheField.Accessible=true;  
                    Java.Lang.Object mScrollCache = mScrollCacheField.Get(listView);  
                    Field scrollBarField = mScrollCache.Class.GetDeclaredField("scrollBar");  
                    scrollBarField.Accessible = true;  
                    Java.Lang.Object scrollBar = scrollBarField.Get(mScrollCache);  
                    Method method = scrollBar.Class.GetDeclaredMethod("setVerticalThumbDrawable", Java.Lang.Class.FromType(typeof(Drawable)));  
                    method.Accessible=true;  
                    method.Invoke(scrollBar, Android.App.Application.Context.GetDrawable(Resource.Drawable.scrollbar));  
     
                  listView.ScrollBarSize = 30;  
          
                   listView.ScrollbarFadingEnabled = false;  
               }  

Best Regards,

Leon Lu

---

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.