Android: ListView Item selected color is by default Orange and no property available to change this color

muffadal53 commented 1 year ago

Description

In MAUI ListView control the Item selected color on Android by default is Orange and there doesn't seem to be any property or something mentioned in MAUI documentation "https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/listview?view=net-maui-7.0" using which we can change this color. So, please explain why it is Orange by default on Android and how to change this for Android to Grey/ Any other color similar to how it behaves on iOS and shows item selected color as grey?

Below is the Screenshot for reference:

Steps to Reproduce

Download solution here

https://github.com/muffadal53/MauiListViewItemSelectedColorOrangeAndroid.git

Run solution

On MainPage, select any item from the ListView by tapping/pressing on that item on mobile.

The default color shown in Android for that selected item is "Orange" --> This is Not OK

Link to public reproduction project repository

https://github.com/muffadal53/MauiListViewItemSelectedColorOrangeAndroid.git

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 11

Did you find any workaround?

No.

Relevant log output

N/A.

cat0363 commented 1 year ago

Hi, @muffadal53 I don't think there was a property to change the selection color in the same way in Xamarin.Forms. At least I got around this issue by: https://github.com/cat0363/Maui-Workaround13812.git

I couldn't verify it for iOS because I don't have a build environment.

muffadal53 commented 1 year ago

