[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.

overlay_activity.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/llOverlay_activity"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background= @null"
androidrientation="vertical" >

<ImageView
android:id="@+id/ivOverlayEntertask"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="@drawable/activity_overlay" />

</LinearLayout>

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:

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android" >

<CheckBoxPreference
android:defaultValue="true"
android:key="tutorial"
android:summary="Enable tutorial on device"
android:title="Tutorial" />

</PreferenceScreen>

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:

setNoti = PreferenceManager.getDefaultSharedPreferences(this);
// SharedPref tutorial
showTut = setNoti.getBoolean("tutorial", true);

if (showTut == true) {
showActivityOverlay();
}

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.

private void showActivityOverlay() {
final Dialog dialog = new Dialog(this,
android.R.style.Theme_Translucent_NoTitleBar);

dialog.setContentView(R.layout.overlay_activity);

LinearLayout layout = (LinearLayout) dialog
.findViewById(R.id.llOverlay_activity);
layout.setBackgroundColor(Color.TRANSPARENT);
layout.setOnClickListener(new OnClickListener() {

@override
public void onClick(View arg0) {
dialog.dismiss();

}

});

dialog.show();
}

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.

private void showActivityOverlay() {
final Dialog dialog = new Dialog(getActivity(), android.R.style.Theme_Translucent_NoTitleBar);

dialog.setContentView(R.layout.overlay_activity);

LinearLayout layout = (LinearLayout) dialog
.findViewById(R.id.llOverlay_activity);
layout.setBackgroundColor(Color.TRANSPARENT);
layout.setOnClickListener(new OnClickListener() {

@override
public void onClick(View arg0) {
// Get SharedPrefs
PreferenceManager.setDefaultValues(getActivity(), R.xml.prefs, true);
SharedPreferences setNoti = PreferenceManager
.getDefaultSharedPreferences(getActivity());
setNoti.edit().putBoolean("tutorial", false).commit();
showTut = false;
dialog.dismiss();

}

});

dialog.show();

}

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.

https://github.com/marty331/overlaytutorial

Thanks for reading!

nikwen said:

Where's your code?

Personally, I'd use Inkscape to create them as a *.svg and convert them to a *.png file later. That way they will not look pixelated.

Click to expand...

Click to collapse

Somehow my post was corrupted, I edited it and re-pasted everything.

I haven't tried Inkscape, but am up for giving that a go.

nikwen said:

I just found the Showcaseview library. It looks very promising.

Homepage: http://espiandev.github.io/ShowcaseView/
Github code: https://github.com/Espiandev/ShowcaseView

Click to expand...

Click to collapse

nikwen,
ShowcaseView is really awesome, I agree. However, it does not work with Fragments yet. Super bummer!

I agree that it should, however it does not. I've emailed the developer and he said he will work on it. If you want to use ShowcaseView in an activity it works very well.