How to create a progress spinner in xamarin android

Question

Please I need a tutorial or the code to create a progress spinner in xamarin android just like what is in the photo.

Answer 1

You have the ProgressDialog control for Xamarin.Android that allows you to display a dialog with a spinner : https://developer.xamarin.com/api/type/Android.App.ProgressDialog/

Otherwise, if you want to have a spinner on your layout : https://forums.xamarin.com/discussion/72880/how-can-i-display-a-spinning-wheel-loading-indicator-while-loading-a-webview

If I understand correctly, you will need to create a ProgressBar and set the indeterminate property to true.

Answer 2

You can check an example at Show ProgressDialog Android

But as the official docs says:

ProgressDialog is a modal dialog, which prevents the user from interacting with the app. Instead of using this class, you should use a progress indicator like ProgressBar, which can be embedded in your app's UI. Alternatively, you can use a notification to inform the user of the task's progress.

You can check a great tutorial at https://www.journaldev.com/9629/android-progressbar-example

Answer 3

ProgressDialog is deprecated, so use ProgressBar

AXML Code :Create my_custom_progress_bar.axml in resource layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:padding="16dp">
 <TableRow
   android:layout_centerInParent="true"
   android:layout_width="match_parent"
   android:layout_height="wrap_content">
   <ProgressBar
       android:id="@+id/progress_bar"
       android:layout_width="wrap_content"
       android:layout_height="match_parent" />
    <TextView
       android:gravity="center|left"
       android:id="@+id/tv_message"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_marginLeft="16dp" />
  </TableRow>
</RelativeLayout>

Xamarin Android Code: use the below methods in the activity and use where ever needed. We can keep this in utils class if want to use through out the application.

private Android.App.AlertDialog _progressBarDialog;

public void ShowProgressBar(string message)
    {
        Android.App.AlertDialog.Builder dialogBuilder = new Android.App.AlertDialog.Builder(this);
        var inflater = (LayoutInflater)GetSystemService(Context.LayoutInflaterService);
        var dialogView = inflater.Inflate(Resource.Layout.my_custom_progress_bar, null);
        dialogBuilder.SetView(dialogView);
        dialogBuilder.SetCancelable(false);
        var tvMsg = dialogView.FindViewById<TextView>(Resource.Id.tv_msg);
        tvMsg.Text = message;
        _progressBarDialog= dialogBuilder.Create();
        _progressBarDialog.Show();
    }


public void HideProgressBar()
    {
        if (_progressBarDialog!= null)
        {
            _progressBarDialog.Dismiss();
        }
    }

Answer 4

This is working

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.Graphics;
using Android.Graphics.Drawables;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Java.Lang;

namespace Android.Basic.UI
{
    
    public class ProgressBarDialog
    {
        private TextView tvText { get; }
        private AlertDialog dialog;
        private LinearLayout ll;
        private ProgressBar progressBar;
        TextView valTxt;
        TextView maxTxt;
        AlertDialog.Builder builder;
        public ProgressBarDialog(Context context)
        {
            int llPadding = 30;
            ll = new LinearLayout(context);
            ll.Orientation = Orientation.Vertical;
            ll.SetPadding(llPadding, llPadding, llPadding, llPadding);
            ll.SetGravity(GravityFlags.Center);
            LinearLayout.LayoutParams llParam = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WrapContent,
                    LinearLayout.LayoutParams.WrapContent);
            //Add Header
            LinearLayout.LayoutParams tvParam = new LinearLayout.LayoutParams(
                   LinearLayout.LayoutParams.WrapContent,
                   LinearLayout.LayoutParams.WrapContent);
            tvParam.Gravity = GravityFlags.Left;
            tvText = new TextView(context);
            tvText.Text = ("Loading ...");
            tvText.SetTextColor(Color.Black);
            tvText.SetTextSize(Android.Util.ComplexUnitType.Dip, 18);
            tvText.LayoutParameters = (tvParam);
            ll.AddView(tvText);
            //Add Progress
            LinearLayout.LayoutParams progressBarParam = new LinearLayout.LayoutParams(
                  LinearLayout.LayoutParams.MatchParent,
                  LinearLayout.LayoutParams.WrapContent);
            progressBar = new ProgressBar(context, null, Android.Resource.Attribute.ProgressBarStyleHorizontal);
            progressBar.Indeterminate = true;
            progressBar.SetPadding(0, 0, 0, 0);
            progressBar.LayoutParameters = (progressBarParam);
            ll.AddView(progressBar);
            //Progress Labels
            RelativeLayout rl = new RelativeLayout(context);
            var rlParam = new RelativeLayout.LayoutParams(
                    LinearLayout.LayoutParams.MatchParent,
                    LinearLayout.LayoutParams.WrapContent);
            rl.LayoutParameters = rlParam;
            valTxt = new TextView(context);
            valTxt.Text = "25";
            valTxt.SetTextColor(Color.White);
            valTxt.LayoutParameters = tvParam;

