Page tree
Skip to end of metadata
Go to start of metadata

This guide explains how to use correct images in your application.

How the OS is picking right image ?

Supported Image Formats

Android and iOS supported different type of image formats. That’s why Smartface accepts .JPEG, .PNG and .BMP and .TIFF file formats only.
You can put these types of images into assets folder. Resource folders only supports .PNG type images.

Setting Correct Image

Android : For different screen sizes, the local image file is set to the resource drawable folder according to its screen size. The drawable folders can be found images/android directory. It is described more detail on Google' developer site.
iOS : There is only one resource folder on iOS devices. Different size of image file names ends with “@” prefix.  It is described more detail on Apple' developer site.

How the OS manages the scaling ?

Image scaling is managed directly by Operating Systems. Just for emulator purposes, Smartface managing the images. Because of that reason, in some cases actual image size is changing for Emulator. 

Please note that, Published projects (.apk or iOSPublish.zip ) always use image scaling which is provided by OS. For more information please check the link for Android and iOS .

Using images from http(s)

Web hosted images can also be used in applications. Generally SMF.UI.Image object is used to show remote images.

var img = new SMF.UI.Image({
	name :"img",
	image : "myicon.png",
	top : "10%",
	width : "70%",
	left : "15%",
	imageFillType : SMF.UI.ImageFillType.STRETCH
});

Pages.page1.add(img);
img.changeAnimation = true; // if it is true , image changes with animation generally used for remote images.
	
var btn = new SMF.UI.TextButton({
	name : "btn",
	text : "Click Me!",
	fontColor :"white",
	onPressed : page1_btn_onPressed,
	width : "70%",
	left : "15%",
	height : "10%",
	top : "70%"
});
Pages.page1.add(btn);

	function page1_btn_onPressed(e) {
	img.image = "https://www.smartface.io/wp-content/uploads/2016/04/Desktop-HD-2-1.png";
	}

How the image lookup works ?

Smartface has own image lookup mechanism. Order of image loopkup is ;

  • Image paths can be assigned with just name of the file. In this case system will assume it is an image from given image.
    image1.image = “a.png” —> image1.image = “images://a.png”
  • If image path contains a schema, then the schema handler will handle the image path. Image path might be changed after it has been loaded (such as http download)
    image1.image = “images://a.png”;  image1.image = “assets://a.png”; image1.image = “http://a.png”; image1.image = “ftp://a.png
  • For downloaded images, when loaded i.image will be replaced with full path of the stored image
  • Full path lookup will be performed

Hovewer, If the setted image can not be found (not exists in path or image download fail) image will not be changed and will keep old value.

Using same images for iOS and Android

For using exactly the same image for all iOS and Android devices , assets folder can be used.

This folder is used to reach files in it directly. Instead of the “Resources” and “Images”, this folder can be reached by file operations such as read. Also, assets folder is available for each kind of device, you don’t need to use seperate folders as in Resources.

First, let's place a ".png" file inside the assets folder.

var img = new SMF.UI.Image({
	name :"img",
	image : "assets://myicon.png",
	top : "10%",
	width : "70%",
	left : "15%",
	imageFillType: SMF.UI.ImageFillType.NORMAL,
 	positionBackgroundImage : "CENTER" 
	});
 
Pages.page1.add(img);

Image Diffrences

Make sure, you selected right image format for both iOS and Android. Please check formats with the "images" folder under your project folder.

After you add this image object (myicon) to the related page, it will look like below for both Android & iOS :

Android                                                    iOS