Background color of selecteditem in listview xamarin.forms

Question

When working with ListView in Xamarin.forms, on selecting an item, the item remains like that with a rather ugly background colour. Can i disable this feature?

Here's my code:

<StackLayout>
  <ListView x:Name="FoodList" HasUnevenRows="True" CachingStrategy="RecycleElement" ItemTapped="OnItemTapped">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <StackLayout Padding="0,15,0,0" >
           <StackLayout Orientation="Horizontal" BackgroundColor="White" >
            <Image Source="{Binding image_url}" Aspect="AspectFill" HeightRequest="200" WidthRequest="200"/>
            <StackLayout Orientation="Vertical">
              <Label Text="{Binding food_name}" TextColor="Black" Style="{StaticResource MainLisTtext}" />
              <Label Text="{Binding price}" TextColor="Black" Style="{StaticResource SubLisTtext}" />
              <Label Text="{Binding food_description}" TextColor="Black" Style="{StaticResource SubLisTtext}" />
            </StackLayout>
            </StackLayout>
          </StackLayout>
        </ViewCell>vc
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
</StackLayout>

Solution

This can be accomplished by using Custom Renderers

iOS Custom Renderer

Edit the SelectionStyle property on iOS.

Below is an example that sets the UITableViewCellSelectionStyle to None.

using System;

using UIKit;

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

using ListViewSample.iOS;

[assembly: ExportRenderer(typeof(ViewCell), typeof(ViewCellItemSelectedCustomRenderer))]
namespace ListViewSample.iOS
{
    public class ViewCellItemSelectedCustomRenderer : ViewCellRenderer
    {
        public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv)
        {
            var cell = base.GetCell(item, reusableCell, tv);

            cell.SelectionStyle = UITableViewCellSelectionStyle.None;

            return cell;
        }
    }
}

Android Custom Renderer

1. Create a new drawable, ViewCellBackground.xml and save it to the Resources>drawable folder:

   <?xml version="1.0" encoding="UTF-8" ?>
   <selector xmlns:android="http://schemas.android.com/apk/res/android">
       <item android:state_pressed="true" >
           <shape android:shape="rectangle">
               <!--Change the selected color by modifying this hex value-->
               <solid android:color="#FFFFFF" />
           </shape>
       </item>
       <item>
           <shape android:shape="rectangle">
               <solid android:color="#FFFFFF" />
           </shape>
       </item>
   </selector>
   

2. Create Custom Renderer for the ViewCell

   using System;
   
   using Xamarin.Forms;
   using Xamarin.Forms.Platform.Android;
   
   using ListViewSample.Droid;
   
   [assembly: ExportRenderer(typeof(ViewCell), typeof(ViewCellItemSelectedCustomRenderer))]
   namespace ListViewSample.Droid
   {
       public class ViewCellItemSelectedCustomRenderer : ViewCellRenderer
       {
           protected override Android.Views.View GetCellCore(Cell item, Android.Views.View convertView, Android.Views.ViewGroup parent, Android.Content.Context context)
           {
               var cell = base.GetCellCore(item, convertView, parent, context);
   
               cell.SetBackgroundResource(Resource.Drawable.ViewCellBackground);
   
               return cell;
           }
       }
   }
   

Edit: Removed implementation without Custom Renderers

---

Sample Xamarin.Forms ListView App

using System;
using System.Collections.Generic;

using Xamarin.Forms;

namespace ListViewSample
{
    public class CustomViewCell : ViewCell
    {
        public CustomViewCell()
        {
            View = new Label
            {
                Text = "Hello World"
            };
        }
    }

    public class ListViewContentPage : ContentPage
    {
        public ListViewContentPage()
        {
            var itemSourceList = new List<CustomViewCell>();
            itemSourceList.Add(new CustomViewCell());
            itemSourceList.Add(new CustomViewCell());

            var listView = new ListView();
            listView.ItemTemplate = new DataTemplate(typeof(CustomViewCell));
            listView.ItemsSource = itemSourceList;
            listView.SeparatorVisibility = SeparatorVisibility.None;

            Content = listView;
        }
    }

    public class App : Application
    {
        public App()
        {
            // The root page of your application

            MainPage = new NavigationPage(new ListViewContentPage());
        }
    }
}

Comments

[John]

OnListViewTextCellTapped is this a custom method??

[Brandon Minnick]

Yes- Sorry about that! I just updated my answer to include the OnListViewTextCellTapped method.

[John]

Ok.When using listview I have access to selected item, does that apply here ?

[Brandon Minnick]

Sorry, I don't understand your question. Can you be more specific?

[John]

If I'm handling listview item selected normally, I have access to Listview.selecteditem.....when using your approach how do I get the selected item??

[Brandon Minnick]

Are you using a Custom ViewCell? e.g. public class MyCustomViewCell : ViewCell

[John]

check my code, I used xaml to define my listview template

[Brandon Minnick]

Thanks John- it looks like this will be easier to implement by using Custom Renderers. I added the code to implement this using a Custom Renderer on Android.

[Brandon Minnick]

Hey John! I just added a sample Xamarin.Forms App that shows this implementation working.

[John]

I'll try it out and get back to you.

[Brandon Minnick]

Hey John! Did everything turn out well?

[John]

Yeah. It did. Sorry about that

[Baqer Naqvi]

@BrandonMinnick I tried it for android. When I click on the item it shows my required background color but it fades away when i release the touch. any idea?

[Brandon Minnick]

Hey @BaqerNaqvi! Sorry - I just saw your comment. Are you still trying to solve this? Open a new question and shoot me the link!