User Interface

User Interface (UI) refers to the visual and interactive elements of a digital system or application that enable users to interact with and control it.

About the component


Image Description
  •  Last Update 25 Oct, 2023
  •  Component Version : 2.0.0
  •  API 21, Android 5.0 Lollipop
  •  14 Blocks Available

Spotlight Component

This component provides functionality to create spotlight effects to highlight specific views or coordinates on the screen. It supports customizable shapes, sizes, text, and animations.

Overview

A non-visible component that brings emphasis to the specified component by means of darkening the screen around that component.

Events

Image Description
Events

Ended(String id)

  • Called when a spotlight ends.

    • # Name Type(s) Default Value
    1 id Integer -
    Image Description
    Events

    Error(String error)

  • Called when an error occurs.

    • # Name Type(s) Default Value
    1 error text -
    Image Description
    Events

    Started(String id)

  • Called when a spotlight starts.

    • Image Description
    Events

    Target Closed(String targetId)

  • Called when a target is closed.

    • Methods

    Image Description
    Methods

    Dismiss

  • Dismisses the whole currently shown spotlight.

    • Image Description
    Methods

    Dismiss Target

  • Dismisses the currently shown target.

    • Image Description
    Methods

    Show

  • Shows a spotlight on the given component. component: The component to show the spotlight on. title: The spotlight title, can be HTML text. description: The spotlight description, can be HTML text. duration: The duration that the spotlight takes to show or hide, in milliseconds. radius: The spotlight circle radius. id: A unique id for the spotlight.

    • # Name Type(s) Default Value
    1 component view -
    2 title text -
    3 description text -
    4 duration Integer -
    5 radius Integer -
    6 id Integer -
    Image Description
    Methods

    Show At Point

  • Shows a spotlight at a specific coordinate. x: The x coordinate to show the spotlight at, in pixels. y: The y coordinate to show the spotlight at, in pixels. title: The spotlight title, can be HTML text. description: The spotlight description, can be HTML text. duration: The duration that the spotlight takes to show or hide, in milliseconds. radius: The spotlight circle radius. id: A unique id for the spotlight.

    • # Name Type(s) Default Value
    1 x Integer -
    2 y Integer -
    3 title text -
    4 description text -
    5 duration Integer -
    6 radius Integer -
    7 id Integer -
    Image Description
    Methods

    Show Custom

  • Shows a spotlight using a custom layout. component: The component to show the spotlight on. duration: The duration that the spotlight takes to show or hide, in milliseconds. radius: The spotlight circle radius. spotlightLayout: The layout used for the spotlight. layoutY: The y position of the layout, in pixels. layoutX: The x position of the layout, in pixels. id: A unique id for the spotlight.

    • # Name Type(s) Default Value
    1 component view -
    2 duration Integer -
    3 radius Integer -
    4 spotlightLayout view -
    5 layoutY view -
    6 layoutX view -
    7 id Integer -
    Image Description
    Methods

    Show Custom At Point

  • Shows a spotlight at a specific coordinate using a custom layout. x: The x coordinate to show the spotlight at, in pixels. y: The y coordinate to show the spotlight at, in pixels. duration: The duration that the spotlight takes to show or hide, in milliseconds. radius: The spotlight circle radius. spotlightLayout: The layout used for the spotlight. layoutY: The y position of the layout, in pixels. layoutX: The x position of the layout, in pixels. id: A unique id for the spotlight.

    • # Name Type(s) Default Value
    1 x Integer -
    2 y Integer -
    3 duration Integer -
    4 radius Integer -
    5 SpotlightLayout view -
    6 layoutX view -
    7 layoutY view -
    8 id Integer -
    Image Description
    Methods

    Show Multiple

  • Shows multiple spotlights on the components given. components: A list of components to show the spotlights on. titles: A list of the spotlights' titles, supports HTML text. descriptions: A list of the spotlights' descriptions, supports HTML text. duration: The duration that the spotlight takes to show or hide, in milliseconds. radii: A list of the spotlights' circle radii. targetIds: The ids of the targets. id: A unique id for the spotlight.

    • # Name Type(s) Default Value
    1 components view -
    2 titles text -
    3 description text -
    4 duration Integer -
    5 radius Integer -
    6 targetIds Integer -
    7 id Integer -
    Image Description
    Methods

    Show Multiple At Positions

  • Shows multiple spotlights at specific coordinates. xPositions: A list of x coordinates to show the spotlight at, in pixels. yPositions: A list of y coordinates to show the spotlight at, in pixels. titles: A list of the spotlights' titles, supports HTML text. descriptions: A list of the spotlights' descriptions, supports HTML text. duration: The duration that the spotlight takes to show or hide, in milliseconds. radii: A list of the spotlights' circle radii. targetIds: The ids of the targets. id: A unique id for the spotlight.

    • # Name Type(s) Default Value
    1 xPositions Integer -
    2 yPositions Integer -
    3 titles text -
    4 descriptions text -
    5 durations Integer -
    6 radius Integer -
    7 targetIds Integer -
    8 id Integer -
    Image Description
    Methods

    Show Multiple Custom

  • Shows multiple spotlights using a custom layout. components: A list of components to show the spotlights on. duration: The duration that the spotlight takes to show or hide, in milliseconds. radii: A list of the spotlights' circle radii. spotlightLayouts: A list of layouts used for the spotlight. layoutYPositions: A list y positions of the layout, in pixels. layoutXPositions: A list y positions of the layout, in pixels. targetIds: the ids of the targerts, used when calling TargetClosed event. id: A unique id for the spotlight.

    • # Name Type(s) Default Value
    1 component view -
    2 duration Integer -
    3 radius Integer -
    4 spotlightLayout view -
    5 LayoutYPosition Integer -
    6 LayoutXPosition Integer -
    7 id Integer -
    8 targetIds Integer -
    Image Description
    Methods

    Show Multiple Custom At Positions

  • Shows multiple spotlight using a custom layout. xPositions: A list of x coordinates to show the spotlight at, in pixels. yPositions: A list of y coordinates to show the spotlight at, in pixels. duration: The duration that the spotlight takes to show or hide, in milliseconds. radii: A list of the spotlights' circle radii. spotlightLayouts: A list of layouts used for the spotlight. layoutYPositions: A list y positions of the layout, in pixels. layoutXPositions: A list y positions of the layout, in pixels. targetIds: the ids of the targerts, used when calling TargetClosed event. id: A unique id for the spotlight.

    • # Name Type(s) Default Value
    1 xPositions Integer -
    2 yPositions Integer -
    3 duration Integer -
    4 radius Integer -
    5 spotlightLayouts view -
    6 LayoutYPositions Integer -
    7 LayoutXPositions Integer -
    8 id Integer -
    9 targetIds Integer -