Control: IMAGE

What you will learn in this chapter
IMAGE control Attributes, Data Sources , Image Scaling
Reference Tutorial: Basic UI controls - Text, Buttons, Image
Reference: appearance, Data Sourcing

IMAGE control is used to display any image. Image is displayed using the following attributes. By default, the images will be displayed in their actual size in pixels. In order to scale according to the screen sizes, scale_type attribute is used. When scaling is used keep in mind that the image quality will vary. Learn more about Image scaling.

Android iOS
../_images/image_control.png ../_images/iOS_image_small.png

Attributes

Attributes Description
type IMAGE
x Specifies x position (distance from the left edge of the parent control) of the control. Parent control could be screen as well. It can be expressed in percentage, or pixels (px) or device pixel. By default width in percentage is relative to its parent control. It can be made relative to screen using attribute dimensions_relative_to=”SCREEN” in screen_deck . Learn more about dimensions
y Specifies y position (distance from the left edge of the parent control) of the control. Parent control could be screen as well. It can be expressed in percentage, or pixels (px) or device pixel. By default width in percentage is relative to its parent control. It can be made relative to screen using attribute dimensions_relative_to=”SCREEN” in screen_deck . Learn more about dimensions
width Specifies the width of the control in percentage or pixels (px) or device pixels (dp). By default width in percentage is relative to its parent control. It can be made relative to screen using attribute dimensions_relative_to=”SCREEN” in screen_deck . Learn more about dimensions
height Specifies the height of the control in percentage or pixels (px) or device pixels (dp). By default width in percentage is relative to its parent control. It can be made relative to screen using attribute dimensions_relative_to=”SCREEN” in screen_deck . Learn more about dimensions
appearance_name specifies the background for the image. You can specify the background color, transparency, gradient, border color, border thickness, border radius. The appearance should be defined in appearance.xml
scale_type CENTER, CENTER_CROP, CENTER_INSIDE, FIT_CENTER, FIT_END, FIT_START, FIT_XY
default_value specifies the default image
field_name place holder for dynamic image
local_datasource used to fetch image when data source is local SQLite
remote_database used to fetch image when data source is from remote url
data_type VARCHAR

Data Sources

The data source for an image can be from

  1. Android - yourProject/assets folder, iOS - yourProject/Resources/images folder
  2. From local SQLite
  3. From Remote

Fetch image from Android - assets OR iOS images folders

Example:

<control type="IMAGE" x="16" y="8" width="20" height="30" data_type="VARCHAR"
           appearance_name="white" default_value="IMAGE:bird.png"/>

Note

  • type = “IMAGE”
  • appearance_name specifies the background for the image. In the above example “white” should be defined in appearance.xml
  • default_value = “IMAGE:<name of image>”

Fetch image from local SQLite

(TODO)

Fetch images from Remote

(TODO)

Image Scaling

scale_type Description
“CENTER” Place image in the center, with no scaling
“CENTER_CROP” Crop image in the center. If the image is bigger than the control, crop it from the center. Does not maintain aspect ratio
“CENTER_INSIDE” Image is in the center. Aspect ratio is maintained (Default). When scale_type is not specified, by default the image will be in the center with the aspect ratio maintained
“FIT_CENTER” Image scales to fit at the center of the control. Image aspect ratio is maintained
“FIT_END” Image scales to fit from ending x,y position (right-bottom corner) of the control. Image aspect ratio is maintained
“FIT_START” Image scales to fit from starting x,y position (left-top corner) of the control. Image aspect ratio is maintained
“FIT_XY” Image scales to fill the control. Image aspect ratio is not maintained

Reference tutorial

This chapter uses source code from appemble-tutorial-buttons-imgs. If you have not downloaded tutorial source code, click on Download Source Code - Tutorials

Android - Right click on appemble-tutorial-buttons-imgs and click on Run as Android application.

iOS - Select scheme appemble-tutorial-buttons-imgs and iPhone/iPad x.x simulator. Click on Product -> Run.