How do I create the semi-transparent grey tutorial overlay in Android?

Question

You know when you run an Android device for the first time (something you see a lot if you use the emulator) that there's a helpful little tutorial about how to use the launcher and add widgets, etc. I'm trying to find an example of this on Google, but I can't. I'm hoping you know what I mean. It's the one with the blue "okay" buttons at each step.

Anyway, I want to create one for my app, but I'm not sure which is the best way to go about doing it.

Do I create a Fragment that I can make semi-transparent on top of my regular activity and have it show up on only the first run?

Do I make a semi-transparent .png for each section of the tutorial and overlay it over the regular launcher activity on the first run?

If I do the latter, how can I adjust for all the various screen sizes? I could just render the image in Photoshop to various dimensions, but that won't cover all of them. If I go the fragment route, I can just say "match_parent" and not worry about it. But then I have to figure out how Fragments work, and they confuse the hell out of me.

Answer 1

I think this open-source library is exactly what you're looking for:

Showcase View

You can grab the source code and setup instructions from GitHub.

Answer 2

Use a hexadecimal color code, which consists of two digits for alpha and six for the color itself, like this:

android:background="#22FFFFFF" 

It'll make it semi-transparent.

android:background="#c0000000" for more darkness 

Edited

Generally hexadecimak color code structure is like '#FFFF'

For attaining transparency add two digits after '#' to any color code.

Eg : #110000, #220000, #330000.

The greater those two digits, the lesser transparency.