Forum Xamarin.Forms

How do you download an image and then set it as the icon in the toolbar?

kajanvigneskajanvignes USMember
edited February 2016 in Xamarin.Forms

So I read some posts and see that to set the icon in the tool bar you would use code this line:

NavigationPage.SetTitleIcon(this, "home.png");

provided that home.png is in the resource folder for the platform that you are developing for. What I am trying to do is download an
image as a byte array and save it the phone, and then provide the file as a FileSource Image, since that is what NavigationPage.SetTitleIcon takes. I have tried this so far:

public string DisplayIcon(string filename, Stream image)
        var documentsPath = global::Android.OS.Environment.GetExternalStoragePublicDirectory(global::Android.OS.Environment.DirectoryDownloads);
        var filePath = Path.Combine(documentsPath.Path, filename);
        using (System.IO.FileStream output = new System.IO.FileStream(filePath, FileMode.Create))
        Android.Net.Uri iconPath = Android.Net.Uri.FromFile(new Java.IO.File(filePath));
        return (string)iconPath; 

I have checked the downloads folder on my phone to see if the image does get downloaded correctly and can be viewed, and it can, so that is not the problem. I have tried setting the icon in the PCL using this:

string iconSource = DependencyService.Get<ISaveAndLoad>().DisplayIcon("login.png", str);
        NavigationPage.SetTitleIcon(this, iconSource);

Note: login.png is the file that I am going to create on my phone, and str is the downloaded image byte array that I converted into a memoryStream

However, I get this error:
Could not load image named: {0}: file:///storage/emulated/0/Download/login.png

I think that the problem is that the file has to be saved in the phones resources folder, to be accessed as a FileSource Image, so I was wondering if anyone knows how to save an image to the resources folder for android and ios, so that I can access it as a FileSource Image. Or if you have another way of downloading an image as a byte array and then displaying that image as the Icon in the toolbar, that would be great. Some sample code or examples would be greatly appreciated.



  • AarkeyAarkey INMember

    I have the same issue. Please help

  • kyurkchyankyurkchyan AMMember ✭✭

    Have the same problem

  • AnatoliiBAnatoliiB USUniversity ✭✭

    Xamarin, is there some resolution to this? maybe icons can be associated only with files in certain locations?

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭
  • JGoldbergerJGoldberger USMember, Forum Administrator, Xamarin Team, University Xamurai

    Yes, you should be able to get an ImageSource from a URL. See:

    E.g.: ImageSource.FromUri(new Uri(""));

  • MichaelWatsonMichaelWatson USXamarin Team Xamurai

    If you are concerned about images having to be downloaded multiple times, don't! Xamarin Forms images are cached locally for 24 hours by default and you can change this default timespan to fit with your application's needs.

    webImage.Source = new UriImageSource { Uri = new Uri(""), CachingEnabled = true, CacheValidity = new TimeSpan(5,0,0,0) };

    Downloading the image over a stream, saving it locally and then loading it can definitely be done. I would recommend looking at the source code implementations for ImageSource and how the images are cached. That code should be everything you need to create this behavior. You will also need to think about how to deal with the image if the user deletes application stored data from the system settings. If that is done, you're locally saved image is deleted. This is one of the benefits Forms provides for you when loading the source from a Uri, if the image isn't available locally for some reason, it will load from the Uri.

    I hope this helps!

  • MichaelWatsonMichaelWatson USXamarin Team Xamurai

    Specific source code for setting the NavBar icon in a Forms project:

    var mainPage = new NavigationPage(new AcronymPage()) { BarBackgroundColor = Color.FromHex("#0A2B3C"), BarTextColor = Color.FromHex("F2F3F4"), Icon = new UriImageSource { Uri = new Uri(""), CachingEnabled = true, CacheValidity = new TimeSpan(5,0,0,0) }; };

  • TugbaBERKTugbaBERK USMember ✭✭
    edited December 2017

    How can i show image that saved android dowload file (global::Android.OS.Environment.GetExternalStoragePublicDirectory(Environment.DirectoryPictures) on toolbaritem in xamarin.form.I can save image dowload file ...But I can not show image on toolbar.Help me!!!

Sign In or Register to comment.