Working on my new MAUI project called Language In Use, I face a funny issue with the orange item in a ListView when an item is selected or highlighted. I was asking this question in the past and the answer I got was that this was a bug, and it will be fixed with the NET8.
With the new version of the framework, the issue is still there. When I run my NET8 MAUI app on an Android device, ListView displays the list of items correctly. When I tap on an item, the background is an orange colour, as you see in the following screenshot.
Is a way to change the color of the selected item in a ListView?
A suggestion (that didn’t work for me)
I saw a few people refer to this solution but it didn’t work for me. I reported it just in case it could be one possible answer. Please let me know if it works for you.
Under the Android folder, I added a new XML file called style.xml and set the property to AndroidResource. The content of this file is
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Test.MainTheme" parent="Maui.SplashTheme">
<item name="android:colorActivatedHighlight">
@android:color/transparent
</item>
</style>
</resources>
Then, I change the MainActivity.cs in particular, the theme as instructed.
[Activity(Theme = "@style/Test.MainTheme", MainLauncher = true,
ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation |
ConfigChanges.UiMode | ConfigChanges.ScreenLayout |
ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]
The solution
So, after looking around a lot and opening posts on Stackoverflow and GitHub, I found the solution that is coming from Kenji Nagano in this post on GitHub.
First, this to check is if ListView you set the CachingStrategy and in particular CachingStrategy="RecycleElement". If so, remove it. Then, the following solution will work.
The first step, add CustomViewCell.cs to your project folder.
public class CustomViewCell : Microsoft.Maui.Controls.ViewCell
{
public static readonly BindableProperty SelectedBackgroundColorProperty =
BindableProperty.Create(
nameof(SelectedBackgroundColor), typeof(Color),
typeof(CustomViewCell), Colors.White);
public Color SelectedBackgroundColor
{
get { return (Color)GetValue(SelectedBackgroundColorProperty); }
set { SetValue(SelectedBackgroundColorProperty, value); }
}
public CustomViewCell()
{
}
}
Android implementation
Then, in Platforms/Android folder, create the platform-specific implementation file CustomViewCellHandler.cs:
using Microsoft.Maui.Controls.Compatibility.Platform.Android;
using Android.Graphics.Drawables;
using AContext = Android.Content.Context;
using AView = Android.Views.View;
using AViewGroup = Android.Views.ViewGroup;
using Microsoft.Maui.Controls.Platform;
namespace MauiAppListViewTest.Platforms.Android
{
public class CustomViewCellHandler :
Microsoft.Maui.Controls.Handlers.Compatibility.ViewCellRenderer
{
private AView pCellCore;
private bool pSelected;
private Drawable pUnselectedBackground;
protected override AView GetCellCore(Cell item, AView convertView,
AViewGroup parent, AContext context)
{
pCellCore = base.GetCellCore(item, convertView, parent, context);
this.pSelected = false;
this.pUnselectedBackground = pCellCore.Background;
return pCellCore;
}
protected override void OnCellPropertyChanged(object sender,
System.ComponentModel.PropertyChangedEventArgs e)
{
base.OnCellPropertyChanged(sender, e);
if (e.PropertyName == "IsSelected")
{
pSelected = !(pSelected);
if (pSelected)
{
pCellCore.SetBackgroundColor(
((CustomViewCell)sender).SelectedBackgroundColor.ToAndroid());
}
else
{
pCellCore.SetBackground(this.pUnselectedBackground);
}
}
}
}
}
Now, register your handler like below in the MauiProgram.cs:
#if ANDROID
using MauiAppListViewTest.Platforms.Android;
#endif
namespace MauiAppListViewTest
{
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
<!--Omitted for brevity-->
.ConfigureMauiHandlers(handlers => {
#if ANDROID
handlers.AddHandler<CustomViewCell, CustomViewCellHandler>();
#endif
});
Don’t forget to setting SelectedBackgroundColor="Green" in XAML:
<ListView x:Name="lvTest" >
<ListView.ItemTemplate>
<DataTemplate>
<local:CustomViewCell SelectedBackgroundColor="Green" >
<Grid HeightRequest="44">
<Label Text="{Binding ItemName}" VerticalOptions="Center"/>
</Grid>
</local:CustomViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
iOS implementation
Then, in Platforms/iOS folder, create the platform-specific implementation file CustomViewCellHandler.cs:
public class CustomViewCellHandler : ViewCellRenderer
{
public override UITableViewCell GetCell(
Cell item, UITableViewCell reusableCell, UITableView tv)
{
var cell = base.GetCell(item, reusableCell, tv);
cell.SelectedBackgroundView = new UIView
{
BackgroundColor = ((CustomViewCell)item).SelectedBackgroundColor.ToPlatform()
};
return cell;
}
}
Again, I have to set the handle in the MauiProgram.cs like
#if IOS
using MauiAppListViewTest.Platforms.iOS;
#endif
namespace MauiAppListViewTest
{
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
<!--Omitted for brevity-->
.ConfigureMauiHandlers(handlers => {
#if IOS
handlers.AddHandler<CustomViewCell, CustomViewCellHandler>();
#endif
});
Wrap up
In this post, I show the code I used when you add a ListView in your project and an item highlighted in MAUI, its background is in orange. I hope this code can help you. Please let me know your thoughts in the comments or the forum.