Adding Platform-Specific Images And Icons In Application

Introduction

Sometimes you need to work with images that are specific to each platform like icons, buttons, and toolbars because each of the platforms has its own designed guideline. So, if you want to give your application a native look and feel on each platform, you want to use platform-specific images. In this article, you are going to learn how to add a platform-specific icon to a button in your application.

Targeted Audience

People with the basic knowledge of C# and Xamarin.

Tools

Visual Studio with Xamarin installed.

To download a perfect icon for the app, I am using the website https://icons8.com. You can find different types of icons from here, and each of them is free to use. You can also customize them or get them in different sizes and colors.

Image for iOS

Both iOS and Android are capable of loading different resolution images based on the targeted device. So, you probably know that the newer phones have more pixel density which means you can display higher-quality images. That’s why inside the iOS folder, we have images of different resolutions.

 

The thing to note here is the naming convention for iOS. Our original file is 32x32 pixels. We have another clock file with the suffix at 2x which is twice as big as the original clock file. And similarly, we have another file with the suffix at 3x. So, whenever you want to supply an image to iOS, it's best to supply the image in three different sizes.

To add the images, go to your iOS project and right-click on the “Resources” folder to add files. Select all the three images and add them into the folder.

 
Image for Android

In Android, we have a different convention. So we have different folder names and all these folders start with “drawable”. Here, hdpi stands for High DPI, xhdpi stands for Extra High DPI, xxhdpi stands for Extra Extra High DPI image and xxxhdpi stands for Extra Extra Extra High DPI image.

To add files in Android, we also have a folder named “Resources” and inside that folder, we again have subfolders. Simply place each density image to the corresponding folder.

 

 

Image for Windows

In Windows, we have only one file inside the Windows folder. You can place the image in the root of the project; it doesn’t need to be placed in any folder.

 

Now, let’s add the image to the button. You can add that using the XAML code.

XAML Code

<?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:PracApp1"
             x:Class="PracApp1.MainPage"
             x:Name="ContentPage1">
    <AbsoluteLayout VerticalOptions="Center" HorizontalOptions="Center">
        <Button x:name="Btn" Image="clock.png"></Button>

    </AbsoluteLayout>
</ContentPage>

You can also add this by using C# Code.

C# Code

public MainPage()
        {
            InitializeComponent();
            Btn.Image = (FileImageSource)ImageSource.FromFile("clock.png");
        }

The result will be something like this.

 

To add the platform-specific image, you can use this code. The results will be the same.

C# Code

Btn.Image = (FileImageSource)ImageSource.FromFile(Device.OnPlatform(
                iOS: "clock.png",
                Android: "clock.png",
                WinPhone: "clock.png"
                ));

If you want to do this from XAML, you can write the following code.

XAML Code

<Button>
            <Button.Image>
                <OnPlatform x:TypeArguments="FileImageSource" iOS="clock.png" Android="clock.png" WinPhone="clock.png"></OnPlatform>
            </Button.Image>
        </Button>

That is it.

This article gave a brief introduction of how to add icons and platform-specific images to your application. Hope this helps you throughout adding platform-specific images.