Post
Ask Question

Xamarin.Android - Download Image From URL With Progress-Bar

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.


Similar Articles