Introduction
In this article, you will learn how to download an image from a URL address into your Xamarin Android application.
The prerequisites
  • Android Support Library v7 AppCompat
  • Any Image URL
The steps given below are required to be followed in order to create an app that lets you download an image from the URL with Progress-bar.
Step 1 - Create Android Project
Create your Android solution in Visual Studio or Xamarin Studio. Select Android and from the list, choose Android Blank App. Give it a name, like SaveWithProgress.
Step 2 - Add Android Support v7 AppCompat Library
First of all, in References, add a reference Android.Support.v7. AppCompat using NuGet Package Manager, as shown below.
Step 3 - Add XML File
After successful installation of AppCompat, add a new XML file. For that, go to Solution Explorer-> Project Name-> Resources-> Values-> Right-click to add a new item, select XML, and give it a name, such as style.xml. Open this XML file and add the following code.
(Folder Name: values, File Name: style.xml)
XML Code
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <resources>
  3. <style name="MyTheme" parent="MyTheme.Base">
  4. </style>
  5. <!--Base theme applied no matter what API-->
  6. <style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
  7. <item name="windowNoTitle">true</item>
  8. <!--We will be using the toolbar so no need to show ActionBar-->
  9. <item name="windowActionBar">false</item>
  10. <!--Set theme color from http://www.google.com/design/spec/style/color.html#color-co-->
  11. <!--Color Primary is used for default action bar backround-->
  12. <item name="colorPrimary">#009688</item>
  13. <!--Color Primary Dark is use for status bar-->
  14. <item name="colorPrimaryDark">#1976D2</item>
  15. <!--ColorAccent is used as the default value for
  16. ColorControlActivated which is used to tint widgts-->
  17. <item name="colorAccent">#FF4081</item>
  18. <item name="colorControlHighlight">#FF4081</item>
  19. <!--You can also set ColorControlNormal ColorControlActivated
  20. ColorControlHihglight colorSwitchThumbNormal.-->
  21. </style>
  22. </resources>
Step 4 - Add XML File
Now, add a new folder to the Resources Folder with name values-v21. Similarly, add a new XML file inside values-v21 folder - style.xml and add the following code.
(Folder Name: values-v21, File Name: style.xml)
XML Code
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <resources>
  3. <!--
  4. Base Application theme for API 21+. this theme
  5. replaces MyTheme from res/style.xml on API 21+ devices-->
  6. <style name="MyTheme" parent="MyTheme.Base">
  7. <item name="android:windowContentTransitions">true</item>
  8. <item name="android:windowAllowEnterTransitionOverlap">true</item>
  9. <item name="android:windowAllowReturnTransitionOverlap">true</item>
  10. <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
  11. <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
  12. <item name="android:windowTranslucentStatus">true</item>
  13. </style>
  14. </resources>
