Introduction (Progress Bar)

Xamarin is a platform to develop cross-platform and multi-platform apps (Ex. Windows phone, Android, and iOS). In the Xamarin platform, a code sharing concept is used. Xamarin Studio is available in Visual Studio also.

ProgressBar control is used to load the page or any process in the app.

Prerequisites

  • Visual Studio 2015 update 3
The following steps are needed to be followed in order to create ProgressBar Control in Xamarin Android app, using VS 2015 update 3.

Step 1 - Click File >> New >>Project or press Ctrl+Shift+N.

studio

Step 2 - After opening the New Project, select Installed -->Templates -->Visual C# -->Android -->choose the Blank App (Android). Next, give your Android app a name and give path of your project. Finally, click OK..

studio

Step 3 - Next, go to the Solution Explorer. Select Resource --> Layout -->double click to open main.axml page. You can either write the code in code view or design it using GUI in design view.

studio

Step 4 - Now, in design view, you can design this page.

studio

Step 5 - Next, delete the default "Hello World" button. Go to the source panel; you can see the button coding. Delete it.

studio

Step 6 - After deleting the xaml code, next delete the C# button action code. Go to the MainActivity.cs page and delete the button code.

studio

Step 7 - Your app will look like the following image.

studio

Step 8 - Next, go to the toolbox window. There, you have all types of the tools and control. Go to the toolbox window and scroll down. You will see the Progress Bar (horizontal) tool.

studio

Step 9 - Now, drag and drop the ProgressBar (horizontal) tool control in your main.axml page.

studio

Step 10 - Go to the properties window. Select the ProgressBar1-->Main. Set indeterminate to True. The ProgressBar Control in enabled.

studio

code
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" <ProgressBar style="? android:attr/progressBarStyleHorizontal" android:layout_width=" match_parent" android:layout_height="wrap_content" android:id="@+id/progressBar1" android:indeterminate="true" />
  3. </Linear>
Step 11 - If you have Android Virtual device, you can run the app in that. Otherwise, run it in your Android phone. Connect your phone via USB cable in your system or laptop. Enable the option - Allow USB debugging.

Next, go to Visual Studio.

If connected, your Android phone shows up in the run menu (Ex:Sony E6553(Android 6.0-API 23)). Click on that. It will run the app in your Android phone.

</Linear />

Output
It will take some time because the app will be built in your phone.
<?xml version="1.0" encoding="utf-8"? /> <linearlayout xmlns:android= ">

<?xml version="1.0" encoding="utf-8"? /> <linearlayout xmlns:android=
Progress Ring

ProgressRing is similar to ProgressBar, but it is used to load the page or any process in the app.

Step 1 - Go to the toolbox window and scroll down. You will see the Progress Bar(Large) tool.

<?xml version="1.0" encoding="utf-8"? /> <linearlayout xmlns:android= ">

Step 2 - Drag and drop the ProgressBar(Large) Tool Control in your main.axml page.

<?xml version="1.0" encoding="utf-8"? /> <linearlayout xmlns:android= ">

Step 3 - After dragging and dropping the ProgressBar (Large).

Go to the properties window, select the progressBar1-->Main. Set indeterminate to true.

whatever

Code
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" <ProgressBar style="? android:attr/progressBarStyleLarge" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/progressBar1" android:indetermin ate="true" />
  3. </LinearLayout>

Step 4 - This step is similar to the above steps.

<?xml version="1.0" encoding="utf-8"? /> <linearlayout xmlns:android= ">

Output

After running your app, it will show the progress ring in your app.

Summery

Summary - So, this was the process of create ProgressBar Control and ProgressRing in Xamarin Android app, using Visual Studio 2015 update 3.