Forum Xamarin.Forms

Activity Indicator two or more colors

NessaNessa DEMember ✭✭

Hey
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?
Thanks

Best Answer

Answers

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

            canvas.Clear();
    
            /*
             * 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.