androidmauititlebar

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


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.


Solution

  • 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);
        }
    }