Attend XDA's Second Annual Developer Conference, XDA:DevCon 2014!
5,740,807 Members 52,864 Now Online
XDA Developers Android and Mobile Development Forum

[GUIDE] Create Transparent Demo pages on Android

Tip us?
 
marty331
Old
(Last edited by marty331; 23rd August 2013 at 03:20 PM.) Reason: Post was cut off
#1  
marty331's Avatar
Senior Member - OP
Thanks Meter 243
Posts: 781
Join Date: Jun 2011
Location: Dallas, TX
Default [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!
Current Devices:
Phone: Nexus 4
ROMs: CM10.1

Device: Nexus 7
ROM: Stock Rooted
CM10

Previous:

Phone: Infuse SGH-I997
ROMs: Infused 2.2
Serendipity VII
CM7
CM9
CM10

Device: Kindle Fire
ROMs: CM7
ICS/CM9
The Following 12 Users Say Thank You to marty331 For This Useful Post: [ Click to Expand ]
 
out of ideas
Old
#2  
Senior Member
Thanks Meter 31
Posts: 99
Join Date: Nov 2012
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.
The Following User Says Thank You to out of ideas For This Useful Post: [ Click to Expand ]
 
nikwen
Old
#3  
nikwen's Avatar
Recognized Contributor
Thanks Meter 1298
Posts: 2,690
Join Date: Feb 2013
Quote:
Originally Posted by marty331 View Post
I recommend you draw them 480 X 760 px.

[...]

overlay_activity.xml

[CODE]
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.
 
marty331
Old
#4  
marty331's Avatar
Senior Member - OP
Thanks Meter 243
Posts: 781
Join Date: Jun 2011
Location: Dallas, TX
Quote:
Originally Posted by nikwen View Post
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.
Current Devices:
Phone: Nexus 4
ROMs: CM10.1

Device: Nexus 7
ROM: Stock Rooted
CM10

Previous:

Phone: Infuse SGH-I997
ROMs: Infused 2.2
Serendipity VII
CM7
CM9
CM10

Device: Kindle Fire
ROMs: CM7
ICS/CM9
The Following User Says Thank You to marty331 For This Useful Post: [ Click to Expand ]
 
nikwen
Old
#5  
nikwen's Avatar
Recognized Contributor
Thanks Meter 1298
Posts: 2,690
Join Date: Feb 2013
Quote:
Originally Posted by marty331 View Post
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 [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.
 
marty331
Old
#7  
marty331's Avatar
Senior Member - OP
Thanks Meter 243
Posts: 781
Join Date: Jun 2011
Location: Dallas, TX
Quote:
Originally Posted by nikwen View Post
I just found the Showcaseview library. It looks very promising.

Homepage: http://espiandev.github.io/ShowcaseView/
Github code: https://github.com/Espiandev/ShowcaseView
nikwen,
ShowcaseView is really awesome, I agree. However, it does not work with Fragments yet. Super bummer!
Current Devices:
Phone: Nexus 4
ROMs: CM10.1

Device: Nexus 7
ROM: Stock Rooted
CM10

Previous:

Phone: Infuse SGH-I997
ROMs: Infused 2.2
Serendipity VII
CM7
CM9
CM10

Device: Kindle Fire
ROMs: CM7
ICS/CM9
The Following User Says Thank You to marty331 For This Useful Post: [ Click to Expand ]
 
nikwen
Old
#8  
nikwen's Avatar
Recognized Contributor
Thanks Meter 1298
Posts: 2,690
Join Date: Feb 2013
Quote:
Originally Posted by marty331 View Post
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.

Code:
Select Code
        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/Showcas...eActivity.java)
 
marty331
Old
#9  
marty331's Avatar
Senior Member - OP
Thanks Meter 243
Posts: 781
Join Date: Jun 2011
Location: Dallas, TX
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.
Current Devices:
Phone: Nexus 4
ROMs: CM10.1

Device: Nexus 7
ROM: Stock Rooted
CM10

Previous:

Phone: Infuse SGH-I997
ROMs: Infused 2.2
Serendipity VII
CM7
CM9
CM10

Device: Kindle Fire
ROMs: CM7
ICS/CM9
The Following User Says Thank You to marty331 For This Useful Post: [ Click to Expand ]
 
nikwen
Old
#10  
nikwen's Avatar
Recognized Contributor
Thanks Meter 1298
Posts: 2,690
Join Date: Feb 2013
Quote:
Originally Posted by marty331 View Post
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.

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes