App Designer - Images

Tweet Like

AppDImages-Startes

App Designer is drag-and drop tool for developing application user interfaces with rows and columns as the basic design structure. Various elements such as buttons, input fields, text areas, and even images can be dragged into a column that sits in a row. Initially, images are required to be stored in your project’s directory before being in available for use in your application.

AppDimage-button

Adding an icon to a Button

  1. Drag the “Button” element under the “Form” section to the layout
  2. Check the “icon” checkbox to select an icon from the adjacent dropdown list
  3. Click on the “Icon Position” dropdown list to select the desired position for the icon

AppDimage-gbtn

Adding an image to a Graphic Button

  1. Drag the “Graphic Button” element under the “Form” section to the layout
  2. Check the “Image src” checkbox to access the available images in the adjacent dropdown list

Notes: Styles can also be created for the button for attributes such as Show-hide, Sizing, Default, Active, Hover, Text, and Margins.

AppDimage-sbtn

Adding images to a Sprite image

  1. Drag the “Sprite Button” element under the “Form” section to the layout
  2. Edit the available “Active Styles”
    1. “Default-Sprite-Button” contains a list of selectable images related to your project that can be viewed by default and position
    2. “Hover-Sprite-Button” contains a list of selectable images related to your project that can be viewed on mouse-hover and position
    3. “Sprite-Sizing” modifies the entire width and height of the button

Note: A Sprite Button can have two separate images or one image at different perspectives displayed by default and on hover.

AppDimage-dftimg

Adding an image to the application’s layout

  1. Drag the “IMG” element under the Media section to the Layout
  2. Select an image file in the “Src” dropdown list to be viewed
  3. Check the “Caption” checkbox to insert text adjacent to the image
    1. The “Caption Position” contains the location placement for the caption

For instance, if padding is needed for added space between the image and caption, a NEW “Padding” style can be added to the element.

AppDimage-bkimg

Adding an image as a background image

  1. Drag a Column” element under the Layout section to the design layout
  2. Click the “Background” style then New to create a new style
  3. Check the “Background image” checkbox to select an image from the list

Get started with the Intel XDK


Download Now