CircleProgress

Circle ProgressBar control with percentage underneath.

Inherits from LinearLayout/UIView.

Customization fields

Type	Field	Description	Default value
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.	0
UIFont Typeface	Font Typeface	Responsible for font percent's label.	System Roboto bold
float	TextSize	Responsible for percen't label text size.	11
UIColor Color	Color	It's main color of the control, this color will be applied to progress ring and percent's text.	#3C6DF0
UIColor Color	AlternativeColor	Solid color of checkmark circle.	#3C6DF0
UIColor Color	FillColor	Color for unfilled progress ring.	#EAEAEA
bool	ShowProgress	Sets visibility of percent's label.	true
bool	InProgress	Indicates status of the control.	false

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
}