How Do You Create A Transparent Demo Screen For An Android App

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

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"
android :eek: rientation="vertical" >

</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" >

</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!

Last edited: Aug 23, 2013

Cool guide.

I suggest adding [GUIDE] or [HOW-TO] to the thread title to make it easier to find. I thought it was a question when I clicked on it.

I recommend you draw them 480 X 760 px.

[...]

overlay_activity.xml

                                    [/QUOTE]  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.

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.

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.

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.

Great. Thank you.
The only thing which would be even better now would be using

                                                                  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.

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

Why do you think so?

Shouldn't this work? Correct me if I am wrong.

                                                                  ShowcaseView.ConfigOptions co = new ShowcaseView.ConfigOptions();         co.hideOnClickOutside = true;         sv = ShowcaseView.insertShowcaseView(R.id.buttonBlocked, getActivity(), R.string.showcase_main_title, R.string.showcase_main_message, co);

(Code based on this: https://github.com/Espiandev/Showca...andev/showcaseview/sample/SampleActivity.java)

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.

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.

Ok, that's strange.

Thanks exactly what I was looking for!

Sent from my Galaxy Nexus using Tapatalk 4 Beta

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.

I got it to work.

I will push my code to Github later, but I will improve it before.
Then I will write a tutorial for that.

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.

I think you should also disable smiles in the OP!

android :eek: rientation=„blahblahblah" is android(smile)rientation!

great tut.

thanks

I think you should also disable smiles in the OP!
androidrientation=„blahblahblah" is android(smile)rientation!

I always use another trick:

                                android:[B[I][/I]][/B[I][/I]]orientation

The result:

                                android:[B][/B]orientation

That allows you to use smileys in other parts of the post.

I always use another trick:

                                    android:[B[I][/I]][/B[I][/I]]orientation

The result:

                                    android:[B][/B]orientation

That allows you to use smileys in other parts of the post.

Thank you! didn't know about this one!

Sent from my Galaxy Nexus using XDA Premium 4 mobile app

Similar threads