locked
Activity Indicator two or more colors RRS feed

  • Question

  • User334525 posted

    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

    Friday, July 7, 2017 7:20 AM

Answers

  • User251004 posted

    You would probably have to use an absolute layout to position the activity indicators on top of eachother (ie, share the same center point), and then just make sure that one is slightly bigger than the other, using WidthRequest and HeightRequest. Whether this actually works, I don't know, as I haven't tried it myself

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Friday, July 7, 2017 7:23 AM

All replies

  • User251004 posted

    You would probably have to use an absolute layout to position the activity indicators on top of eachother (ie, share the same center point), and then just make sure that one is slightly bigger than the other, using WidthRequest and HeightRequest. Whether this actually works, I don't know, as I haven't tried it myself

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Friday, July 7, 2017 7:23 AM
  • User334525 posted

    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:

    Friday, July 7, 2017 7:53 AM
  • User393577 posted

    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,

    Monday, March 30, 2020 5:05 AM