Let’s start.

In this article, you will create Android Circle ProgressBar..

Step 1

Open Visual Studio->New Project->Templates->Visual C#->Android->Blank App

Select Blank App. Then give Project Name and Project Location.

Step 2

Go to Solution Explorer-> Project Name-> References then Right Click to Manage Nuget Packages then open new Dialog box. This dialog box is to search Json then Install the Newtonsoft.Json Packages.

Step 3

Next create New Layout for Design Page, go to Solution Explorer-> Project Name->Resources->layout then Right Click to Add->New Item then open new Dialog box. Then select Android Layout then give name for circularProgressbar.axml

Step 4

Next to create New XML for Circle Progressbar Design, go to Solution Explorer-> Project Name->Resources->Drawable then Right Click to Add->New Item then open new Dialog box. Then select Android Layout then give name for CircleBarDesign.xml

XML Code

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  3. <item android:id="@android:id/secondaryProgress">
  4. <shape android:innerRadiusRatio="6" android:shape="ring" android:thicknessRatio="20.0" android:useLevel="true">
  5. <gradient android:centerColor="#999999" android:endColor="#999999" android:startColor="#999999" android:type="sweep" /> </shape>
  6. </item>
  7. <item android:id="@android:id/progress">
  8. <rotate android:fromDegrees="270" android:pivotX="50%" android:pivotY="50%" android:toDegrees="270">
  9. <shape android:innerRadiusRatio="6" android:shape="ring" android:thicknessRatio="20.0" android:useLevel="true">
  10. <rotate android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="360" />
  11. <gradient android:centerColor="#00A859" android:endColor="#00A859" android:startColor="#00A859" android:type="sweep" /> </shape>
  12. </rotate>
  13. </item>
  14. </layer-list>

Step 5

Then open Solution Explorer-> Project Name->Resources->Layout-> circularProgressbar.axml click to open Design View then give the following code, here we create one ProgressBar and one Button for starting progressbar .


AXML Code
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#fff" tools:context="com.example.parsaniahardik.progressanimation.MainActivity">
  3. <ProgressBar android:id="@+id/circularProgressbar" style="?android:attr/progressBarStyleHorizontal" android:layout_width="250dp" android:layout_height="250dp" android:indeterminate="false" android:max="100" android:progress="50" android:layout_centerInParent="true" android:progressDrawable="@drawable/circlebardesign" android:secondaryProgress="100" />
  4. <TextView android:id="@+id/tv" android:layout_width="250dp" android:layout_height="250dp" android:gravity="center" android:text="25%" android:layout_centerInParent="true" android:textSize="20sp" android:visibility="gone" />
  5. <RelativeLayout android:minWidth="25px" android:minHeight="25px" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/relativeLayout1" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true">
  6. <Button android:text="Start" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/button1" /> </RelativeLayout>
  7. </RelativeLayout>

Step 6

Next to Open Solution Explorer-> Project Name->MainAtivity.cs,Open Oncreate()then implement following code,

  1. using Android.App;
  2. using Android.Widget;
  3. using Android.OS;
  4. using System.Threading;
  5. namespace AndroidCircleBar {
  6. [Activity(Label = "AndroidCircleBar", MainLauncher = true)]
  7. public class MainActivity: Activity {
  8. private static ProgressBar circularbar;
  9. private static Button BtnStart;
  10. private int progressStatus = 0, progressStatus1 = 100;
  11. protected override void OnCreate(Bundle savedInstanceState) {
  12. base.OnCreate(savedInstanceState);
  13. SetContentView(Resource.Layout.Circleprogessbar);
  14. circularbar = FindViewById < ProgressBar > (Resource.Id.circularProgressbar);
  15. BtnStart = FindViewById < Button > (Resource.Id.button1);
  16. BtnStart.Click += BtnStart_Click;
  17. circularbar.Max = 100;
  18. circularbar.Progress = 100;
  19. circularbar.SecondaryProgress = 100;
  20. }
  21. private void BtnStart_Click(object sender, System.EventArgs e) {
  22. new System.Threading.Thread(new ThreadStart(delegate {
  23. while (progressStatus < 100) {
  24. progressStatus += 1;
  25. progressStatus1 -= 1;
  26. circularbar.Progress = progressStatus1;
  27. System.Threading.Thread.Sleep(100);
  28. }
  29. })).Start();
  30. }
  31. }
  32. }

Step 7

Press F5 or Build and Run the Application.


Finally, we have successfully Created Xamarin Android Circle Progressbar.