Image View

Image View

Download PDF

Image View

ImageView is one of the UI widget that is used to display images in your Application. Displays an arbitrary image, such as an icon. The ImageView class can load images from various sources (such as resources or content providers), takes care of computing its measurement from the image so that it can be used in any layout manager, and provides various display options such as scaling and tinting.


Image View acts as a view based container. Configure.IT brings you this Native control with spectacular features. Choose from the distinct functionality from Static Image or Dynamic Image. Give that spotless and splendid air [distinctive quality] to the users and generate the magnificent design.

    Keywords:
  • image viewer
  • image view controller
  • imageview in android
  • imageview in iOS

Properties

  • Display
    PARAMETER
    DESCRIPTION
    Image Shape

    Select Image shape from the various options available to display, from the drop down.

    Content Mode

    Provides layout behavior for the view's content, and also affects how the content is scaled to fit the view and whether it is cached or redrawn.

    Highlighted

    A Boolean value to indicate whether the receiver should be highlighted.

    User Interaction Enabled

    Enables the Interaction with user, i.e. control responds when user taps on it.

    Alpha

    Used to set the transparency to the object which ranges from 0 to 1.

    Background Color

    Used to set the background color to the Image View.

    Image

    Sets the image to the Image View in default state. Select the image from the Assets list uploaded by you.

    Scale Type

    Lets you position the image in the view without performing scaling. This can easily be managed by simply selecting the desired type from the drop down.

  • CIT Custom Properties
    PARAMETER
    DESCRIPTION
    Enable Image Detailing

    Enable and enlarge the feature for Image View when it is tapped once by user. i.e, if this property is enabled, on tapping; image will be enlarged to the maximum possible size in black background.

    Key Name To Detail Image

    Sets the web service key from data received from web server, which corresponds to the image to be displayed in Image View in fullscreen mode i.e, when "Enable Image Detailing" property is enabled and user taps on image view.

    Key Name To Image Description

    Sets the web service key from data received from web server, which corresponds to the value to be set as caption for image view in fullscreen mode i.e, when "Enable Image Detailing" property is enabled.

    Caption View Id

    Sets the "Object ID" of view that has to be shown as caption view for image on Photo Gallery Detail cell in fullscreen mode i.e, when "Enable Image Detailing" property is enabled.

    Local Image Folder Name

    Sets the image path if image is already downloaded. e.g /Documents/Profile Images/

    Place Holder Image

    Sets dummy image to display while image data is being received from web server.

  • Custom Border
    PARAMETER
    DESCRIPTION
    Border Width

    Sets border width for Image View.

    Border Corner Radius

    Sets radius with which control's rounded corners should be drawn. 
    Setting this property will enable control appear with rounded corners.

    Border Color

    Sets the border color for a control. Works only if "Border Width" property is set to a value more than 0. Default would be black color.

    Dash Width For Dashed Border

    Sets width of each dash in dashed border pattern for a Image View.

    Space Between Dashes For Dashed Border

    Helps set the spacing between Dashes for Dashed Border.

    Transform Angle

    Sets angle in degrees to which the ImageView which is in its normal state, has to be rotated. Possible values for this property are ­360 to 360.

  • Object
    PARAMETER
    DESCRIPTION
    Xpos

    Sets the X position of the Image View.

    YPos

    Sets the Y position of the Image View.

    Width

    Sets the width of the Image View.

    Height

    Sets the height of the ImageView.

    Object ID

    Sets unique identifier for the control. Control can be referenced with name set in this property for configuration.

    Object Parent ID

    Set "Object ID" of Image View which contains this control or can serve as parent.

    Key Name To Data

    Sets the web service key from data received from web server, which corresponds to the value to be displayed in the control.

  • Horizontal
    PARAMETER
    DESCRIPTION
    Horizontal Group

    Group of horizontal android default properties.

    Reference Type

    Reference type is the the default property to set selected view with respect to other view.

    Reference Value

    Reference object that is used for positioning selected object.

    Offset Type

    marginLeft : Specifies extra space on the left side of this view. This space is outside this view's bounds.
    marginRight : Specifies extra space on the right side of this view. This space is outside this view's bounds.

    Offset Value

    Offset Value defines the extra space value in the pixel.

    Center Horizontal

    This property centers the child horizontally with respect to the bounds of its parent view.

    Apply Horizontal Custom Properties

    If any of the horizontal layout setting parameter(s) are selected then this value is selected to indicate user applied horizontal custom layout setting parameter(s).

  • Vertical
    PARAMETER
    DESCRIPTION
    Vertical Group

    Group of vertical android default properties.

    Reference Type

    These are the android default properties to set selected view with respect of other view.

    Reference Value

    Reference object that is used for positioning selected object

    Offset Type

    marginTop : Specifies extra space on the top side of this view. This space is outside this view's bounds.
    marginBottom : Specifies extra space on the bottom side of this view. This space is outside this view's bounds.

    Offset Value

    Value define the extra space value in pixel.

    Center Vertical

    This property centers the child vertically with respect to the bounds of its parent view.

    Apply Vertical Custom Properties

    If any of the vertical layout setting parameter(s) are selected then this value is selected to indicate user applied vertical custom layout setting parameter(s)

  • Layout Setting
    PARAMETER
    DESCRIPTION
    Horizontal

    Group of horizontal android default properties.

    Right

    For instance, a Right value of 2 will push the view's content by 2 pixels to the left of the right edge

    Top

    For instance, a Top value of 2 will push the view's content by 2 pixels to the bottom of the top edge

    Bottom

    For instance, a Bottom value of 2 will push the view's content by 2 pixels to the top of the bottom edge

    Apply Custom Properties

    If any of the layout setting parameter(s) are selected then this value is selected to indicate user applied custom layout setting parameter(s)

    Left

    The padding is expressed in pixels for the left, top, right and bottom parts of the view. Padding can be used to offset the content of the view by a specific amount of pixels.
    For instance, a Left value of 2 will push the view's content by 2 pixels to the right of the left edge

    Center In Parent

    This property centers the child vertically with respect to the bounds of its parent view.

    Layout Height

    Sets the height of the view
    match_parent/fill_parent : Takes the height as its parent view
    wrap_content : Takes the height as its content’s height

    Default Min Height

    The height of the view cannot be less than the given value.
    If user select “Default Min Height” then android default value is taken otherwise it takes 0dp.

    Default Min Width

    The width of the view cannot be less than the given value.
    If user select “Default Min Width” then android default value is taken otherwise it takes 0dp.

    Layout Width

    Sets the width of the view
    match_parent/fill_parent : Takes the width as its parent view
    wrap_content : Takes the width as its content’s width

    Vertical

    Group of vertical android default properties.

