Xamarin audioplayer menu always on top and expand

Question

I'm creating an app for android and ios to listen to music from my radio station. For now I have a tabbedPage design with the menu option at the bottom. In the MainActivity I have created a ContentView with a linearLayout that always stays on top of all tabpages. But I would like that the player can be expanded to the top and reverse.

I have made a video screenshot of another app from the netherlands of what I would like to achieve.

Biggest question, is the TabbedPage capable to do this or do I need a whole other setup?

Different kinds of linearLayouts or relativeLayouts

Added code by request of ToolmakerSteve.
In my MainActivity OnCreate I have this:

ViewGroup contentView = FindViewById<ViewGroup>(Android.Resource.Id.Content);
                LinearLayout view = new LinearLayout(this);
                view.Orientation = Android.Widget.Orientation.Horizontal;
                view.SetBackgroundColor(Android.Graphics.Color.Blue);
                view.Background = getDrawableWithRadius();
                FrameLayout.LayoutParams parameter = new FrameLayout.LayoutParams((Device.Idiom == TargetIdiom.Tablet ? 60 : LinearLayout.LayoutParams.MatchParent), (Device.Idiom == TargetIdiom.Tablet ? 110 : 160));
                parameter.Gravity = GravityFlags.Bottom | GravityFlags.Left;
                parameter.BottomMargin = 220;
                view.LayoutParameters = parameter;

                btnPushPlay = new Android.Widget.ImageButton(this);
                btnPushPlay.Click += BtnPushPlay_Click;
   btnPushPlay.SetBackgroundColor(Android.Graphics.Color.Transparent);
                btnPushPlay.SetImageResource(Resource.Drawable.media_play_green);
                view.AddView(btnPushPlay);
                lblSong = new TextView(this);
                lblSong.TextSize = 18;
                lblSong.SetPadding(10, 35, 0, 0);
                lblSong.SetTextColor(Android.Graphics.Color.White);
                lblSong.Text = "Luister live!";
                view.AddView(lblSong);
                contentView.AddView(view);

And in the MainPage.xaml I have this:

    <?xml version="1.0" encoding="utf-8" ?>
    <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:Kickit_Radio.MenuPages;assembly=Kickit_Radio"
            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:local1="clr-namespace:Kickit_Radio.ViewModels"
            android:TabbedPage.ToolbarPlacement="Bottom"
            BarBackgroundColor="#000000"
            BarTextColor="White"
            BackgroundColor="Black"
            x:Class="Kickit_Radio.MainPage"
            NavigationPage.HasNavigationBar="False"
            NavigationPage.HasBackButton="True" SelectedTabColor="Green" UnselectedTabColor="#3184ca">
    <TabbedPage.Children>
        <local:Home Title="Home" IconImageSource="home.ico" />
        <local:Nieuws Title="Nieuws" IconImageSource="@drawable/news" />
        <local:Request Title="Request" IconImageSource="@drawable/record" />
        <local:Programma Title="Programma" IconImageSource="@drawable/column" />
        <local:Streams Title="Streams" IconImageSource="@drawable/record" />
        <local:Contact Title="Contact" IconImageSource="@drawable/about"/>
    </TabbedPage.Children>
</TabbedPage>

Answer 1

After searching and thinking, I came up with a solution to add a page to the TabViewItem. First, you need to edit your xaml-file from ContentPage to ContentView. Also change the BindingContext and the Content, for example:

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:viewModels="clr-namespace:Your_application.ViewModels"
    x:Class="Your_application.MenuPages.MenuName">
<ContentView.BindingContext>
    <viewModels:MenuNameModel />
</ContentView.BindingContext>
    <ContentView.Content>
        ....
    </ContentView.Content>
</Content>

Also change your class:

public partial class MenuName : ContentPage

To:

public partial class MenuName : ContentView

After that, you can add your page to the TabViewItem

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:tool="http://xamarin.com/schemas/2020/toolkit"
        x:Class="Your_application.MainPage"
         xmlns:local="clr-namespace:Your_application.ViewModels;assembly=Kickit_Radio"
         xmlns:pages="clr-namespace:Your_application.MenuPages;assembly=Kickit_Radio">
