How to implement title bar hide/show when scrollbar up/down in Android?

Question

https://i.imgur.com/i8n8t1e.mp4

Like the twitter app, the title bar gradually hides and shows along with the scrolling of the scrollbar. How does it implement?

I searched bottom bar issue but can not find the title bar solution.

I want to implement this feature using MAUI, but I don't know where to start. I hope to receive your assistance.

Thanks.

Answer 1

Easiest way forward is to just take a ScrollViewand hide and display the NavBar. The problem with that is flicker and sensitivity of the touchscreen. So you need to consider a throttle or what I use, a debounce timer (common use when you want an event not to happen to often or to rapidly.) An simple proof of concept is this code below. A much nicer way is to use animation and do a real control, but then you need to use handlers and native code.

xaml

<ScrollView x:Name="myScrollView" Scrolled="OnScrolled">
    <StackLayout x:Name="myStackLayout" />
</ScrollView>

Code

public partial class TestView : ContentPage
{
    private double _lastScrollY;

    public TestView()
    {
        InitializeComponent();

        for (int i = 1; i <= 30; i++)
        {
            myStackLayout.Children.Add(new Label
            {
                Text = $"Item {i}",
                FontSize = 20,
                Margin = new Thickness(10),
                HeightRequest = 50, 
                BackgroundColor = Colors.LightGray,
                HorizontalOptions = LayoutOptions.Center
            });
        }
    }

    private IDispatcherTimer _debounceTimer;
    private bool _isAnimating = false;

    private void OnScrolled(object sender, EventArgs e)
    {
        if (_isAnimating) return; 

        var direction = myScrollView.ScrollY - _lastScrollY;
        _lastScrollY = myScrollView.ScrollY;

        _debounceTimer?.Stop();

        _debounceTimer = Application.Current.Dispatcher.CreateTimer();
        _debounceTimer.Interval = TimeSpan.FromMilliseconds(60);

        _debounceTimer.Tick += (s, eventArgs) =>
        {
            _isAnimating = true; 

            if (direction > 0) 
            {
                HideNavigationBar();
            }
            else if (direction < 0) 
            {
                ShowNavigationBar();
            }

            _isAnimating = false; 
            _debounceTimer.Stop();
        };
        _debounceTimer.Start();
    }

    private void HideNavigationBar()
    {
        Shell.SetTabBarIsVisible(this, false);
        Shell.SetNavBarIsVisible(this, false);
    }

    private void ShowNavigationBar()
    {
        Shell.SetTabBarIsVisible(this, true);
        Shell.SetNavBarIsVisible(this, true);
    }
}