Add Images Icons And Splash Screen In Xamarin.Forms

Umair Hassan
7y
18.6k
0
3

100

Article

There are two types of images, which are given below.

Platform Independent (Backgrounds, Images)

Download using an URL.
Embed in a Portable Class Library (PCL).

Platform Specific (Icons, Splash Screens)

Add to each application Project

First Section - Platform Independent Images

Let's start with platform independent images.

In our Xamarin.Forms project, we use platform independent images by downloading them from URL or by embed image in our project.

Download using a URI

We can simply download an image from URL by adding URL in image source. You can add image from XAML or from code. Both examples are given.

Via XAML

<Image x:Name="tempimage" Source="https://stepupandlive.files.wordpress.com/2015/03/sydney.jpg"></Image>

Output on Android and Windows.

xamarin

Via Code Behind

Now, add the same image via code file. We can add image URl from code behind like this.

XAML

<Image x:Name="tempimage"></Image>

Image source is added from code file.

Code File

var imagesource = new UriImageSource { Uri = new Uri("https://stepupandlive.files.wordpress.com/2015/03/sydney.jpg") };
tempimage.Source = imagesource;

It can directly download image from given source. The same output is generated but this time from code file.

Output on Android and Windows

Embed in a Portable Class Library (PCL)

Let’s discuss how to use embedded image in our project.

In Visual Studio

Make a folder of your resources and paste your desired image in it.

xamarin

After pasting an image right click on image and go to properties.

xamarin

Look for "Advanced" section and change "Build Action" to Embedded Resource.

xamarin

After changing its Build Action type, you can use this image in both XAML and from code file.

But to use it from XAML, you have to make a custom markup for it. We will discuss it later. Firstly, this is the code file sample to use embedded image.

Use embedded image from code file

Xaml

<Image x:Name="image"></Image>

Code

image.Source = ImageSource.FromResource("crossplatformapp.Resource.home.jpg");

Add complete path of file in this format: (Projectname.foldername.imagename.ImageExtension)

Output on both android and windows

Include Embedded Image Source in XAML

Now, use the same image from XAML. You can't directly put image source in the format given above. Firstly, you have to make custom markup class for this.

Make new folder of MarkupExtensions and add new class named EmbeddedImage.cs.

xamarin

Now, implement interface "IMarkupExtension" to this class.

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace ProjectName.MarkupExtensions {
public class EmbeddedImage: IMarkupExtension {
public string ResourceId {
get;
set;
}
public object ProvideValue(IServiceProvider serviceProvider) {
if (String.IsNullOrWhiteSpace(ResourceId)) return null;
return ImageSource.FromResource(ResourceId);
}
}
}

Here, our custom markup class is complete.

Now, use this in XAML.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ProjectName.MarkupExtensions" x:Class="Practice__app.ImagePage">
<StackLayout>
<Image Source="{local:EmbeddedImage ResourceId=crossplatformapp.Resource.home.jpg }"> </Image>
</StackLayout>
</ContentPage>

Firstly, add xmlns namespace just like this.

xmlns:local="clr-namespace:ProjectName.MarkupExtensions"

*Change ProjectName to your application project name*

Then, give image source like shown above to use the image.

Same output is shown but this time we use XAML to use embedded image.

Output on both Android and Windows

Here, our first section is complete -- now start with platform specific images. We can make a native look of the application by putting images in folders of each application project.

You can add image in Android, Windows, and iOS project to use platform specific images.

For ANDROID

Explore Android folder in your Xamarin.Forms project, then expand resources folder. Here, you will see the following folders.

drawable
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi

Here, hdpi stands for high dpi; xhdpi stands for extra high dpi; xxhdpi stands for extra extra high dpi.

You can put your original file in drawable folder, and if you have high dpi version of this image, put this in drawable-hdpi. Similarly, for extra high dpi version of this image, you may put this image in drawable-xhdpi folder. Keep in your mind that image file name in each folder remains the same.

FOR iOS

For iOS project, expand the Resources folder and paste your images here. Here, a question arises - How iOS differentiates high quality version of image?

In iOS, we follow a naming convention to differentiate our images.

If your image name is "abc.png", for high version of this image, you may use "[email protected]" or “[email protected]”.

xamarin

*Keep in mind that in iOS, all images are in same folder but with different naming convention*

FOR WINDOWS

Expand Windows folder in your Xamarin forms project and paste the image there. Don't paste image in any folder but just in the project file.

Now, we add images in all platforms. Let’s use them in our portable Xamarin.Forms project and give native look and feel to our project.

Suppose you paste an image name "abc.png" in all three project folders, to use this in XAML file, we can code like this:

<Image Source="abc.png"></Image>

Now you can directly use image source here without using any external markup class or any embedded image.

Application Icons and Splash Screens

For Visual Studio

Android

Right click on your Android project.

Go to Properties and search for Android Manifest. Here, you see Application Icon drop down box.

Open this dropdrown.

All images and icons in your drawable folder are shown. You can use any of this as your application icon.

xamarin

iOS

Expand iOS folder and double click info.plist file. Here, you see Bundle icon files; default icons are set there. You can change them according to your desire.

xamarin