How to create a hideable bottom view

Question

I've developed a Xamarin.Forms.Shell app containing 4 tabs.

I would like to add a basic audio player allowing to play music from a streaming source.

But I'm looking to the best way to manage it:

I don't want to display it in a dedicated page, as I don't get the metadata of the audio (no album photo, no title, no author, ...) and there are no "Play Next" or "Play Previous" features
I would like to display a basic view appearing at the bottom and above of the main page, containing 3 buttons (play or pause/stop/close) and the name of the radio

I would like to do something like this:

But I don't know what is the better approach to achieve this:

use a Drawer like SimpleBottomDrawer
use a Slide like SlideOverKit
use a Sheet like BottomSheet

All of these solution seem too complicated for my needs.

Is there another approach?

"All of these solution seem too complicated" probably because what you are trying to achieve is in fact complicated. Have you tried them? what doesn't fit your requirement in the 3 approach you have mentioned ? — Cfun, Feb 05 '21 at 13:50
Maybe yes... It seemed not complicated to hide/show a view at the bottom of the screen, but I didn't found a simple way to achieve it. That's why I preferred to ask: maybe someone has already did it or could have an idea... — Gold.strike, Feb 05 '21 at 13:55
The idea of the bottom tabs is that it must be a simple way for the users to access different sections of your app easily. They are working natively on each platform, so if you want to hide them you must get your hands dirty with custom renderers, or you can try to implement it on xamarin forms, but you would have to make the navigation your self on each button click. — FabriBertani, Feb 05 '21 at 14:07
@FabriBertani the question focus on a collapsable/hideable view above the bottom tabs, not the bottom tabs themselves. Gold.strike Will one of the 3 repo works for you? (a part from the complexity point of view). you want something complicated must be a solution with the same complexity. You can start implementing one and if you have issues post specific ones. — Cfun, Feb 05 '21 at 14:10
I've finally implemented a basic / simple solution, by using Frame and transition. — Gold.strike, Feb 05 '21 at 17:51

score 0 · Answer 1 · answered Feb 12 '21 at 10:30

Here is the solution I've implemented.

By default, I display a Floating Action Button, that will show the radio player control panel.

In this panel, I have the "play"/"stop" controls, the radio title, and a "close" button to hide the panel.

The radio player control panel is hidden by default by applying a TranslationY

The XAML looks like this:

<Grid>
    <!-- FloatingActionButton -->
    <yummy:PancakeView x:Name="RadioFab"
                CornerRadius="28"                       
                Padding="16"
                BackgroundColor="{StaticResource AccentColor}"
                VerticalOptions="End"
                HorizontalOptions="End"
                Margin="25">
        <yummy:PancakeView.Shadow>
            <yummy:DropShadow Offset="1,2"
                              Color="{StaticResource Gray-Black}"
                              BlurRadius="2"
                              Opacity="0.2"/>
        </yummy:PancakeView.Shadow>
        <Image HeightRequest="24" WidthRequest="24">
            <Image.Source ... />
        </Image>
        <yummy:PancakeView.GestureRecognizers>
            <TapGestureRecognizer Tapped="RadioFab_Clicked" />
        </yummy:PancakeView.GestureRecognizers>
    </yummy:PancakeView>
    <!-- Radio player view
    <yummy:PancakeView x:Name="RadioPlayerView"
                       VerticalOptions="End"
                       HeightRequest="56"
                       BackgroundColor="{StaticResource Gray-400}"
                       Opacity="0.9"
                       TranslationY="56"
                       IsVisible="True">
       <!-- content ... -->
    </yummy:PancakeView>
<Grid>

When the Floating Action Button is clicked, I call the TranslateTo() method, allowing me to display the panel, and to get the expected behaviour.

The code-behind looks like this:

private void RadioFab_Clicked(object sender, EventArgs e)
{
    this.RadioFab.ScaleTo(0, easing: Easing.Linear);
    this.RadioPlayerView.TranslateTo(0, 0, 300);
}

void Player_CloseButton_Clicked(System.Object sender, System.EventArgs e)
{
    this.RadioPlayerView.TranslateTo(0, 56, 300);
    this.RadioFab.ScaleTo(1, easing: Easing.SpringOut);
}

How to create a hideable bottom view

1 Answers1