CircleProgress

Circle ProgressBar control with percentage underneath.

Inherits from LinearLayout/UIView.

Customization fields

FontStyleItem FontStyle - responsible for font customization.

int Progress - progress percents. Shows progress percentage. Should be fron 0 to 100. After setting 100, shows checkmark icon.

UIFont Font - responsible for font percent's label.

Typeface Typeface - responsible for font percent's label.

float TextSize - responsible for percen't label text size.

UIColor Color Color - it's main color of the control, this color will be applied to progress ring and percent's text.

UIColor Color AlternativeColor - solid color of checkmark circle.

UIColor Color FillColor - color for unfilled progress ring.

bool ShowProgress - sets visibility of percent's label. True is default.

bool InProgress - indicates status of the control.

Events

Started - raised, after user's click, when user starts or resume loading;

Stopped - raised, after user's click, when user stops or pause loading;

Finished - raised when Progress is 100 percents, after that checkmark icon will be shown.

Usage

Android

For Android platform, there are two ways to add CircleProgress to the layout: to the axml markup file or from the code behind.

Sample for creating CircleProgress in axml markup for Android:

<EOS.UI.Droid.Controls.CircleProgress
    android:id="@+id/circleProgress"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal" />

Sample for creating CircleProgress in code behind for Android:

var circleProgress = newCircleProgress(ApplicationContext);
circleProgress.LayoutParameters = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WrapContent, ViewGroup.LayoutParams.WrapContent);
circleProgress.Typeface =  Typeface.CreateFromAsset(Assets,"Fonts/Roboto.ttf");
circleProgress.TextSize = 20;
circleProgress.Color=Color.Blue;
circleProgress.AlternativeColor=Color.Green;
circleProgress.Progress= 0;
circleProgress.ShowProgress=true;

Note: For customization Typeface you should add a file with a custom font to assets.

iOS

For iOS CircleProgress can be added from the .xib/storyboards files or from code behind.

The sample for creating CircleProgress in code behind for IOS:

var circleProgress = new CircleProgress;
circleProgress.Frame = new CGRect(0, 0, 48, 48);
circleProgress.Font = UIFont.SystemFontOfSize(17);
circleProgress.Color = UIColor.Blue;
circleProgress.AlternativeColor = UIColor.Green;
circleProgress.Progress = 0;
circleProgress.ShowProgress = true;
circleProgress.FontStyle = new FontStyleItem()
{
    Color = ColorExtension.FromHex(brandPrimaryColor),
    Font = UIFont.SystemFontOfSize(13f, UIFontWeight.Semibold),
    Size = 13f,
    LetterSpacing = -0.6f,
    LineHeight = 15f
}