Adding Platform-Specific Images And Icons In Application

Saleh Qadeer

7y11.6k6100Article

XamarinAdding Platform Specific Images Icons In Application

6 Comments

Join the conversation! Your thoughts help the community grow.

ANTHONY DOWDELL6y ago
How would this look now that OnPlatform is deprecated?
Saleh Qadeer7y ago
No i will not be equal.
Saleh Qadeer7y ago
Also the dpi is Dots Per Inch, 92*92 defines that your screen will have 92*92 pixels per inch. Whereas the resolution defines how large your screen is like 1200x1800 defines your screen is 1200 pixels high and 1800 pixels wide
- Rameez Shaikh7y ago
  Thanks for the answer..I am just new to this, can you please tell while saving an image, lets say if i create an image of 96pixels by 96pixels so will it be equal to 96*96dpi?? Thanks.
Saleh Qadeer7y ago
It is necessary to place right density images in to corresponding drawable folders otherwise image may become blurred reducing the quality of your UI.
Rameez Shaikh7y ago
Can i place a 96*96 image into drawable folder and not in drawable xxhdpi directly...also please let me know is 96*96 is the pixel resolution

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.

Adding Platform Specific Images And Icons In Application

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.