33

In many applications, I have seen that there is a welcome screen or tutorial that explains how the application works by overlaying explanations on top of the activity. For instance, in Android itself, the welcome screen with "Make yourself home".

I would like to know what techniques can be used for that.

Edit: screenshot of "make yourself home enter image description here enter image description here

Snicolas
  • 37,840
  • 15
  • 114
  • 173
rds
  • 26,253
  • 19
  • 107
  • 134
  • In suppose this was already asked but searching "overlay image tutorial" leads to tons of irrelevant results. – rds Aug 27 '12 at 19:32
  • Can you post a screenshot of an example? – Squonk Aug 27 '12 at 20:12
  • @Squonk A picture is worth a thousand words – rds Aug 28 '12 at 08:07
  • 1
    That'll be an `Activity` using `@android:style/Theme.Translucent` – Squonk Aug 28 '12 at 23:30
  • @Squonk I think you can write answer instead of that comment. Also, I am a little worried about handling screen size for view that are not on the edges of the screen or that depend on API level (like menu vs action bar) – rds Aug 29 '12 at 22:09
  • Posted as an answer. Sorry, I'm not sure I can help with your screen size problem. Give the 'translucent' theme a try and then post a new question if you have any problems. – Squonk Aug 29 '12 at 23:09

4 Answers4

28

There are now 3 alternatives for displaying some tutorial of an activity :

The first one being the best of the 3.

Snicolas
  • 37,840
  • 15
  • 114
  • 173
15

Is it this one? https://github.com/Espiandev/ShowcaseView

The ShowcaseView (SCV) library is designed to highlight and showcase specific parts of apps to the user with a distinctive and attractive overlay. This library is great for pointing out points of interest for users, gestures, or obscure but useful items...

The library is based on the "Cling" view found in the Launcher on Ice-Cream Sandwich and Jelly Bean...

To use ShowcaseView, use the Builder pattern.

As an example:

new ShowcaseView.Builder(this)
    .setTarget(new ActionViewTarget(this, ActionViewTarget.Type.HOME))
    .setContentTitle("ShowcaseView")
    .setContentText("This is highlighting the Home button")
    .hideOnTouchOutside()
    .build();

You can use styles to customise how a ShowcaseView looks.

gnat
  • 6,213
  • 108
  • 53
  • 73
user1437481
  • 470
  • 1
  • 9
  • 30
  • As the project says, it is called "Cling" in the Android launcher2 project – rds Sep 06 '12 at 23:02
  • 3
    This library does not currently support the new `Toolbar` implementation in `appcompat-v7`. It will crash if you attempt to utilize a `Target` on any item or view located inside the `Toolbar` (ActionBar) – AnxGotta Mar 20 '15 at 14:23
1

From your screen shots that looks like an Activity set to use...

@android:style/Theme.Translucent
Squonk
  • 48,735
  • 19
  • 103
  • 135
0

Sounds like a popup window or a dialog. Both should have a similar effect.

dhaag23
  • 6,106
  • 37
  • 35