Material Spotlight | Show case extension based on Google Material Guidelines

Material Spotlight

A simple extension to show a material spotlight for your components.



Show spotlight for a single component


Dismiss Spotlight

add item to sequence

Create a sequence of spotlight components. In order to show a sequence of spotlights, use this block to add all the components. Find details on how to use this block in sample aia provided below.

start sequence

Start spotlight sequence

cancel sequence

Cancel spotlight sequence

clear sequence

Clear sequence. Use this block to clear out previous components that were added using AddItemToSequence block. Use this block when you want to create a new sequence.

on click

Event raised when a component is clicked

on cancel

Event raised when spotlight is cancelled

on dismiss

Event raised when spotlight is dismissed.

on sequence step

Event raised when sequence proceeds.

on sequence cancelled

Event raised when sequence is cancelled.

on sequence finsidhed

Event raised when sequence is finished

outer circle color

Outer circle color

outer circle opacity

Opacity of outer circle. Use a value between 0 and 1

targte circle color

Color of circle that is shown around the target

title color

Title text color

description color

Description text color

description font

Custom font for description

title font

Custom font for title

title size

Title font size

description size

Description font size

transparent targte

Whether to show content below the spotlight or not

tint target

Whether to tint target or not

dim color

Dim color

draw shadow

Whether to draw shadow or not

target radius

Target radius

dim opacity

Description opacity


Whether to dismiss spotlight when user clicks outside of spotlight or not



Aix File : com.dreamers.materialspotlight.aix (40.5 KB)
Aia File :spotlight.aia (104.4 KB)

Special Thanks

Thanks to kodular for Androidx Support
And a huge thanks to @Shreyash for Rush

I,Zain Ul Hassan attest that I am the author of the free extensions listed below and grant that MIT has a non-exclusive irrevocable license to republish these extensions as part of the project file for the purposes of MIT App Inventor Appathon 2021.


Good extension :+1:

Great extension! I’m gonna use it for my next app. Thanks!

awesome extension :heart_eyes: @zainulhassan

Good extension, but don’t know who has given thumb down… hmmm. This is great… take heart from my side… :heart:

@zainulhassan Great! Keep it up buddy :+1:

@zainulhassan This is a great extension, I’m going to implement it in my app!

However, I found a small bug that is quite annoying:
If a spotlight is displayed on Card View and within it some component, then in the spotlight the component will be displayed above the Card View.
In my case, all the Padding of the Card View is set to 0 and the radius of its corners is set to a number that is not 0 (20) and within it an Arrangement whose width and height are set to fill.
I made aia for example: BUG.aia (42.5 KB)

Without spotlight:
IMAGE 2021-07-28 18:39:22
With spotlight:

1 Like

Shows when the app is open, only when the user first opens the app, this spotlight should appear, not after that. Some solution to this @zainulhassan @Still-learning

this is not something to be solved by extension developer + this can be easily done with tiny db

1 Like

Will try it, but, I have any mistake

No need to tag people… where are you using the 2nd procedure block?..


show screen initialize also

1 Like

Yes it did

put in screen initialize

i meant show it

1 Like

Tried this way, it worked