c# – Xamarin.Forms untappable ListView (remove selection ripple effect)-ThrowExceptions

Exception or error:

I have a ListView with a custom ViewCell that displays articles. However when you select a item, it shows the material design ripple/selection effect.

Ripple effect

Xaml:

   <ListView HasUnevenRows="True" ItemsSource="{Binding NewsArticles}" IsPullToRefreshEnabled="True">
        <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
              <StackLayout Padding="10">
                <Label Text="{Binding Title}" HorizontalOptions="Center" FontAttributes="Bold" />
                <Image Source="{Binding ImageUrl}" IsVisible="{Binding HasImage}" />
                <Label Text="{Binding Content}"></Label>
              </StackLayout>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>

How do I remove the ripple effect?

How to solve:

So after a long, long time we figured it out, you can accomplish it with a custom renderer. Here is how,

First, create a file called no_selector.xml and place it in the Resources/layouts folder (the packaging properties must be set to AndroidResource).

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_window_focused="false" android:drawable="@android:color/transparent"/>
</selector>

After that create a custom renderer for the ListView component,

[assembly: ExportRenderer (typeof(ListView), typeof(NoRippleListViewRenderer))]
namespace Your.Own.Namespace
{
    public class NoRippleListViewRenderer : ListViewRenderer
    {
        protected override void OnElementChanged (ElementChangedEventArgs<ListView> e)
        {
            base.OnElementChanged (e);
            Control.SetSelector (Resource.Layout.no_selector);
        }
    }
}

If the no_selector file can’t be found rebuild your project!

Be aware of the fact that this removes the ripple for all the ListViews in your application. If you only want it to target a couple you can change the first type on the ExportRenderer attribute (this does require you to make a separate class that extends ListView).

https://gist.github.com/awatertrevi/d83787dbbf3de6ef0e0a344169d3c2fa

###

I think you can remove it without a custom renderer.

You can set the BackgroundColor of your StackPanel to grey or whatever your list’s or page’s background color is.

<ListView HasUnevenRows="True" ItemsSource="{Binding NewsArticles}" IsPullToRefreshEnabled="True">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Padding="10" BackgroundColor="Gray">
                    <!-- ... --> 
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Or you can use android styles to change the list view styles:

Set theme in AndroidManifest.xml

<application android:label="$safeprojectname$" android:theme="@style/myTheme"></application>

Create theme in styles.xml

<?xml version="1.0" encoding="utf-8" ?>
<resources>
    <style name="myTheme" parent="@android:style/Theme.Material.Light">
        <item name="android:listViewStyle">@style/ListViewStyle.Light</item>
    </style>

    <style name="ListViewStyle.Light" parent="@android:style/Widget.ListView">
        <item name="android:listSelector">@android:color/transparent</item>
    </style>
</resources>

Leave a Reply

Your email address will not be published. Required fields are marked *