Custom Spotlight Extension
Release Date: 2021-03-31T22:00:00Z Last Update Date: 2021-03-31T22:00:00Z Current Update: 1.1Required Permissions: None ( it would require the READ_EXTERNAL_STORAGE when reading a custom typeface from the external storage )Used Libraries: A customized version from the Spotlight-3 by matrixxun and TakuSemba
This extension creates a spotlight on visible components, or on a specific coordinate on the screen. You can customize the title, description and mask properties or use your custom layout. This extension can be useful to create a tutorial when the user enters your app for the first time, to point out to the primary functions and their usage.
Ended
Called when a spotlight ends.
Type Name Description String id the spotlight's id
Started
Called when a spotlight starts.
Type Name Description String id the spotlight's id
Error
Called when an error occurs, if you don't handle this event, the error would be dispatched to app's UI.
Type Name Description String error the full error message
Target Closed
Called when a target is closed, either by user or programmatically.
Type Name Description String error the id of the target, uses the spotlight id when using one of the blocks that shows a single spotlight
Dismiss Spotlight
Dismisses the whole currently shown spotlight.
Dismiss Target
Dismisses the currently shown target.
Show Custom Spotlight
Shows a spotlight using a custom layout.
Type Name Description Component component the component to show the spotlight on, can be any visible component, or a FloatingActionButton Number duration the duration that the spotlight show take to show or hide, in melliseconds Number radius the spotlight circle radius Componet spotlightLayout the layout used for the spotlight Number layoutY tthe y position of the layout, in pixels Number layoutX the X position of the layout, in pixels String id a unique id for the spotlight, used when calling the Started and Ended events
Show Custom Spotlights At Point
Shows a spotlight at a specific coordinate using a custom layout.
Type Name Description Number x the x coordinate to show the spotlight at, in pixels Number y the y coordinate to show the spotlight at, in pixels Number duration the duration that the spotlight show take to show or hide, in melliseconds Number radius the spotlight circle radius Componet spotlightLayout the layout used for the spotlight Number layoutY the y position of the layout, in pixels Number layoutX the X position of the layout, in pixels String id a unique id for the spotlight, used when calling the Started and Ended events
Show Multiple Custom Spotlights
Shows multiple spotlight using a custom layout.
Type Name Description List components ta list of components to show the spotlights on Number duration the duration that the spotlight show take to show or hide, in melliseconds List radii a list of the spotlights' circle radii List spotlightLayouts a list of layouts used for the spotlight List layoutYPositions a list of the y positions of the layout, in pixels List layoutXPositions a list of the x positions of the layout, in pixels String id a unique id for the spotlight, used when calling the Started and Ended events List targetIds the ids of the targerts, used when calling TargetClosed event
Show Multiple Custom Spotlights At Positions
Shows multiple spotlight using a custom layout at a specific coordinate.
Type Name Description List xPositions a list of x coordinate to show the spotlight at, in pixels List yPositions a list of y coordinate to show the spotlight at, in pixels Number duration the duration that the spotlight show take to show or hide, in melliseconds List radii a list of the spotlights' circle radii List spotlightLayouts a list of layouts used for the spotlight List layoutYPositions a list of the y positions of the layout, in pixels List layoutXPositions a list of the x positions of the layout, in pixels String id a unique id for the spotlight, used when calling the Started and Ended events List targetIds the ids of the targerts, used when calling TargetClosed event
Show Multiple Spotlights
Shows multiple spotlights on the components given.
Type Name Description Component component the component to show the spotlight on, can be any visible component, or a FloatingActionButton List titles a list of the spotlights' titles, supports HTML text List descriptions a list of the spotlights' descriptions, supports HTML text Number duration the duration that the spotlight show take to show or hide, in melliseconds List radii the spotlight circle radius String id a unique id for the spotlight, used when calling the Started and Ended events List targetIds the ids of the targerts, used when calling TargetClosed event
Show Multiple Spotlights At Positions
Shows multiple spotlights on a specific coordinates.
Type Name Description List xPositions ta list of x coordinate to show the spotlight at, in pixels List yPositions ta list of y coordinate to show the spotlight at, in pixels List titles a list of the spotlights' titles, supports HTML text List descriptions a list of the spotlights' descriptions, supports HTML text Number duration the duration that the spotlight show take to show or hide, in melliseconds List radii the spotlight circle radius String id a unique id for the spotlight, used when calling the Started and Ended events List targetIds the ids of the targerts, used when calling TargetClosed event
Show Spotlight
Shows a spotlight on the given component.
Type Name Description Component component the component to show the spotlight on, can be any visible component, or a FloatingActionButton String title the spotlight's titles, supports HTML text String description the spotlight's descriptions, supports HTML text Number duration the duration that the spotlight show take to show or hide, in melliseconds List radii the spotlight circle radius String id a unique id for the spotlight, used when calling the Started and Ended events
Show Spotlight At Point
Shows a spotlight at a specific coordinate.
Type Name Description Number x the x coordinate to show the spotlight at, in pixels Number y the y coordinate to show the spotlight at, in pixels String title the spotlight's titles, supports HTML text String description the spotlight's descriptions, supports HTML text Number duration the duration that the spotlight show take to show or hide, in melliseconds List radii the spotlight circle radius String id a unique id for the spotlight, used when calling the Started and Ended events
This is a very simple example blocks that demonstrates how to use this extension, you will find the AIA attached in the Downloads section
This extension and the code of the customized library are open source:
An extension to show a spotlight on the given point, or component, you can use this extension to explain the usage of your app's primary functions.
Android Library that lights items for tutorials or walk-throughs etc...
AIX: io.mohamed.CustomSpotlight.aix (62.0 KB)AIA (AppInventor): spotlight.aia (100.5 KB)
Thanks for @themaayur for suggesting the extension's idea, and for testing the extension.
