locked
Listview Selected Item Background Color RRS feed

  • Question

  • User24644 posted

    Is it possible to set the ListView selected item background color? Right now on IOS its gray and I want it to be transparent if possible.

    Sunday, July 20, 2014 9:29 PM

All replies

  • User24644 posted

    Still haven't found a solution to this..

    Tuesday, July 22, 2014 4:03 PM
  • User46249 posted

    On iOS it is working with a custom renderer for the cell (here for example the TextCell):

    [assembly: ExportRenderer(typeof(TextCell), typeof(MyTextCellRenderer))]
    
    namespace MyProject.iOS.Renderers
    {
        public class MyTextCellRenderer : TextCellRenderer
        {
            private UIView bgView;
    
            public override UITableViewCell GetCell(Cell item, UITableView tv)
            {
                var cell = base.GetCell(item, tv);
    
                cell.BackgroundColor = UIColor.Black;
                cell.TextLabel.TextColor = UIColor.White;
    
                if (bgView == null)
                {
                    bgView = new UIView(cell.SelectedBackgroundView.Bounds);
                    bgView.Layer.BackgroundColor = UIColor.Blue;
                    bgView.Layer.BorderColor = UIColor.Yellow;
                    bgView.Layer.BorderWidth = 2.0f;
                }
    
                cell.SelectedBackgroundView = bgView;
    
                return cell;
            }
        }
    }
    

    For transparent color try UIColor.Clear.

    Wednesday, July 23, 2014 10:28 AM
  • User24644 posted

    Nice, i'll have to try it out! Do you know of a similar renderer for Android? And do you know what type of cell a listview item is?

    Wednesday, July 23, 2014 12:32 PM
  • User46249 posted

    Sorry, but for Android I have not yet a solution.

    I think one has to use a ListViewRenderer, but this is currently 'internal'...

    Thursday, July 24, 2014 3:16 PM
  • User14244 posted

    Is there no way to set the selected item properties for Android & WinPhone?

    Should I create a new Renderer that implements the native list on each platform instead? Or is there a way to extend the existing ListView?

    Having trouble finding any documentation on the subject.

    Tuesday, July 29, 2014 8:19 PM
  • User71553 posted

    I posted a solution here that seems to work well on both iOS and Android and is entirely cross-platform with no custom renderers:

    stackoverflow.com/a/26896715/4216951

    Wednesday, November 12, 2014 9:17 PM
  • User55527 posted

    I reverse the ListViewRenderer and found in CellAdapter.cs a static resource id 16843664. In Android Documentation http://developer.android.com/reference/android/R.attr.html you can find this constant definition!

    Just put this in your custom theme: <item name="android:colorActivatedHighlight">@android:color/transparent</item>

    Thursday, May 21, 2015 9:56 PM
  • User107425 posted

    class CustomListViewCellRenderer : ViewCellRenderer {

        public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv)
        {
            var cell = base.GetCell(item, reusableCell, tv);
    
            cell.SelectionStyle = UITableViewCellSelectionStyle.None;
    
    
            return cell;           
    
        }
    
    
    }
    

    This is for iOS

    Thursday, October 29, 2015 7:43 AM
  • User181025 posted

    @MarianGieseler This is a life saver. I'd been searching online for a solution for hours. :)

    Monday, January 25, 2016 1:37 PM
  • User63572 posted

    In case of Android I tried this..

    on your ListView ItemSelected event handler, you can do:

    listview.ItemSelected = null;

    while in case of iOs I wrote CustomListViewCellRenderer as suggested above and it works fine for me..

    Monday, February 1, 2016 1:54 PM
  • User169828 posted

    With MVVM, make your ItemTemplate have a binding to a colour, then change the colour when the selected item changes.

    Monday, February 1, 2016 4:57 PM
  • User258 posted

    Anyone knows why UITableViewCellSelectionStyle in CustomListViewCellRenderer dont work anymore? Running 2.0.1.6505

    Wednesday, February 3, 2016 12:36 PM
  • User4685 posted

    @void Same problem, did you solve it?

    Saturday, March 12, 2016 4:17 AM
  • User258 posted

    @MichaelRidland I'm afraid not.

    Saturday, March 12, 2016 11:07 AM
  • User1884 posted

    Setting the tableview to AllowsSelection = false seems to have the desired effect while still allowing the listviews ItemTapped to fire

    Monday, March 14, 2016 7:50 PM
  • User247597 posted

    i have many issues UWP, one of them this. and i never find any solution (its out of subjectt)

    selected item backround color has issue on differennt machine (not different platform) which is Windows 10. and no way to change color? and all elements change defaults and nothing display. but item can clickable.... do you have any solution to change selected item background color? or stoped to platform defaults?

    Monday, August 15, 2016 1:46 PM
  • User267138 posted

    can give me custom renderer for windows 8.1

    Thursday, October 20, 2016 8:08 AM
  • User29221 posted

    My working solution is like this, without customrender or something else, working in Xamarin Forms Xaml:

    On Xaml:

    On code behind:

    private void Cell_OnTapped(object sender, EventArgs e) { var viewCell = (ViewCell)sender; if (viewCell.View != null) { viewCell.View.BackgroundColor = Color.Red; } }

    easy pease.

    Not tested on Windows Phone.

    Thursday, March 2, 2017 8:25 AM
  • User260941 posted

    I get an invalid cast when var viewCell =(ViewCell)sender;

    executes

    Thursday, March 2, 2017 4:07 PM
  • User303810 posted

    @DonRobb I am also getting same error

    Thursday, March 16, 2017 9:19 AM
  • User288368 posted

    Michelangelo Franco.

    Amazingly simple, I agree. Don't forget it is the tapped event on the ViewCell not the ListView.

    Unfortunately though the color sticks when another cell is selected.

    Tested on latest pre-release of Xamarin Forms.

    Sunday, April 2, 2017 6:40 PM
  • User265270 posted

    @MichelangeloFranco said: My working solution is like this, without customrender or something else, working in Xamarin Forms Xaml:

    On Xaml:

    On code behind:

    private void Cell_OnTapped(object sender, EventArgs e) { var viewCell = (ViewCell)sender; if (viewCell.View != null) { viewCell.View.BackgroundColor = Color.Red; } }

    easy pease.

    Not tested on Windows Phone.

    sometimes worked, and sometimes not work. any update to this code?

    Monday, April 24, 2017 10:07 AM
  • User354535 posted

    When i set ListViewCachingStrategy cachingStrategy is RecycleElement . All select are disable. I just found the way to fix IOS.

     protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
            {
                base.OnElementChanged(e);
                if (Control != null && e != null )
                {
                    Control.Delegate = new ListViewDelegate(e.NewElement);
                }
            }
    
    
     class ListViewDelegate : UITableViewDelegate
            {
                private ListView _listView;
    
            internal ListViewDelegate(ListView listView)
            {
                _listView = listView;
            }
    
            public override void WillDisplay(UITableView tableView, UITableViewCell cell, Foundation.NSIndexPath indexPath)
            {
                cell.SelectedBackgroundView = new UIView()
                {
                    BackgroundColor = Color.Red.ToUIColor()
                };
            }
    
            protected override void Dispose(bool disposing)
            {
                if (disposing)
                {
                    _listView = null;
                }
                base.Dispose(disposing);
            }
        }
    

    Hope it help someone!

    Friday, October 20, 2017 8:53 AM
  • User151685 posted

    Hey It works, Thank you so much @MarianGieseler for Android and @HrishiD for iOS , Hope this help others.

    iOS

    // I use ViewCell because I want to change in All places but if anyone wants to change for a particular listView // then you need to make a custom control and inherit it from ViewCell , and use that control in xaml with this renderer

    [assembly: ExportRenderer(typeof(ViewCell), typeof(CustomListViewCellRenderer))] namespace your namespace

    class CustomListViewCellRenderer : 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:

    Just put this in your custom theme:

    "@android:color/transparent"

    if you need for particular listView in Android then you will need a renderer for this also

    Thanks Ahmed Hasan

    Wednesday, October 25, 2017 9:35 AM
  • User151685 posted

    Hey It Works.. Thanks you so much @MarianGieseler for Android and @HrishiD for iOS . Hope it helps someone.

    iOS

    // I applied on All ViewCell because I need it, if anyone wants to apply for a particular ListView then you need to make // a CustomControl for this which Inherit from ViewCell and use this control in xaml with this renderer in iOS

    [assembly: ExportRenderer(typeof(ViewCell), typeof(CustomListViewCellRenderer))] namespace YourApp.iOS { public class CustomListViewCellRenderer : ViewCellRenderer { public override UIKit.UITableViewCell GetCell(Xamarin.Forms.Cell item, UIKit.UITableViewCell reusableCell, UIKit.UITableView tv) { //return base.GetCell(item, reusableCell, tv); var cell = base.GetCell(item, reusableCell, tv); cell.SelectionStyle = UITableViewCellSelectionStyle.None; return cell; } } }

    Android

    Just put this in your custom theme: @android:color/transparent

    Just to Apply in all places, if you want for a particular list then you need to Create CustomControl and a renderer

    Wednesday, October 25, 2017 9:54 AM
  • User66401 posted

    @Langtubi_dien said: When i set ListViewCachingStrategy cachingStrategy is RecycleElement . All select are disable.

    Hi , I have the same problem, when I set the caching strategy to something other than the default this approach does not work anymore. I'd like to try your suggestion. On which class should the OnElementChanged method go?

    Wednesday, November 1, 2017 5:17 PM
  • User66401 posted

    @Langtubi_dien thank you, your suggestion works even with a non-standard cachingStrategy (the OnElementChanged must be on a custom iOS ListView Renderer class). I prefer this to having code in the OnItemSelected method coupled with a binding from the ViewModel for the background color.

    The final code then looks like this:

    Xamarin.Forms code:

    namespace MyProject { public class ListView2 : ListView { public ListView2(ListViewCachingStrategy cachingStrategy) : base(cachingStrategy) { } } }

    XAML on your page:

    iOS-specific renderer:

    [assembly: ExportRenderer(typeof(ListView2), typeof(ListView2Renderer))]
    namespace MyProject.iOS
    {
        class ListView2Delegate : UITableViewDelegate
        {
            private ListView _listView;
    
            internal ListView2Delegate(ListView listView)
            {
                _listView = listView;
            }
    
            public override void WillDisplay(UITableView tableView, UITableViewCell cell, Foundation.NSIndexPath indexPath)
            {
                cell.SelectedBackgroundView = new UIView()
                {
                    BackgroundColor = Color.Red.ToUIColor()
                };
            }
    
            protected override void Dispose(bool disposing)
            {
                if (disposing)
                {
                    _listView = null;
                }
                base.Dispose(disposing);
            }
        }
    }
    
    Wednesday, November 1, 2017 8:05 PM
  • User66401 posted

    Also see https://stackoverflow.com/questions/25885238/xamarin-forms-listview-set-the-highlight-color-of-a-tapped-item/47054718#47054718

    Wednesday, November 1, 2017 11:04 PM
  • User354535 posted

    @LouisTaljaard Easy to implement itemSelected.

    Just override method "RowSelected()" on UITableViewDelegate.

     public override void RowSelected(UITableView tableView, NSIndexPath indexPath)
            {
                listView.SelectedItem = listView.ItemsSource.ElementAt(indexPath.Row);
            }
    
    Friday, November 3, 2017 9:23 AM
  • User66401 posted

    @Langtubi_dien thanks again. How do you do the selected item background color on Android? I'm looking at that now but haven't found a nice way to do it yet.

    Friday, November 3, 2017 9:48 AM
  • User354535 posted

    @LouisTaljaard I try a lot but i didn't find the solution. I still not work on xamarin project. So i can't help you at this time.

    Friday, November 3, 2017 11:42 AM
  • User359887 posted

    Sorry to ask, but how would I show the user which TextCell in a Xamarin.Forms.ListView is currently selected?

    I can programmatically select an item by

    MyListView.SelectedItem = SomeTextCell;
    

    But that doesn't highlight this item's backcolor. The item is only highlighted when I tap on it.

    Is that really the intended behaviour?

    Sunday, November 26, 2017 12:16 AM
  • User353802 posted

    for android platform according to https://blog.wislon.io/posts/2017/04/11/xamforms-listview-selected-colour

    class CustomViewCellRenderer : Xamarin.Forms.Platform.Android.ViewCellRenderer
        {
            private Android.Views.View _cellCore;
            private bool _selected;
            protected override Android.Views.View GetCellCore(Cell item,
                                                          Android.Views.View convertView,
                                                          ViewGroup parent,
                                                          Context context)
            {
                _cellCore = base.GetCellCore(item, convertView, parent, context);
                _selected = false;
                return _cellCore;
            }
    
            protected override void OnCellPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs args)
            {
                base.OnCellPropertyChanged(sender, args);
                if (args.PropertyName == "IsSelected")
                {
                    _selected = !_selected;
                    var extendedViewCell = sender as ViewCell;
                    if (_selected)
                        _cellCore.SetBackgroundColor(Android.Graphics.Color.WhiteSmoke);
                    else
                        _cellCore.SetBackgroundColor(Android.Graphics.Color.Transparent);
                }
            }
        }
    
    Monday, January 1, 2018 11:32 AM
  • User21647 posted

    @EhsanJahanagiri I'm sorry but the implementation described in that blog post was broken across all listview caching strategies recently, with all the .net standard/xamarin forms updates. Tho it was just built with RetainElement in mind...

    I think I have it resolved now, for Android (using RecycleElement), but not yet for iOS. I've been chasing my tail on this for weeks. There's a branch in that github repo called fix-listview-demo, which appears to fine for Android. iOS is still broken tho... I can't believe it's this hard! Maybe that's why the xamarin forms guys haven't implemented it yet :wink:

    Wednesday, May 9, 2018 10:31 AM
  • User368417 posted

    Thanks @MarianGieseler

    Saturday, May 12, 2018 11:43 PM
  • User41877 posted

    @MarianGieseler said: I reverse the ListViewRenderer and found in CellAdapter.cs a static resource id 16843664. In Android Documentation http://developer.android.com/reference/android/R.attr.html you can find this constant definition!

    Just put this in your custom theme: <item name="android:colorActivatedHighlight">@android:color/transparent</item>

    I know this is an old post but it works for Android. My build failed at first but it worked after doing Clean Solution and Rebuild. Thanks @MarianGieseler :)

    Friday, November 2, 2018 7:19 PM
  • User372619 posted

    @KishanRathod

    How exactly do I create a custom theme? In which file do I need to add that line of code?

    Tuesday, November 27, 2018 9:24 PM
  • User381156 posted

    This article by Venkata Swamy Balaraju appears to answer the question (though I have not tried it).

    https://www.c-sharpcorner.com/article/how-to-change-listview-selecteditem-bg-color-in-xamarin-forms/

    However, this seems like just way too much work for such a seemingly simple thing. I am wondering if this will ever be implemented into Xamarin.Forms?

    Wednesday, January 30, 2019 12:01 AM
  • User372139 posted

    ^ Well, the problem with iOS and SelectedBackgroundView revolves around using any other CachingStrategy than RetainElement and since that article doesn't even use CachingStrategy at all it resolves nothing other than being a nice guide on how to do it all before that pivotal moment of agony.

    Monday, February 11, 2019 9:19 PM
  • User28603 posted

    I still can't believe that in 2019 there is not a property in ListView to set the highlighted background color. Do we still need renderers?

    Sunday, September 8, 2019 7:16 PM
  • User388349 posted

    Any updates?

    Monday, September 30, 2019 11:51 AM
  • User392264 posted

    Its from the android side :smile: Add this to your android styles.xml file under your main theme:

    <resources>
      <style name="MyTheme" parent="android:style/Theme.Material.Light.DarkActionBar">
       <item name="android:colorPressedHighlight">@color/ListViewSelected</item>
       <item name="android:colorLongPressedHighlight">@color/ListViewHighlighted</item>
       <item name="android:colorFocusedHighlight">@color/ListViewSelected</item>
       <item name="android:colorActivatedHighlight">@color/ListViewSelected</item>
       <item name="android:activatedBackgroundIndicator">@color/ListViewSelected</item>
      </style>
    <color name="ListViewSelected">#96BCE3</color>
    <color name="ListViewHighlighted">#E39696</color>
    </resources>
    

    new here can't add links, however here you go :

    https:// stackoverflow.com/questions/25885238/xamarin-forms-listview-set-the-highlight-color-of-a-tapped-item

    dont kick me please.

    Monday, January 20, 2020 6:18 PM
  • User392145 posted

    The easiest way I found was adding to the style sheet on android:

    Tuesday, February 11, 2020 5:25 PM