image

The image type can be used to creat an image layer. The provided value serves as the source of the image.

Field Configurations

Key	Type	Description	Default Value
"additionalHeaders"	AdditionalHeaders	Additional headers for the image requests. Will be ignored on assets and internal images.	null
"fallbackImage"	String	The URL to the fallback image if no url or asset is provided.	null
"filter"	ImageFilter	Filters to apply to the image. Filter negative is the only one available at the moment.	null
"imageCruncher"	ImageCruncher	The image cruncher configuration.	null
"placeholder"	String	If set, this image will be shown until the actual image is loaded. This must be an internal image or asset!	null
"placeholderFadeInDuration"	Number	Duration for a fade in from the placeholder image to the actual image in milliseconds.	0
"placeholderTint"	String	Tint for the placeholder image.	null
"preload"	Boolean	If preload is set to true, the image will still be downloaded, even when the image layer is hidden.	false
"scaleType"	ScaleType	The scale type to apply to the image.	"scaleAspectFit"
"tint"	Color	Tint for unicode characters to apply color and transparency.	null
"value"	Value	The URL to the image. For asset images use asset://. For internal images use internal://.	null

Inherited

From Base Layer

Base Layer

Field Configurations

Key	Type	Description	Default Value
"_value"	Value	[PREVIEW] Dynamic value of the layer.	null
"actions"	ActionList	List of actions, which will be executed when the layer is tapped.	null
"borderColor"	Color	The color of the border in hex color value.	null
"borderRadius"	UnitSize	The radius applies to all corners; with a borderWidth of 0 the border is not drawn and radius is set anyway.	0
"borderWidth"	UnitSize	The width of the border.	0
"bottomLeftRadius"	UnitSize	Radius for the bottom left corner.	0
"bottomRightRadius"	UnitSize	Radius for the bottom right corner.	0
"classes"	Array	List of classes for layer styles.	null
"conditions"	Conditions	List of conditions to alter the layer state.	null
"constraints"	Constraints	A list of constraints defining the position of the layer in a layout.	null
"consumesKeyboard"	Boolean	This layer will be used to shrink, if a keyboard is shown.	null
"dataKey"	String	Name for assigning data to this layer.	null
"hidden"	Boolean	Indicates whether the layer is hidden. Default: false.	false
"layerRotation"	Number	The layer is rotated by the specified degree.	0
"name"	String	Unique name in the layout. Used for alignment or actions.	null
"opacity"	Number	The opacity of the layer.	1
"overInsetBottom"	Boolean	Determines if this layer ignores the save space at the bottom of the device.	false
"overInsetTop"	Boolean	Determines if this layer ignores the save space at the top of the device.	false
"safeArea"	SafeAreaTypeObject	Determines the safe area behaviour.	null
"shadowElevation"	Number	The elevation of this layer for casting shadows.	0
"state"	String	The state the layer will use as default.	"default"
"states"	LayerStates	A list of named states that affect the appearance of the layer.	null
"topLeftRadius"	UnitSize	Radius for the top left corner.	0
"topRightRadius"	UnitSize	Radius for the top right corner.	0
"touchFeedback"	TouchFeedback	Determines if the layer should show a touch feedback if touched.	"visible"
"trackingKey"	String	Defines a key for a scroll event.	null
"type"	LayerType	The type of the layer	null
"value"	Value	(Initial) value of the layer.	null

Examples

Example 1: Create an image layer using an asset or loading a hosted image

Goal: Create an image layer that displays a picture either provided as an asset or loaded from the web.

To achieve this the following code can be used:

{
  "type": "image",
  "value": "asset://sample.jpg",
  "scaleType": "scaleAspectFit",
  "classes": [
    "fullSize"
  ]
}

To keep the amount of data to a minimum, the ImageCruncher is used for images loaded from the web.

{
  "type": "image",
  "value": "https://res.appframework.de/projects/imagecruncher/sample.jpg",
  "scaleType": "scaleAspectFit",
  "imageCruncher": {
    "prefix": "https://ic.api.mobilitysuite.de/aspect/large/"
  },
  "placeholder": "internal://placeholder",
  "placeholderTint": "#999999",
  "placeholderFadeInDuration": 250,
  "classes": [
    "fullSize"
  ]
}

The value can also link to a hosted image, when not using assets.

Result:

An image layer has been created.

Example 2: Create an image layer using an internal image

Goal: Create an image layer that displays internal images provided by the system.

The internal images are frequently used icons.

{
  "type": "image",
  "value": "internal://volume-up",
  "tint": "#34A7C9",
  "classes": [
    "fullSize"
  ]
}

While the appearance of the internal images might change depending on the operating system, their color can be adjusted using the tint field.

Result:

An image layer displaying an internal image has been created.

List of available internal images

• internal://alarm
• internal://appicon
• internal://back
• internal://bookmark
• internal://bookmark-active
• internal://calendar
• internal://call
• internal://chat
• internal://check
• internal://close
• internal://copy
• internal://email
• internal://error
• internal://erroricon
• internal://favorite
• internal://favorite-active
• internal://filter
• internal://forward
• internal://go-forward
• internal://home
• internal://location-disabled
• internal://location-enabled
• internal://menu
• internal://mic
• internal://mic-mute
• internal://mute
• internal://navigation
• internal://next
• internal://noconnectionicon
• internal://pause
• internal://placeholder
• internal://play
• internal://previous
• internal://profile
• internal://remove
• internal://rewind
• internal://save
• internal://scan
• internal://search
• internal://send
• internal://settings
• internal://share
• internal://stop
• internal://sync
• internal://syncanimated
• internal://thumbsdown
• internal://thumbsup
• internal://volume
• internal://volume-down
• internal://volume-up
• internal://warning
• internal://zoom-plus