Xamarin Forms: How to show an audio player on all pages of the app?

Question

I have a page for playing songs in my project. When I go back to the previous page after playing a song (without pausing it), it will continue to play in the background, and users can pause it at any time from the notification bar. I am using Plugin.MediaManager (Version: 1.1.1) for the integration of songs.

Current song screens on my App

But we have a new suggestion, like playing the songs in the app itself on top or bottom on all the other pages (like WhatsApp). Our application has more than 100 pages, so adding the audio player on all these pages is a tedious task. So any other tricky way to implement it on all the pages by reusing it or any other better solution for this feature?

The expected feature is like the below one, like WhatsApp

If you want to display the player on **all** of your pages, you won't get around touching pretty much all of them in one way or another. One way to do this is to have a base class for all pages where the player is always integrated. Integrating the player into each separately doesn't make much sense, indeed. However, without knowing the architecture of your app, it will be difficult to propose an appropriate solution. — Julian, Nov 23 '22 at 11:33
You can try to use Custom Renderer to implement NavigationPage or Frame, define your audio player into it, and then apply it to your page. For the implementation of Custom Renderer, you can refer to the official documentation: [Introduction to Custom Renderers](https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/introduction) — Zack, Nov 24 '22 at 06:18

Patricia · Answer 1 · 2022-11-29T12:09:34.933

If you have a common TabbedPage such as the screenshot you attached of Whatsapp, you could add at the beginning of its xaml file before the definition of the views:

<NavigationPage.TitleView>
        <StackLayout>
            ...
        </StackLayout>
</NavigationPage.TitleView>

That way you will have a common Navigation view on top of all of them with custom data that you could modify in the associated xaml.cs file of that TabbedPage.

If you have a different structure for your views you could check the documentation for Control Templates in Xamarin Forms, and include it in your App.xaml.

Good luck!

I implemented it using a PopupPage page, thanks – Sreejith Sree Nov 30 '22 at 07:46 — Sreejith Sree, Nov 30 '22 at 07:46

Sreejith Sree · Accepted Answer · 2022-11-30T07:37:42.357

We implemented this using a pop-up page.

XAML:

<StackLayout 
    HorizontalOptions="Center"
    VerticalOptions="End">

    <mm:VideoView 
           Grid.Column="0"
           HorizontalOptions="FillAndExpand" 
           VerticalOptions="FillAndExpand"
           AutoPlay="True" 
           IsVisible="True"
           x:Name="audioplayer"
           ShowControls="True">
        <mm:VideoView.HeightRequest>
            <OnIdiom x:TypeArguments="x:Double">
                <OnIdiom.Phone>80</OnIdiom.Phone>
                <OnIdiom.Tablet>120</OnIdiom.Tablet>
                <OnIdiom.Desktop>80</OnIdiom.Desktop>
            </OnIdiom>
        </mm:VideoView.HeightRequest>
    </mm:VideoView>
</StackLayout>

XAML.CS

public partial class AudioPopupPage : PopupPage
{
    public AudioPopupPage(object source)
    {
        InitializeComponent();
        if (source != null)
        {
            audioplayer.Source = source;
        }
    }
    
    protected override bool OnBackgroundClicked()
    {
        BackgroundInputTransparent = true;
        return false;
    }
}

We call the pop-up page when we leave the song page.

protected override bool OnBackButtonPressed()
{
    PopupNavigation.Instance.PushAsync(new Views.AudioPopupPage(CrossMediaManager.Current.State), true);
    return base.OnBackButtonPressed();
}

With this approach, this audio player is showing on all pages, and it is working fine on all platforms.

Xamarin Forms: How to show an audio player on all pages of the app?

2 Answers2