The ShowcaseView can be customized using the ShowcaseView.ConfigOptions object you pass to the ShowcaseView.insertShowcaseView() method.
For some strange reason, there are no getter/setter methods for that class. So you can access the fields of that class directly.
This is the basic code for the following code snippets:
Don't respond to touches outside the showcased area
ShowcaseView.ConfigOptions co = new ShowcaseView.ConfigOptions();
co.hideOnClickOutside = true;
ShowcaseView sv = ShowcaseView.insertShowcaseView(R.id.showcasedView, this, R.string.showcase_title, R.string.showcase_message, co);
co.hideOnClickOutside = false;
co.block = true;
The field "block" determines whether the app will respond to touches outside the showcased area.
Don't hide the ShowcaseView on touches outside the showcased area
co.hideOnClickOutside = false;
The field "hideOnClickOutside" determines whether the view will be hidden when the screen is touched outside the highlighted area.
Set a fade-in or fade-out duration
The proper fields:
co.fadeInDuration = 1000;
co.fadeOutDuration = 1000;
Using these fields, you can set the time it will take the ShowcaseView to fade in or out.
Don't overlay the ActionBar
co.insert = ShowcaseView.INSERT_TO_VIEW;
This field allows you to determine whether the ShowcaseView will overlay the ActionBar.
Hide the button
- ShowcaseView.INSERT_TO_DECOR: Will overlay the ActionBar
- ShowcaseView.INSERT_TO_VIEW: Will just overlay the content, but not the ActionBar
co.noButton = true;
This field allows you to hide the button of the ShowcaseView.
Show the overlay only once
co.shotType = ShowcaseView.TYPE_ONE_SHOT;
This field determines how often the overlay should be shown.
Change the circle radius
- ShowcaseView.TYPE_NO_LIMIT: Every time the Activity is opened
- ShowcaseView.TYPE_ONE_SHOT: Only once
Use the method setShowcaseIndicatorScale(float scaleMultiplier) of ShowcaseView for that:
Colors and themes
NOTE: This part is outdated since the update of September 2nd. I will update the guide as soon as possible.
The ShowcaseView library offers plenty of options to adjust the appearance of the ShowcaseView.
Change the text color
Add the colors you want to the /res/values/colors.xml file first:
<?xml version="1.0" encoding="utf-8"?>
(I really don't recommend these colors!
Then use this code to apply the colors:
Resources res = getResources();
Fortunately, the library allows you to theme the ShowcaseView as a whole.
To theme the appearance of the ShowcaseView you need to create a style derived from either the ShowcaseView or ShowcaseView.Light style:
<style name="CustomShowcaseTheme" parent="ShowcaseView.Light">
(Add this to your /res/values/styles.xml file.)
The different options allow you to change the colors of the View and the text of the button.
Then add this to the /res/values/styles.xml file as well:
<style name="CustomAppTheme" parent="android:Theme.Light">
(You might want to replace Theme.Light by another one.)
Furthermore, add this to the /res/values-v14/styles.xml file:
<style name="CustomAppTheme" parent="android:Theme.Holo.Light">
(You might want to replace Theme.Holo.Light by another one.)
The last step is adding this to the <application> tag in your AndroidManifest.xml:
You're done. You successfully themed your ShowcaseView.
This was featured on the XDA portal on August 31, 2013.
- Big thanks to Alex Curran for the library.
- I wouldn't have got the idea to write this guide without @marty331's guide. Thank you, Marty.
- Moreover, I got inspired by the sample folder of the ShowcaseView project.