[GUIDE] Create Transparent Demo pages on Android

Have you seen those apps with the really cool hand drawn arrows that show the users how the app works the first time they run it? Yeah I have too and I wanted to figure out how to do that. So I did. Now I'm going to show you also.

This is going to be pretty easy and we'll do it for Activities and Fragments so all your apps will be covered.

The first thing you'll need to do is draw the pictures that we'll place over the Activity/Fragment. I draw mine on Gimp but you can use whatever drawing tool you want. I recommend you draw them 480 X 760 px. You'll want to set your background as Transparent. Here is a sample of what I've done.

That's easy enough. I recommend you draw these as you go, I've found that I needed to edit the images to make sure they are pointing to the exact right place on the screen.

Next up we'll create an XML layout for each image that you want to use in your app. We'll create a LinearLayout with an embedded ImageView. The ImageView will display our beautiful art from above. Make sure to give the LinearLayout an ID, set the background to @null. As for the ImageView you'll need to give it an ID also and set the source to the image file you drew previously. Be sure to put the image in the res/drawable folder, make sure the image file name is all lower case and it is a .png file type. Again you will need to create as many of these XML layouts as you did images above.

We are going to control when this is displayed to the user with SharedPreferences. Utilizing SharePreferences gives us the ability to show the tutorial on the first run of the app and also allows the user to see it again by selecting it in the apps Settings menu.

We'll need to create a folder under /res/ named /xml, so you'll end up with /res/xml. Now let's create a new XML layout for our preferences. In Eclipse you'll choose File New > Android XML file. Change the Resource Type to Preference, then name the file exactly this prefs.xml and click Finish.

Next we'll add a CheckBoxPreference with the following attributes:
android:defaultValue="true"
android:key="tutorial"
android:summary="Enable tutorial on device"
android:title="Tutorial"
So your final prefs.xml file will look exactly like this:

Now let's look at how to show this to the user from our Activity or Fragment. First we'll determine if our tutorial CheckBoxPreferene is set to true and if so we'll display the drawing on top of the current Activity/Fragment.

Create and instance of SharedPreferences and a boolean to store the value:
SharedPreferences setNoti;
boolean showTut;

Then in our OnCreate we'll get the value for our tutorial CheckBoxPreference and if ti's true we'll overlay the image onto our Activity/Fragment:

Now for the last part we'll create the method to display the overlay. We will create a Dialog and apply a translucent theme with no title bar, this provides a dialog that covers our activity but doesn't hide our notification bar.

We'll use a method like this whereever we want to display the overlay to our users. When we get to the last overlay it is best to change the value in our SharedPreferences so we don't continue showing the overlays to the user. We do that with this variation on our above method where in the onClick we update the SharePreferences to set our tutorial to false.

And there you have it! As I mentioned at the begging of this post, this can be applied to an Activity or a Fragment. You'll notice in the last method instead of using the context of "this" I'm using the context of "getActivity()", that is the only change you have to make for this to work with a Fragment.

I am publishing the full code on my GitHub. Please feel free to leave comments, questions or your own pointers below.

Great. Thank you.
The only thing which would be even better now would be using [CODE] tags.

I didn't do much with it. However, scaling SVGs looks much better because they consist of single lines and shapes which can be rendered for all densities.
The disadvantage is that it is more difficult to create good-looking graphic effects in SVG.

XDA Developers was founded by developers, for developers. It is now a valuable resource for people who want to make the most of their mobile devices, from customizing the look and feel to adding new functionality.Are you a developer?