            var maxParam = new RelativeLayout.LayoutParams(
                   LinearLayout.LayoutParams.WrapContent,
                   LinearLayout.LayoutParams.WrapContent);
            maxParam.AddRule(LayoutRules.AlignParentRight);
            maxTxt = new TextView(context);
            maxTxt.LayoutParameters = maxParam;
            maxTxt.Text = "100";
            maxTxt.SetTextColor(Color.White);

            rl.AddView(valTxt);
            rl.AddView(maxTxt);
            ll.AddView(rl);


            llParam.Gravity = GravityFlags.Center;
            ll.LayoutParameters = (llParam);
            builder = new AlertDialog.Builder(context);
            builder.SetCancelable(false);
            
            builder.SetView(ll);

            dialog = builder.Create();
            dialog.SetCanceledOnTouchOutside(false);
            dialog.CancelEvent += Dialog_CancelEvent;
            Window window = dialog.Window;
            if (window != null)
            {
                var windowManager = context.GetSystemService(Context.WindowService).JavaCast<IWindowManager>();// new WindowManager.LayoutParams();

                var layoutParams = new WindowManagerLayoutParams(
                ViewGroup.LayoutParams.MatchParent,
                ViewGroup.LayoutParams.MatchParent,
                WindowManagerTypes.Phone,
                WindowManagerFlags.Fullscreen,
                Format.Translucent);
                layoutParams.CopyFrom(dialog.Window.Attributes);
                layoutParams.Width = LinearLayout.LayoutParams.WrapContent;
                layoutParams.Height = LinearLayout.LayoutParams.WrapContent;
                dialog.Window.Attributes = (layoutParams);
            }

        }
        public event EventHandler Cancelled;
        private void Dialog_CancelEvent(object sender, EventArgs e)
        {
            Cancelled?.Invoke(this, null);
        }
        public Color ProgressColor
        {
            set
            {
                progressBar.IndeterminateDrawable.SetColorFilter(value, Android.Graphics.PorterDuff.Mode.Multiply);
            }
        }
        public void SetProgress(int progress)
        {
            progressBar.SetProgress(progress, true);
        }
        public ViewStates ValueStates
        {
            set
            {
                maxTxt.Visibility = value;
                valTxt.Visibility = value;
            }
        }
        public string Title
        {
            get { return tvText.Text; }
            set
            {
                Xamarin.Essentials.MainThread.BeginInvokeOnMainThread(() =>
                {
                    tvText.Text = value;
                });
               
            }
        }
        public string ValueLeft
        {
            get { return valTxt.Text; }
            set
            {
                Xamarin.Essentials.MainThread.BeginInvokeOnMainThread(() =>
                {
                    valTxt.Text = value;
                });
            }
        }
        public string ValueRight
        {
            get { return maxTxt.Text; }
            set
            {
                Xamarin.Essentials.MainThread.BeginInvokeOnMainThread(() =>
                {
                    maxTxt.Text = value;
                });
               
            }
        }
        public Color TextColor
        {
            set
            {
                tvText.SetTextColor(value);
                valTxt.SetTextColor(value);
                maxTxt.SetTextColor(value);
            }
        }
        public bool Indeterminate
        {
            get { return progressBar.Indeterminate; }
            set
            {
                progressBar.Indeterminate = value;
            }
        }
        public bool Cancelable
        {
            set
            {
                dialog.SetCancelable(value);
                dialog.SetCanceledOnTouchOutside(value);
                builder.SetCancelable(value);
            }
        }
        public int Maximum
        {
            get { return progressBar.Max; }
            set
            {
                progressBar.Max = value;
            }
        }
        public void SetBackgroundDrawableResource(int resId)
        {
            ll.SetBackgroundResource(resId);            
        }
        public void Show()
        {
            dialog.Show();
        }
        public void Hide(bool setNull = true)
        {
            if (dialog != null)
            {
                dialog.Hide();
                if (setNull)
                {
                    dialog = null;
                }
            }
        }
    }
    public class ProgressDrawable : Drawable
    {
        private const int NUM_RECTS = 10;
        Paint mPaint = new Paint();
        protected override bool OnLevelChange(int level)
        {
            this.InvalidateSelf();
            return true;
        }
        public override int Opacity => (int)Format.Translucent;

        public override void Draw(Canvas canvas)
        {
            int level = Level;
            Rect b = Bounds;
            float width = b.Width();
            for (int i = 0; i < NUM_RECTS; i++)
            {
                float left = width * i / NUM_RECTS;
                float right = left + 0.9f * width / NUM_RECTS;
                mPaint.Color = ((i + 1) * 10000 / NUM_RECTS <= level ? Color.Black : Color.Gray);
                canvas.DrawRect(left, b.Top, right, b.Bottom, mPaint);
            }
        }

        public override void SetAlpha(int alpha)
        {
            
        }

        public override void SetColorFilter(ColorFilter colorFilter)
        {
            
        }
    }

}