Forum Xamarin Xamarin.Forms

Activity Indicator two or more colors

NessaNessa DEMember ✭✭

I Programm in Visual Studio 2017 with Xamarin
I saw in an example, where their Activity Indicator had two Colors.
it looked as if there were two Activity Indicators one above another and with a litte time difference...
does anyone know how i can implement that?
because when i put two activity indicators at the same place i only can see one...
maybe because they start at the same time? (but i experimented a bit with wait etc so idk)
or maybe because ist not possible?

Best Answer


  • NessaNessa DEMember ✭✭
    edited July 2017

    Oh thanks i didnt think of that... it works for me ^^

    edit: with scale even better! :smile:
    not exactly how i wanted it originally but it's nice :smiley:

  • TcMarsh31TcMarsh31 Member

    You can use SkiaSharp to create your own stylish activity indicator

    void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
    SKImageInfo info = args.Info;
    SKSurface surface = args.Surface;
    SKCanvas canvas = surface.Canvas;

             * 500 is the diameter of the outer arc
             * each inner arc from the outer arc will get reduced by 50
             *you can change the value according to make the arc smaller or bigger
             * */
            float left, right;
            float top, bottom;
            right = left = (info.Width - 500) / 2; //get the left and right postions to support all the devices
            top = bottom = (info.Height - 500) / 2;//get the top and bottom postions to support all the devices
            //first Arc
            SKRect rect = new SKRect(left, top, info.Width - right, info.Height - bottom);
            using (SKPath path = new SKPath())
                path.AddArc(rect, firstOvalStartAngle, firstOvalSweepAngle);
                canvas.DrawPath(path, firstArcPaint);
            //second Arc
            SKRect rect2 = new SKRect(left + 50, top + 50, (info.Width - right) - 50, (info.Height - bottom) - 50);
            using (SKPath path = new SKPath())
                path.AddArc(rect2, secondOvalStartAngle, secondOvalSweepAngle);
                canvas.DrawPath(path, secondArcPaint);
            //third Arc
            SKRect rect3 = new SKRect(left + 100, top + 100, (info.Width - right) - 100, (info.Height - bottom) - 100);
            using (SKPath path = new SKPath())
                path.AddArc(rect3, thirdOvalStartAngle, thirdOvalSweepAngle);
                canvas.DrawPath(path, thirdArcPaint);

    This will create a 3 arcs rotating like below,

Sign In or Register to comment.