Add ActivityIndicator in toolbar

AlibesharatiAlibesharati Member ✭✭
edited June 2018 in Xamarin.Forms

Is it possible Add ActivityIndicator on the ContentPage.ToolbarItems

Tagged:

Best Answer

  • BillyLiuBillyLiu Xamurai
    Accepted Answer

    Hi @Alibesharati ,

    Is it possible Add ActivityIndicator on the ContentPage.ToolbarItems

    Yes, it is possible, but you need to custom NavigationPage. You could refer to this Answer.

    First, create a CustomNavigationPage in PCL, and inherit NavigationPage

    public class CustomNavigationPage : NavigationPage
    {
        public event EventHandler<EventArgs> OnShowActivityIndicator;
        public event EventHandler<EventArgs> OnHideActivityIndicator;
    
        public CustomNavigationPage()
        {
    
        }
    
        public  CustomNavigationPage(Page page) : base(page)
        {
    
        }
    
        protected override void OnAppearing()
        {
            base.OnAppearing();
            //Show the indicator
            OnShowActivityIndicator?.Invoke(this, null);
           // Hide the indicator
           OnHideActivityIndicator?.Invoke(this, null);
        }
    }
    

    Then create the CustomNavigationPageRenderer in Android project, find the toolbar in the page and set a progressbar to it.

    [assembly: ExportRenderer(typeof(CustomNavigationPage), typeof(CustomNavigationPageRenderer))]
    namespace ActivityIndicatortoolbar.Droid
    {
        public class CustomNavigationPageRenderer : NavigationPageRenderer
        {
            CustomNavigationPage page;
            Android.Support.V7.Widget.Toolbar _toolbar;
            Android.Widget.ProgressBar _progressBar;
            bool _isProgressBarCurrentlyOnToolBar = false;
    
            public CustomNavigationPageRenderer(Context context) : base(context)
            {
    
            }
    
            protected override void OnElementChanged(ElementChangedEventArgs<NavigationPage> e)
            {
                base.OnElementChanged(e);
    
                if (e.NewElement != null)
                {
                    page = (CustomNavigationPage)e.NewElement;
                    page.OnShowActivityIndicator += HandleShowActivityIndicator;
                    page.OnHideActivityIndicator += HandleHideActivityIndicator;
                }
            }
    
            private void HandleShowActivityIndicator(object sender, EventArgs e)
            {
                var progressBar = GetProgressBar();
                if (progressBar == null)
                    return;
    
                var toolbar = GetToolbar();
                if (toolbar == null)
                    return;
    
                Device.BeginInvokeOnMainThread(() =>
                {
                   if (_isProgressBarCurrentlyOnToolBar == false)
                    {
                        toolbar.AddView(progressBar);
                        _isProgressBarCurrentlyOnToolBar = true;
                    }
                });
            }
    
            private void HandleHideActivityIndicator(object sender, EventArgs e)
            {
                var progressBar = GetProgressBar();
                if (progressBar == null)
                    return;
    
                var toolbar = GetToolbar();
                if (toolbar == null)
                    return;
    
                Device.BeginInvokeOnMainThread(() =>
                {
                    if (_isProgressBarCurrentlyOnToolBar)
                    {
                        toolbar.RemoveView(progressBar);
                        _isProgressBarCurrentlyOnToolBar = false;
                    }
                });
            }
    
            private Android.Support.V7.Widget.Toolbar GetToolbar()
            {
                if (_toolbar == null)
                {
                    for (var i = 0; i < this.ChildCount; i++)
                    {
                        var child = GetChildAt(i);
    
                        if (child.GetType() == typeof(Android.Support.V7.Widget.Toolbar))
                        {
                            _toolbar = (Android.Support.V7.Widget.Toolbar)child;
                        }
                    }
                }
                return _toolbar;
            }
    
            private Android.Widget.ProgressBar GetProgressBar()
            {
                if (_progressBar == null)
                {
                    _progressBar = new Android.Widget.ProgressBar(Forms.Context)
                    {
                        Indeterminate = true,                    
                        LayoutParameters = new LayoutParams(LayoutParams.WrapContent, LayoutParams.WrapContent)
                    };
                    _progressBar.SetPadding(10, 0, 0, 0);
                }
                return _progressBar;
            }
        }
    

    You could use it by calling:

      MainPage = new CustomNavigationPage(new MainPage());
    

Answers

  • BillyLiuBillyLiu Member, Xamarin Team Xamurai
    Accepted Answer

    Hi @Alibesharati ,

    Is it possible Add ActivityIndicator on the ContentPage.ToolbarItems

    Yes, it is possible, but you need to custom NavigationPage. You could refer to this Answer.

    First, create a CustomNavigationPage in PCL, and inherit NavigationPage

    public class CustomNavigationPage : NavigationPage
    {
        public event EventHandler<EventArgs> OnShowActivityIndicator;
        public event EventHandler<EventArgs> OnHideActivityIndicator;
    
        public CustomNavigationPage()
        {
    
        }
    
        public  CustomNavigationPage(Page page) : base(page)
        {
    
        }
    
        protected override void OnAppearing()
        {
            base.OnAppearing();
            //Show the indicator
            OnShowActivityIndicator?.Invoke(this, null);
           // Hide the indicator
           OnHideActivityIndicator?.Invoke(this, null);
        }
    }
    

    Then create the CustomNavigationPageRenderer in Android project, find the toolbar in the page and set a progressbar to it.

    [assembly: ExportRenderer(typeof(CustomNavigationPage), typeof(CustomNavigationPageRenderer))]
    namespace ActivityIndicatortoolbar.Droid
    {
        public class CustomNavigationPageRenderer : NavigationPageRenderer
        {
            CustomNavigationPage page;
            Android.Support.V7.Widget.Toolbar _toolbar;
            Android.Widget.ProgressBar _progressBar;
            bool _isProgressBarCurrentlyOnToolBar = false;
    
            public CustomNavigationPageRenderer(Context context) : base(context)
            {
    
            }
    
            protected override void OnElementChanged(ElementChangedEventArgs<NavigationPage> e)
            {
                base.OnElementChanged(e);
    
                if (e.NewElement != null)
                {
                    page = (CustomNavigationPage)e.NewElement;
                    page.OnShowActivityIndicator += HandleShowActivityIndicator;
                    page.OnHideActivityIndicator += HandleHideActivityIndicator;
                }
            }
    
            private void HandleShowActivityIndicator(object sender, EventArgs e)
            {
                var progressBar = GetProgressBar();
                if (progressBar == null)
                    return;
    
                var toolbar = GetToolbar();
                if (toolbar == null)
                    return;
    
                Device.BeginInvokeOnMainThread(() =>
                {
                   if (_isProgressBarCurrentlyOnToolBar == false)
                    {
                        toolbar.AddView(progressBar);
                        _isProgressBarCurrentlyOnToolBar = true;
                    }
                });
            }
    
            private void HandleHideActivityIndicator(object sender, EventArgs e)
            {
                var progressBar = GetProgressBar();
                if (progressBar == null)
                    return;
    
                var toolbar = GetToolbar();
                if (toolbar == null)
                    return;
    
                Device.BeginInvokeOnMainThread(() =>
                {
                    if (_isProgressBarCurrentlyOnToolBar)
                    {
                        toolbar.RemoveView(progressBar);
                        _isProgressBarCurrentlyOnToolBar = false;
                    }
                });
            }
    
            private Android.Support.V7.Widget.Toolbar GetToolbar()
            {
                if (_toolbar == null)
                {
                    for (var i = 0; i < this.ChildCount; i++)
                    {
                        var child = GetChildAt(i);
    
                        if (child.GetType() == typeof(Android.Support.V7.Widget.Toolbar))
                        {
                            _toolbar = (Android.Support.V7.Widget.Toolbar)child;
                        }
                    }
                }
                return _toolbar;
            }
    
            private Android.Widget.ProgressBar GetProgressBar()
            {
                if (_progressBar == null)
                {
                    _progressBar = new Android.Widget.ProgressBar(Forms.Context)
                    {
                        Indeterminate = true,                    
                        LayoutParameters = new LayoutParams(LayoutParams.WrapContent, LayoutParams.WrapContent)
                    };
                    _progressBar.SetPadding(10, 0, 0, 0);
                }
                return _progressBar;
            }
        }
    

    You could use it by calling:

      MainPage = new CustomNavigationPage(new MainPage());
    

  • AlibesharatiAlibesharati Member ✭✭

    @BillyLiu thanks for your full answer

Sign In or Register to comment.