@cat0363 Thanks for your inputs on workaround but in Xamarin Forms also there was a discussion on this and need to have some mechanism in the framework to change this as mentioned in this link "https://github.com/xamarin/Xamarin.Forms/issues/4447" and there was a mechanism as mentioned below to achieve this as mentioned below (though I haven't used myself in Xamarin Forms):

`

@android:color/transparent

`

And if you see the last comment in that link it says to open a new discussion in .Net MAUI as needed and that what exactly above I have mentioned. Hope this clarifies the point.

Thanks.

DevElkami commented 1 year ago

Hi, @muffadal53 I don't think there was a property to change the selection color in the same way in Xamarin.Forms. At least I got around this issue by: https://github.com/cat0363/Maui-Workaround13812.git

I couldn't verify it for iOS because I don't have a build environment.

Hi all,

@cat0363 : Doesn't work with round border

My MAUI repo: PasswordVault

cat0363 commented 1 year ago

@cat0363 : Doesn't work with round border

@DevElkami , It says it doesn't work with Border, but at least the BackgroundColor of the cell is changing. In the sense that it changes the background color of the cell, it's working. If you want to change the BackgroundColor of Border on Android, you should specify Transparent as the BackgroundColor of Border.

<local:CustomViewCell SelectedBackgroundColor="Green">
    <Border HeightRequest="44" StrokeShape="RoundRectangle 5,5,5,5" BackgroundColor="Transparent">
        <Label Text="{Binding ItemName}" VerticalOptions="Center" />
    </Border>
</local:CustomViewCell>

[Android] Screenshot_1684114287

[iOS] ios_test

If you only want to change the BackgroundColor of the Border, think of another way. Because this workaround changes the BackgroundColor of the cell, not the BackgroundColor of the Border.

homeyf commented 1 year ago

Verified this issue with Visual Studio Enterprise 17.7.0 Preview 1.0. Can repro on Android platform with sample project. https://github.com/muffadal53/MauiListViewItemSelectedColorOrangeAndroid.git

muffadal53 commented 10 months ago

@jsuarezruiz : What is the milestone for fix of this issue in MAUI? Thanks.

janeyuhwian commented 10 months ago

Yeah, the Android side is still default orange :(

StepKie commented 7 months ago

we are also looking for this to be configurable, it really breaks the look-and-feel of a carefully themed app.

ghost commented 7 months ago

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

Vroomer commented 7 months ago

I hope this won't get burried deep inside the backlog as a "not a bug/enhancement", because forcing developers to use wrappers just to get rid of arbitrary backround color has also performance hit. MAUI has already significant troubles with CollectionView performance and this is kinda low hanging fruit.

erossini commented 6 months ago

I'm working on a NET8 MAUI project and I get the problem in the ListView. I followed the implementation in the repo https://github.com/cat0363/Maui-Workaround13812.git but unfortunately it is not working for my project.

This is the implementation for Android. When I click/select an item, the background is orange and the property OnCellPropertyChanged is called only when I go back from the next page.

Do you have any solution for that?

Ganesh-210 commented 6 months ago

@erossini Could you share your list view xaml code.

erossini commented 5 months ago

The page is quite long. The ListView is this

<ListView
    x:Name="listDictionaries"
    Grid.Row="1"
    CachingStrategy="RecycleElement"
    HasUnevenRows="True"
    HorizontalOptions="FillAndExpand"
    IsRefreshing="{Binding IsRefreshing}"
    ItemSelected="listDictionaries_ItemSelected"
    ItemsSource="{Binding Dictionaries}"
    RefreshCommand="{Binding RefreshCommand}"
    SelectionMode="Single"
    VerticalOptions="FillAndExpand">
    <ListView.Margin>
        <OnIdiom
            x:TypeArguments="Thickness"
            Desktop="10,0,10,0"
            Phone="10,0,10,0"
            Tablet="10,0,0,10" />
    </ListView.Margin>
    <ListView.Triggers>
        <MultiTrigger TargetType="ListView">
            <MultiTrigger.Conditions>
                <BindingCondition Binding="{Binding IsEmpty}" Value="True" />
            </MultiTrigger.Conditions>
            <Setter Property="IsVisible" Value="False" />
        </MultiTrigger>
    </ListView.Triggers>
    <ListView.GroupHeaderTemplate>
        <DataTemplate x:DataType="dt:Dictionary">
            <ViewCell>
                <StackLayout Margin="0,5,0,5">
                    <Label Style="{StaticResource labelSubtitle2}" Text="{Binding LanguageString}" />
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.GroupHeaderTemplate>
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="dt:Dictionary">
            <local:CustomViewCell SelectedBackgroundColor="{StaticResource Primary06}">
                <Grid
                    ColumnSpacing="10"
                    HorizontalOptions="FillAndExpand"
                    RowSpacing="10"
                    VerticalOptions="FillAndExpand">
                    <Grid.Padding>
                        <OnIdiom
                            x:TypeArguments="Thickness"
                            Desktop="0,10,10,10"
                            Phone="10,10,10,10"
                            Tablet="0,30,0,0" />
                    </Grid.Padding>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="75" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="100" />
                    </Grid.ColumnDefinitions>

                    <StackLayout
                        Grid.Row="0"
                        Grid.RowSpan="2"
                        Grid.Column="0"
                        VerticalOptions="StartAndExpand">
                        <StackLayout.HeightRequest>
                            <OnIdiom
                                x:TypeArguments="x:Double"
                                Default="50"
                                Desktop="60"
                                Tablet="60" />
                        </StackLayout.HeightRequest>
                        <Border
                            HeightRequest="50"
                            HorizontalOptions="Start"
                            StrokeShape="RoundRectangle 50"
                            VerticalOptions="Center"
                            WidthRequest="50">
                            <Grid>
                                <Image
                                    Aspect="AspectFill"
                                    HeightRequest="50"
                                    IsOpaque="true"
                                    Source="{Binding LanguageFlag}"
                                    WidthRequest="50" />
                            </Grid>
                        </Border>
                        <Border
                            HeightRequest="30"
                            HorizontalOptions="End"
                            StrokeShape="RoundRectangle 30"
                            TranslationX="-15"
                            TranslationY="-25"
                            VerticalOptions="End"
                            WidthRequest="30">
                            <Grid>
                                <Image
                                    Aspect="AspectFill"
                                    HeightRequest="30"
                                    IsOpaque="true"
                                    Source="{Binding LanguageNativeFlag}"
                                    WidthRequest="30" />
                            </Grid>
                        </Border>
                        <Image IsVisible="{Binding IsDefault}" Style="{StaticResource imageDictionaryDefault}">
                            <Image.Source>
                                <FontImageSource
                                    FontFamily="FAS"
                                    Glyph="{x:Static hlp:FontAwesomeIcons.CircleCheck}"
                                    Size="20"
                                    Color="{AppThemeBinding Light={StaticResource Green},
                                                            Dark={StaticResource Green}}" />
                            </Image.Source>
                        </Image>
                    </StackLayout>

                    <Label
                        Grid.Column="1"
                        Style="{StaticResource labelDictionaryTitle}"
                        Text="{Binding Name}" />
                    <Label
                        Grid.Row="1"
                        Grid.Column="1"
                        Style="{StaticResource labelDictionaryDescription}"
                        Text="{Binding Description}" />

                    <VerticalStackLayout
                        Grid.RowSpan="2"
                        Grid.Column="2"
                        HorizontalOptions="EndAndExpand"
                        VerticalOptions="FillAndExpand">
                        <Border
                            Padding="5"
                            Background="{StaticResource Primary10}"
                            HorizontalOptions="Center"
                            StrokeShape="RoundRectangle 5"
                            VerticalOptions="Center">
                            <Label Style="{StaticResource labelDcWordNumber}" Text="{Binding WordNumberText}" />
                        </Border>
                    </VerticalStackLayout>
                </Grid>
                <ViewCell.ContextActions>
                    <MenuItem
                        Clicked="OnEdit"
                        CommandParameter="{Binding .}"
                        Text="{lang:Translate Edit}" />
                    <MenuItem
                        Clicked="OnSetAsDefault"
                        CommandParameter="{Binding .}"
                        Text="{lang:Translate SetAsDefault}" />
                    <MenuItem
                        Clicked="OnDelete"
                        CommandParameter="{Binding}"
                        IsDestructive="True"
                        Text="{lang:Translate Delete}" />
                </ViewCell.ContextActions>
            </local:CustomViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Ganesh-210 commented 5 months ago

The page is quite long. The ListView is this

<ListView
  x:Name="listDictionaries"
  Grid.Row="1"
  CachingStrategy="RecycleElement"
  HasUnevenRows="True"
  HorizontalOptions="FillAndExpand"
  IsRefreshing="{Binding IsRefreshing}"
  ItemSelected="listDictionaries_ItemSelected"
  ItemsSource="{Binding Dictionaries}"
  RefreshCommand="{Binding RefreshCommand}"
  SelectionMode="Single"
  VerticalOptions="FillAndExpand">
  <ListView.Margin>
      <OnIdiom
          x:TypeArguments="Thickness"
          Desktop="10,0,10,0"
          Phone="10,0,10,0"
          Tablet="10,0,0,10" />
  </ListView.Margin>
  <ListView.Triggers>
      <MultiTrigger TargetType="ListView">
          <MultiTrigger.Conditions>
              <BindingCondition Binding="{Binding IsEmpty}" Value="True" />
          </MultiTrigger.Conditions>
          <Setter Property="IsVisible" Value="False" />
      </MultiTrigger>
  </ListView.Triggers>
  <ListView.GroupHeaderTemplate>
      <DataTemplate x:DataType="dt:Dictionary">
          <ViewCell>
              <StackLayout Margin="0,5,0,5">
                  <Label Style="{StaticResource labelSubtitle2}" Text="{Binding LanguageString}" />
              </StackLayout>
          </ViewCell>
      </DataTemplate>
  </ListView.GroupHeaderTemplate>
  <ListView.ItemTemplate>
      <DataTemplate x:DataType="dt:Dictionary">
          <local:CustomViewCell SelectedBackgroundColor="{StaticResource Primary06}">
              <Grid
                  ColumnSpacing="10"
                  HorizontalOptions="FillAndExpand"
                  RowSpacing="10"
                  VerticalOptions="FillAndExpand">
                  <Grid.Padding>
                      <OnIdiom
                          x:TypeArguments="Thickness"
                          Desktop="0,10,10,10"
                          Phone="10,10,10,10"
                          Tablet="0,30,0,0" />
                  </Grid.Padding>
                  <Grid.RowDefinitions>
                      <RowDefinition Height="*" />
                      <RowDefinition Height="Auto" />
                  </Grid.RowDefinitions>
                  <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="75" />
                      <ColumnDefinition Width="*" />
                      <ColumnDefinition Width="100" />
                  </Grid.ColumnDefinitions>

                  <StackLayout
                      Grid.Row="0"
                      Grid.RowSpan="2"
                      Grid.Column="0"
                      VerticalOptions="StartAndExpand">
                      <StackLayout.HeightRequest>
                          <OnIdiom
                              x:TypeArguments="x:Double"
                              Default="50"
                              Desktop="60"
                              Tablet="60" />
                      </StackLayout.HeightRequest>
                      <Border
                          HeightRequest="50"
                          HorizontalOptions="Start"
                          StrokeShape="RoundRectangle 50"
                          VerticalOptions="Center"
                          WidthRequest="50">
                          <Grid>
                              <Image
                                  Aspect="AspectFill"
                                  HeightRequest="50"
                                  IsOpaque="true"
                                  Source="{Binding LanguageFlag}"
                                  WidthRequest="50" />
                          </Grid>
                      </Border>
                      <Border
                          HeightRequest="30"
                          HorizontalOptions="End"
                          StrokeShape="RoundRectangle 30"
                          TranslationX="-15"
                          TranslationY="-25"
                          VerticalOptions="End"
                          WidthRequest="30">
                          <Grid>
                              <Image
                                  Aspect="AspectFill"
                                  HeightRequest="30"
                                  IsOpaque="true"
                                  Source="{Binding LanguageNativeFlag}"
                                  WidthRequest="30" />
                          </Grid>
                      </Border>
                      <Image IsVisible="{Binding IsDefault}" Style="{StaticResource imageDictionaryDefault}">
                          <Image.Source>
                              <FontImageSource
                                  FontFamily="FAS"
                                  Glyph="{x:Static hlp:FontAwesomeIcons.CircleCheck}"
                                  Size="20"
                                  Color="{AppThemeBinding Light={StaticResource Green},
                                                          Dark={StaticResource Green}}" />
                          </Image.Source>
                      </Image>
                  </StackLayout>

                  <Label
                      Grid.Column="1"
                      Style="{StaticResource labelDictionaryTitle}"
                      Text="{Binding Name}" />
                  <Label
                      Grid.Row="1"
                      Grid.Column="1"
                      Style="{StaticResource labelDictionaryDescription}"
                      Text="{Binding Description}" />

                  <VerticalStackLayout
                      Grid.RowSpan="2"
                      Grid.Column="2"
                      HorizontalOptions="EndAndExpand"
                      VerticalOptions="FillAndExpand">
                      <Border
                          Padding="5"
                          Background="{StaticResource Primary10}"
                          HorizontalOptions="Center"
                          StrokeShape="RoundRectangle 5"
                          VerticalOptions="Center">
                          <Label Style="{StaticResource labelDcWordNumber}" Text="{Binding WordNumberText}" />
                      </Border>
                  </VerticalStackLayout>
              </Grid>
              <ViewCell.ContextActions>
                  <MenuItem
                      Clicked="OnEdit"
                      CommandParameter="{Binding .}"
                      Text="{lang:Translate Edit}" />
                  <MenuItem
                      Clicked="OnSetAsDefault"
                      CommandParameter="{Binding .}"
                      Text="{lang:Translate SetAsDefault}" />
                  <MenuItem
                      Clicked="OnDelete"
                      CommandParameter="{Binding}"
                      IsDestructive="True"
                      Text="{lang:Translate Delete}" />
              </ViewCell.ContextActions>
          </local:CustomViewCell>
      </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