Actions

  • Single Finger Single Tap

    Fired when Image View is tapped once with a single finger.

  • On Single Finger Long Press

    Fired when there is an elongated press on Image View with single finger.

  • On Single Finger Swipe Down

    Fired when Image View is swiped down with single finger.

  • Sharing Done

    This event is triggered when social media sharing action is completed. Sharing action is initiated using Facebook, Twitter, Google+, LINKED_IN, INSTAGRAM or Open Share Activity(Google+ share) actions. On Sharing success or failure “Sharing Done” event will be triggered, so any actions you want perform on success or failure, can be configured in “Sharing Done” event listed in ”ACTION(S)” tab of the control on which you have configured "Facebook", "Twitter", "Google+", "LINKED_IN", "INSTAGRAM" or "Open Share Activity" actions. “success” is the response parameter of “Sharing Done” which indicates success or failure of sharing action. “success” value would be “1” on successful sharing and “0” on failure, add condition for checking “success” parameter value in order to configure actions for success and failure of sharing separately.

  • On Single Finger Swipe Left

    Fired when Image View is swiped left with single finger.

  • On Single Finger Swipe Right

    Fired when Image View is swiped right with single finger.

  • On Single Finger Swipe Up

    Fired when Image View is swiped up with single finger.

  • Single Finger Double Tap

    Fired when Image View is tapped twice with a single finger.

  • Single Finger Triple Tap

    Fired when Image View is tapped thrice with a single finger.

  • On Double Finger Long Press

    Fired when there is an elongated press on Image View with two fingers.

  • Image Detail Open

    Will be fire once image detail open.

  • Image Detail Close

    Will call on close of image detail

  • On Double Finger Swipe Down

    Fired when Image View is swiped down with two fingers.

  • On Double Finger Swipe Left

    Fired when Image View is swiped left with two fingers.

  • On Double Finger Swipe Right

    Fired when Image View is swiped right with two fingers.

  • On Double Finger Swipe Up

    Fired when Image View is swiped up with two fingers.

  • On Double Finger Pan

    Fired when Image View is panned (sweeped) with two fingers.

  • Double Finger Double Tap

    Fired when Image View is tapped twice with two fingers.

  • Double Finger Single Tap

    Fired when Image View is tapped once with two fingers.

  • Double Finger Triple Tap

    Fired when Image View is tapped thrice with two fingers.

Remarks

  • Pre­loaded images in the form of PSD kit

    You can set/select an image for Image View from pre­loaded images of PSD kit. This was generated while uploading PSD file in order to create application/screen.

  • Static Image / Dynamic Image

    If you want to show a static image on Image View, then set “Image” property to an image from your application’s assets library.
    Whereas if you want to display an image from API, then set “Key Name To Data” property to an API key that returns an image URL.

  • Place Holder Image

    An image placeholder is a dummy image to draw attention to the need for an actual image. You can set a placeholder image in “Place Holder Image” property, which will be displayed to the user while image data is being received from web server.

  • Splash screen image

    You can display an image as your application’s splash screen. You can configure this in MISCELLANEOUS SETTINGS >> Splash Screen >> Select “Image” from “Splash Screen Type” dropdown >> Enter name of the image from your application Asset Manager in “Splash Screen Source” field.

  • Masked Image

    To replicate this behaviour, you would be required to take 2 different images. One would be main image and second would be top masked image with center part having No alpha value and other part having some alpha value.
    Display it like ­ one on top of the other. 
    Click on the link to view a sample masked image ­ http://i.stack.imgur.com/F8z4n.png