Android MediaElement Change hover background Opacity/Color

[AliDem]

Hi,
How can we change the hover color or opacity, because on Android TV we can't see which button is focused.
I think MediaElement use Views of ExoPlayer in android.

Thank you.

[rokmeglic71]

@AliDem just an idea. Could you hide the controls and add your own button which you would like to expose to the user? This is what CoPilot came up and I have run if trough few tests, to make sure code is working.

XAML:

<Grid RowDefinitions="*,Auto">

    <!-- Media Player -->
    <toolkit:MediaElement x:Name="Player"
                          Source="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
                          ShouldAutoPlay="False"
                          ShouldShowPlaybackControls="False"
                          Aspect="AspectFit"
                          Grid.Row="0" />

    <!-- Controls -->
    <StackLayout Orientation="Horizontal"
                 HorizontalOptions="Center"
                 Grid.Row="1"
                 Spacing="20">

        <Button Text="Play" Clicked="OnPlayClicked">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="#222"/>
                            <Setter Property="TextColor" Value="White"/>
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Focused">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="#33FFFFFF"/>
                            <Setter Property="TextColor" Value="Yellow"/>
                            <Setter Property="Scale" Value="1.1"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Button>

        <Button Text="Pause" Clicked="OnPauseClicked">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="#222"/>
                            <Setter Property="TextColor" Value="White"/>
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Focused">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="#33FFFFFF"/>
                            <Setter Property="TextColor" Value="Yellow"/>
                            <Setter Property="Scale" Value="1.1"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Button>

    </StackLayout>
</Grid>

XAML.CS

private void OnPlayClicked(object sender, EventArgs e)
{
    if (Player.CurrentState != CommunityToolkit.Maui.Core.MediaElementState.Playing)
    {
        Player.Play();
    }
}

private void OnPauseClicked(object sender, EventArgs e)
{
    if (Player.CurrentState == CommunityToolkit.Maui.Core.MediaElementState.Playing)
    {
        Player.Pause();
    }
}

[ne0rrmatrix]

Android uses a touch interface. This might be a nice idea for MacOS or Windows but for android I do not see the use case. Maybe for accessibility but in that case it might be better to make it an audio cue? Anyways you can create custom controls and hide the UI controls already using MediaElement.ShouldShowPlaybackControls = false

I do not believe we have any way to modify the android controls to make these changes. If this gets enough upvotes I can look into making these changes. But we would need to figure it out for Mac/iOS too. It is easy to do on windows and I could make that available as I already have made some changes there. But I have no idea how to modify the ios/mac/android controls. Those are part of the their respective libraries. Media3 for android and AVFoundation for ios/mac.

[rokmeglic71]

Anyways you can create custom controls and hide the UI controls already using MediaElement.ShouldShowPlaybackControls = false
Yes, the above Demo work for Play and Pause. It works on Android. Did not test on iOs.