Step 5 - Writing DownloadImageFromUrl Class
Before you go further, you need to write your DownloadImageFromUrl class. For this, go to Solution Explorer-> Project Name and right-click. Select Add -> New Item-> Class. Give it a name like DownloadImageFromUrl.cs and write the following code with appropriate namespaces.
(File Name: DownloadImageFromUrl.cs)
C# Code
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5. using Android.App;
  6. using Android.Content;
  7. using Android.Graphics.Drawables;
  8. using Android.OS;
  9. using Android.Runtime;
  10. using Android.Views;
  11. using Android.Widget;
  12. using Java.IO;
  13. using Java.Net;
  14. namespace SaveWithProgress
  15. {
  16. public class DownloadImageFromUrl : AsyncTask<string, string, string>
  17. {
  18. private ProgressDialog pDialog;
  19. private ImageView imgView;
  20. private Context context;
  21. public DownloadImageFromUrl(Context context, ImageView imgView)
  22. {
  23. this.context = context;
  24. this.imgView = imgView;
  25. }
  26. protected override void OnPreExecute()
  27. {
  28. pDialog = new ProgressDialog(context);
  29. pDialog.SetMessage("Downloading file. Please wait...");
  30. pDialog.Indeterminate = false;
  31. pDialog.Max = 100;
  32. pDialog.SetProgressStyle(ProgressDialogStyle.Horizontal);
  33. pDialog.SetCancelable(true);
  34. pDialog.Show();
  35. base.OnPreExecute();
  36. }
  37. protected override void OnProgressUpdate(params string[] values)
  38. {
  39. base.OnProgressUpdate(values);
  40. pDialog.SetProgressNumberFormat(values[0]);
  41. pDialog.Progress = int.Parse(values[0]);
  42. }
  43. protected override void OnPostExecute(string result)
  44. {
  45. string strongPath = Android.OS.Environment.ExternalStorageDirectory.Path;
  46. string filePath = System.IO.Path.Combine(strongPath, "download.jpg");
  47. pDialog.Dismiss();
  48. imgView.SetImageDrawable(Drawable.CreateFromPath(filePath));
  49. }
  50. protected override string RunInBackground(params string[] @params)
  51. {
  52. string strongPath = Android.OS.Environment.ExternalStorageDirectory.Path;
  53. string filePath = System.IO.Path.Combine(strongPath, "download.jpg");
  54. int count;
  55. try
  56. {
  57. URL url = new URL(@params[0]);
  58. URLConnection connection = url.OpenConnection();
  59. connection.Connect();
  60. int LengthOfFile = connection.ContentLength;
  61. InputStream input = new BufferedInputStream(url.OpenStream(), LengthOfFile);
  62. OutputStream output = new FileOutputStream(filePath);
  63. byte[] data = new byte[1024];
  64. long total = 0;
  65. while ((count = input.Read(data)) != -1 )
  66. {
  67. total += count;
  68. PublishProgress(""+(int)((total / 100) / LengthOfFile));
  69. output.Write(data, 0, count);
  70. }
  71. output.Flush();
  72. output.Close();
  73. input.Close();
  74. }
  75. catch (Exception e)
  76. {
  77. }
  78. return null;
  79. }
  80. }
  81. }
Step 6 - Main Layout
Open Solution Explorer-> Project Name-> Resources-> Layout-> Main.axml. Open this main layout file and add the following code.
(File Name: Main.axml , Folder Name: Layout)
XML Code
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:local="http://schemas.android.com/apk/res-auto"
  4. android:orientation="vertical"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent">
  7. <android.support.v7.widget.Toolbar
  8. android:id="@+id/toolbar"
  9. android:fitsSystemWindows="true"
  10. android:layout_width="match_parent"
  11. android:layout_height="wrap_content"
  12. android:minHeight="?attr/actionBarSize"
  13. android:background="?attr/colorPrimary"
  14. android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
  15. local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
  16. <Button
  17. android:text="Download Image"
  18. android:layout_width="match_parent"
  19. android:layout_height="wrap_content"
  20. android:id="@+id/btnDownload" />
  21. <ImageView
  22. android:src="@android:drawable/ic_menu_gallery"
  23. android:layout_width="match_parent"
  24. android:layout_height="wrap_content"
  25. android:id="@+id/imageView" />
  26. </LinearLayout>
Step 7 - Main Activity Class
Now, go to Solution Explorer-> Project Name-> MainActivity and add the following code to the main activity with appropriate namespaces.
(FileName: MainActivity)
C# Code
  1. using Android.App;
  2. using Android.Widget;
  3. using Android.OS;
  4. using Android.Support.V7.App;
  5. namespace SaveWithProgress
  6. {
  7. [Activity(Label = "SaveWithProgress", MainLauncher = true , Theme ="@style/MyTheme")]
  8. public class MainActivity : AppCompatActivity
  9. {
  10. protected override void OnCreate(Bundle savedInstanceState)
  11. {
  12. base.OnCreate(savedInstanceState);
  13. // Set our view from the "main" layout resource
  14. SetContentView(Resource.Layout.Main);
  15. var btnDownload = FindViewById<Button>(Resource.Id.btnDownload);
  16. var imageView = FindViewById<ImageView>(Resource.Id.imageView);
  17. btnDownload.Click += delegate
  18. {
  19. DownloadImageFromUrl download = new DownloadImageFromUrl(this, imageView);
  20. download.Execute("http://www.qygjxz.com/data/out/244/4304228-wallpaper-phone-hd.jpg");
  21. };
  22. }
  23. }
  24. }
Step 8 - Permissions From Device
We need permissions from the device. So, go to Solution Explorer-> Properties-> AndroidManifest and add this code inside application tags.
  1. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  2. <uses-permission android:name="android.permission.INTERNET" />
Output
Summary
This was the process of creating an app that allows the users to download an image from a URL with ProgressBar in Xamarin.Android. Please share your comments and feedback.