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
- <?xml version="1.0" encoding="utf-8" ?>
- <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
- <item android:id="@android:id/secondaryProgress">
- <shape android:innerRadiusRatio="6" android:shape="ring" android:thicknessRatio="20.0" android:useLevel="true">
- <gradient android:centerColor="#999999" android:endColor="#999999" android:startColor="#999999" android:type="sweep" /> </shape>
- </item>
- <item android:id="@android:id/progress">
- <rotate android:fromDegrees="270" android:pivotX="50%" android:pivotY="50%" android:toDegrees="270">
- <shape android:innerRadiusRatio="6" android:shape="ring" android:thicknessRatio="20.0" android:useLevel="true">
- <rotate android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="360" />
- <gradient android:centerColor="#00A859" android:endColor="#00A859" android:startColor="#00A859" android:type="sweep" /> </shape>
- </rotate>
- </item>
- </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
- <?xml version="1.0" encoding="utf-8"?>
- <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">
- <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" />
- <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" />
- <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">
- <Button android:text="Start" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/button1" /> </RelativeLayout>
- </RelativeLayout>
Step 6
Next to Open Solution Explorer-> Project Name->MainAtivity.cs,Open Oncreate()then implement following code,
- using Android.App;
- using Android.Widget;
- using Android.OS;
- using System.Threading;
- namespace AndroidCircleBar {
- [Activity(Label = "AndroidCircleBar", MainLauncher = true)]
- public class MainActivity: Activity {
- private static ProgressBar circularbar;
- private static Button BtnStart;
- private int progressStatus = 0, progressStatus1 = 100;
- protected override void OnCreate(Bundle savedInstanceState) {
- base.OnCreate(savedInstanceState);
- SetContentView(Resource.Layout.Circleprogessbar);
- circularbar = FindViewById < ProgressBar > (Resource.Id.circularProgressbar);
- BtnStart = FindViewById < Button > (Resource.Id.button1);
- BtnStart.Click += BtnStart_Click;
- circularbar.Max = 100;
- circularbar.Progress = 100;
- circularbar.SecondaryProgress = 100;
- }
- private void BtnStart_Click(object sender, System.EventArgs e) {
- new System.Threading.Thread(new ThreadStart(delegate {
- while (progressStatus < 100) {
- progressStatus += 1;
- progressStatus1 -= 1;
- circularbar.Progress = progressStatus1;
- System.Threading.Thread.Sleep(100);
- }
- })).Start();
- }
- }
- }
Step 7
Press F5 or Build and Run the Application.
Finally, we have successfully Created Xamarin Android Circle Progressbar.