@erossini Please remove CachingStrategy="RecycleElement" from the listview and please let me know if it works

erossini commented 5 months ago

Thank you @Ganesh-210 it is working!

Ganesh-210 commented 5 months ago

Thank you @Ganesh-210 it is working!

Welcome 👨‍💻

adelmurad24 commented 5 months ago

still not resolved in 2024 :/

Ganesh-210 commented 5 months ago

still not resolved in 2024 :/

What's your issue?

rutgersc commented 4 months ago

@Ganesh-210 do you perhaps have an explanation for why removing CachingStrategy="RecycleElement" would fix this issue?

AceCoderLaura commented 2 months ago

This should be labelled as a migration-compatibility issue because we had to work around this in XF with android:colorActivatedHighlight and now that workaround is broken.

FerreiraPablo commented 1 month ago

I solved it by having it like this, styling the Maui.MainTheme and using Theme.MaterialComponents.DayNight as the parent:

My styles.xml:

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <style name="Maui.MainTheme" parent="Theme.MaterialComponents.DayNight">
    <item name="android:colorActivatedHighlight">@android:color/transparent</item>
  </style>
</resources>

As other user mentioned remember the file goes Platforms/Android/Resources/values if it doesn't exist create it.

AceCoderLaura commented 1 month ago

Thanks @FerreiraPablo that fixed it for me too!

5CoJL commented 1 month ago

For any android newbie like me that couldn't be bothered to read the docs to save time but definitely should have, @FerreiraPablo 's styles.xml file should go in Platforms/Android/Resources/values