Xamarin.Android - Circle ProgressBar In Android

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.

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now