Forum Xamarin.Forms

Android Themes: Xamarin.Forms change the color of selected ListView item

RyanHatfieldOldRyanHatfieldOld USMember, Insider ✭✭✭

So I want to swap out Blue in holo light theme to Orange. I've used this Holo Generator quite a few times with good results in normal Android apps.. but the "ListView" in Xamarin.Forms seems to render it with the old theme? All other aspects of Xamarin.Forms picks up the coloring. I went with themeing because Xamarin.Forms doesn't seem to support changing the color of the selected list item.

Is there a way with the databinding/templates to tell a ListView it's selected resource/color programatically?

Posts

  • JordanBustosJordanBustos USMember

    Hi Ryan,

    Did you find an anser for your question, I'm searching the same thing !

  • EricGroverEricGrover USMember ✭✭

    I am trying to figure out the same thing. It doesn't seem to pick up the asset for the selected item highlight.

  • BMKyleBMKyle USMember

    +1

  • AngelCalvasAngelCalvas ECUniversity ✭✭

    +2

  • billspainbillspain US ✭✭

    +3

  • simeonsimeon USMember ✭✭

    It looks like it sets a background colour using a system color drawable in the renderer.

    On a side note I messed with it and found that if a view cell had a background color that the selection color on android was never shown anyway as the view overlays the selection indicator.

    So the only real way I got it to work was to set the background of my view cell on tapped. Which is hardly ideal.

  • TomYuTomYu USMember

    +4

  • CraigDunnCraigDunn USXamarin Team Xamurai

    Guys, we have no way of tracking all the "+X" in forum posts. To make your feature request votes count, find (or add) the feature on UserVoice and vote there.

  • JakubArnold.8011JakubArnold.8011 CZMember ✭✭
    edited September 2014

    Is there any workaround for this, other than using a custom renderer? Also this should maybe be changed to a bug, since it's not respecting the holo?

    @RyanHatfield.9864‌ Is there a bugzilla bug for this?

  • AndreaConteAndreaConte CHUniversity

    i have exactly the same problem... will wait for @RyanHatfield.9864‌ code!

  • DarrellBookerDarrellBooker USMember ✭✭

    @RyanHatfield‌ what's happening man? Can you post your code when you get a chance? Thanks in advance!

  • EricMaupinEricMaupin USXamarin Team Xamurai

    @ermau told me which property it was using but I forgot ... maybe he can look at the source again and let us know

    ColorActivatedHighlight if present in the theme, otherwise it falls back to the color HoloBlueDark.

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    Is it possible to define theme programmatically (without xaml)?

  • I've the same problem: define color programmatically... anyone solve it? @AlessandroCaliaro

  • TorbenKruseTorbenKruse DEMember ✭✭✭

    I didnt actually test it, but this could work:

    • Define a "IsSelected" property on your cell
    • Raise PropertyChanged event when IsSelected changed

      public class CustomImageCell : ImageCell
          {
              public const string IsSelectedPropertyName = "IsSelected";
      
              private bool _isSelected;
      
              public bool IsSelected 
              {
                  get
                  {
                      return this._isSelected;
                  }
                  set
                  {
                      this._isSelected = value;
                      this.OnPropertyChanged(IsSelectedPropertyName);
                  }
              }
              public Color SelectedBackgroundColor { get; set; }
      
              public CustomImageCell()
              {
                  this._isSelected = false;
                  this.SelectedBackgroundColor = Color.Red;
              }
          }
      
    • When the item is tapped you have to set IsSelected, then you can do something like this in your renderer:

      public class CustomImageCellRenderer : ImageCellRenderer
          {
              global::Android.Views.View cell;
      
              protected override global::Android.Views.View GetCellCore(Cell item, global::Android.Views.View convertView, ViewGroup parent, Context context)
              {
                  this.cell = base.GetCellCore(item, convertView, parent, context);
      
                  return cell;
      
              }
              protected override void OnCellPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs args)
              {
                  base.OnCellPropertyChanged(sender, args);
      
                  if (args.PropertyName == CustomImageCell.IsSelectedPropertyName)
                  {
                      var myCustomCell = sender as CustomImageCell;
      
                      if(myCustomCell.IsSelected)
                          this.cell.Background = new ColorDrawable(myCustomCell.SelectedBackgroundColor.ToAndroid());
                  }
              }
      
          }
      
  • LeonPotgieterLeonPotgieter ZAMember ✭✭

    Ryan's example of a Style works fine for Select Listview items etc in Android, but which property can be used in the style to change the divider line under the listview group headers? Its always blue...

    Does anyone know how to get rid of this blue line under listview group headers? Or at the very least change its colour?

  • KevinFordKevinFord USUniversity, Certified XTC Partners ✭✭✭

    @RyanHatfield
    Does the Android style overview work for you in the latest version of Forms? For me I can see my custom color being flashed before it returns to the normal blue highlight.

  • Simon435Simon435 USMember

    +1

  • Simon435Simon435 USMember

    +1

  • gopuegopue USMember

    hi Tarben,
    In your solution, where would u set the isSelected property of the image cell?

  • @TorbenKruse said:
    I didnt actually test it, but this could work:

    • Define a "IsSelected" property on your cell
    • Raise PropertyChanged event when IsSelected changed

      public class CustomImageCell : ImageCell
          {
              public const string IsSelectedPropertyName = "IsSelected";
      
              private bool _isSelected;
      
              public bool IsSelected 
              {
                  get
                  {
                      return this._isSelected;
                  }
                  set
                  {
                      this._isSelected = value;
                      this.OnPropertyChanged(IsSelectedPropertyName);
                  }
              }
              public Color SelectedBackgroundColor { get; set; }
      
              public CustomImageCell()
              {
                  this._isSelected = false;
                  this.SelectedBackgroundColor = Color.Red;
              }
          }
      
    • When the item is tapped you have to set IsSelected, then you can do something like this in your renderer:

      public class CustomImageCellRenderer : ImageCellRenderer
          {
              global::Android.Views.View cell;
      
              protected override global::Android.Views.View GetCellCore(Cell item, global::Android.Views.View convertView, ViewGroup parent, Context context)
              {
                  this.cell = base.GetCellCore(item, convertView, parent, context);
      
                  return cell;
                  
              }
              protected override void OnCellPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs args)
              {
                  base.OnCellPropertyChanged(sender, args);
      
                  if (args.PropertyName == CustomImageCell.IsSelectedPropertyName)
                  {
                      var myCustomCell = sender as CustomImageCell;
      
                      if(myCustomCell.IsSelected)
                          this.cell.Background = new ColorDrawable(myCustomCell.SelectedBackgroundColor.ToAndroid());
                  }
              }
              
          }
      

    The solution worked fine but the divider color is still blue. Does any one knows the remedy of this

  • EmilMller.4175EmilMller.4175 NOMember ✭✭
    edited July 2017

    Please fix this. Kind regards, from the year 2017.

  • SreeeeSreeee INMember ✭✭✭✭✭

    Add this in styles.xml :

      <item name="android:colorActivatedHighlight">@android:color/transparent</item>
    
  • tsgriggs2tsgriggs2 Member ✭✭

    @Sreeee said:
    Add this in styles.xml :

      <item name="android:colorActivatedHighlight">@android:color/transparent</item>
    

    This solved my issue!

Sign In or Register to comment.