How to add material design ripple effect to a ViewCell in a ListView?

Viewed 498

I am making an Xamarin.Forms application that needs a menu. I am using a ListView control with ViewCells to provide this menu. Unfortunately, I would like my app to be Material Design, and therefore I would like a ripple haptic feedback on my ViewCell.

This is a new Xamarin.Forms project with the template Shell, made with Visual Studio 2019, version 16.1.3. I am testing on Android, due to lack of iOS device.

I've tried using the attribute Visual="Material" on my ContentPage, but that just gave me the exception

System.MissingMethodException: Method not found: Xamarin.Forms.SizeRequest Xamarin.Forms.Platform.Android.ButtonLayoutManager.GetDesiredSize(int,int)

The code for the ListView (unedited from Shell template):

<ListView x:Name="ItemsListView"
                ItemsSource="{Binding Items}"
                VerticalOptions="FillAndExpand"
                HasUnevenRows="true"
                RefreshCommand="{Binding LoadItemsCommand}"
                IsPullToRefreshEnabled="true"
                IsRefreshing="{Binding IsBusy, Mode=OneWay}"
                CachingStrategy="RecycleElement"
                ItemSelected="OnItemSelected">
            <d:ListView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>First Item</x:String>
                    <x:String>Second Item</x:String>
                    <x:String>Third Item</x:String>
                    <x:String>Forth Item</x:String>
                    <x:String>Fifth Item</x:String>
                    <x:String>Sixth Item</x:String>
                </x:Array>
            </d:ListView.ItemsSource>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Padding="10">
                            <Label Text="{Binding Text}" 
                                d:Text="{Binding .}"
                                LineBreakMode="NoWrap"
                                FontSize="16" />
                            <Label Text="{Binding Description}" 
                                d:Text="Item description"
                                LineBreakMode="NoWrap"
                                FontSize="13" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

I expect there to be a Material Design ripple effect when I click on a list item (a ViewCell), but instead, it turns orange, which appears to be the default behavior of a ViewCell.

The ripple effect I want is similar to the one in this gif: ripple

0 Answers
Related