<Grid x:Name="tabView">
    <tool:TabView TabStripPlacement="Bottom"
        TabStripBackgroundColor="Black"
        TabStripHeight="60"
        TabIndicatorColor="#3184ca" x:Name="myTabView">
        <tool:TabViewItem
             Icon="home.ico"
             Text="Home"
             TextColor="White"
             TextColorSelected="Green"
             FontSize="12"
             x:Name="tb1">
             <Grid BackgroundColor="Black">
                 <local:HomeView />
             </Grid>
         </tool:TabViewItem>
    </tool:TabView>
</Grid>
</ContentPage.Content>
</ContentPage>

Hope this will help you further!

Answer 2

Two techniques.

---

#1: Android code that toggles native media player between two views

MainActivity.cs:

// This must be a member of the app class, so it exists after OnCreate finishes.
LinearLayout view;   // small view
ViewGroup bigView;   // large view

... OnCreate()
{
    
    // Change this:
    //LinearLayout view = new LinearLayout(this);
    // To this:
    view = new LinearLayout(this);
    ...
    btnPushPlay = new Android.Widget.ImageButton(this);
    ...
    contentView.AddView(view);

    // Using Android XML layout (".xml" resource file, not XAML), define an Android view that contains native Android MediaPlayer.
    bigView = ...;
    // TODO: set Gravity to Top.
    ...
    // TBD: I think we can add it now, but either ".Gone" or ".Invisible".
    bigView.Visibility = Android.Views.ViewStates.Gone;   // Not there at first.
    contentView.AddView(bigView);   // Or maybe do this later, when want it.
}

private void ToggleMediaPlayer(bool large)
{
    if (large)
    {
        view.Visibility = Android.Views.ViewStates.Gone;
        bigView.Visibility = Android.Views.ViewStates.Visible;
    }
    else
    {
        view.Visibility = Android.Views.ViewStates.Visible;
        bigView.Visibility = Android.Views.ViewStates.Gone;
    }
}

// TODO: btnPushPlay needs a click method that calls `ToggleMediaPlayer(true);`.
// TODO: bigView must have a button that calls `ToggleMediaPlayer(false);`.

---

#2: Do it all in Xamarin.Forms

• Remove the code in OnCreate, that creates and adds view to the content.
• Instead of TabbedPage, use Community Toolkit / TabView.
• Use an XF Grid to overlay the small and large views, on top of the page that has TabView.

MainPage.xaml:

<!-- change from TabbedPage to ContentPage -->
<ContentPage ...>
  <!-- outer grid, with three overlaid children. -->
  <Grid RowDefinitions="*" ...>

    <!-- replacement for TabbedPage -->
    <!-- https://github.com/xamarin/XamarinCommunityToolkit/blob/main/samples/XCT.Sample/Pages/Views/TabView/CustomTabsPage.xaml -->
    <Grid x:Name="tabview" ...>
      <TabView ...>
        ...
      </TabView>
    </Grid>

    <!-- small view overlay -->
    <!-- TODO: OR maybe this should become a new row in "tabview" Grid above. -->
    <Grid x:Name="smallView" RowDefinitions="*,Auto" ...>
        <!-- nothing in Row 0: it is empty space -->

        <!-- small view at bottom of screen -->
        <StackLayout Grid.Row="1" Orientation="Horizontal" ...>
            ...
            <ImageButton x:Name="btnPushPlay" .../>
            ...
        </StackLayout>
    </Grid>

    <!-- large view overlay -->
    <Grid x:Name="bigView" IsVisible="False" ...>
        ...
    </Grid>

  </Grid>
</ContentPage>

In MainPage.xaml.cs:

// Change from ": TabbedPage" to "ContentPage".
public partial class MainPage : ContentPage
{

  private void ToggleMediaPlayer(bool large)
  {
    bigView.IsVisible = large;

    // This probably isn't needed, if bigView covers the entire screen.
    //MAYBE smallView.IsVisible = !large;
  }

// TODO: btnPushPlay needs a click method that calls `ToggleMediaPlayer(true);`.
// TODO: bigView must have a button that calls `ToggleMediaPlayer(false);`.

You'll have to research, to fill in missing details. And tweak according to your needs.