Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Display overlay tooltip on the first run

When run for the first time (or after some major update), some Google apps or the core Android system itself sometimes display a transparent overlay with a short tooltip how to use the new features. An example might be the image bellow.

Is there some API in the Android framework for creating these or is it all custom made? How would one implement it in latter case? And last, but not least, do these tooltips have some kind of an official/technical name by which one can refer to them (might be useful when Googling for some info about the subject)? Thanks.

Edit

I've acquired a screenshot which illustrates more precisely what I mean. Apart from the "pointing hand" graphic, this tooltip features a highlighting circle around the icon of the Clock app. This is not simply a translucent overlay which disappears after click: The Clock icon can be clicked or even long-pressed at this moment, but other icons (outside the circle) are not accessible until the toolip disappears. Is all this behaviour custom made specifically for this purpose, or does some in-built facility exist?

enter image description here

like image 792
Natix Avatar asked Aug 22 '13 18:08

Natix


2 Answers

It is just a translucent Dialog.

insert the below code in themes.xml in res folder

 <style name="Theme.TranparentDialog" parent="@android:style/Theme.NoTitleBar">
        <item name="android:colorBackgroundCacheHint">@null</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:colorForeground">@color/transparent</item>
        <item name="android:windowIsFloating">false</item>
        <item name="android:backgroundDimEnabled">false</item>
        <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>
        <item name="android:windowBackground">@color/transparent</item>
    </style>

create the dialog over screen to get a translucent effect/

Dialog dialog= new Dialog(context,  R.style.Theme_TutorialDialog);

dialog.show();

like image 180
bhkiran Avatar answered Oct 15 '22 19:10

bhkiran


I think that's using the ShowcaseView Library. See this related question

like image 38
Tim Rae Avatar answered Oct 15 '22 17:10

Tim Rae