Overlay not transparent for ShowcaseView

Question

I am using ShowcaseView (https://github.com/amlcurran/ShowcaseView) with the following code:

ViewTarget target = new ViewTarget(R.id.targetButton, this);
ShowcaseView sv = new ShowcaseView.Builder(this, true)
                .setTarget(target)
                .setContentTitle("Hello world")
                .setContentText("This is the important counter")
                .setStyle(R.style.CustomShowcaseTheme2)
                .setShowcaseEventListener(this)
                .build();

and the styles.xml:

<style name="CustomTitle2" parent="TextAppearance.ShowcaseView.Title">
        <item name="android:textColor">#25467A</item>
    </style>
<style name="CustomShowcaseTheme2" parent="ShowcaseView.Light">
        <item name="sv_backgroundColor">#22B3E5FC</item>
        <item name="sv_showcaseColor">#25467A</item>
        <item name="sv_buttonText">Close</item>
        <item name="sv_titleTextAppearance">@style/CustomTitle2</item>
</style>

This seems to be working EXCEPT for the overlay itself not being transparent at all. This means that you cannot see anything under it (what's on the page except for the showcase). I tried to change to different colors (sv_backgroundColor) as well as the parent but nothing works.

I am using the latest version (5.0)

Any ideas?

Edit

Part of my theme:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/theme1_primary</item>
        <item name="colorPrimaryDark">@color/theme1_primary_dark</item>
        <item name="colorAccent">@color/theme1_accent</item>
        <item name="android:textColorPrimary">@color/theme1_primary_text</item>
        <item name="android:textColorSecondary">@color/theme1_secondary_text</item>
        <item name="android:textColorPrimaryInverse">@color/theme1_primary_light</item>
        <item name="android:textColorSecondaryInverse">@color/theme1_secondary_text</item>

        <item name="colorDivider">@color/theme1_divider</item>
        <item name="colorIcons">@color/theme1_icons</item>
        <item name="styleToolbar">@style/theme1_toolbar</item>
        <item name="styleToolbarMenu">@style/theme1_toolbar_menu</item>
        <item name="android:background">@color/white</item>
</style>

Juan Aguilar Guisado · Answer 1 · 2015-07-26T21:08:08.397

2

I've edited my answer. Here you are a sample of customization. This is my whole configuration for my tutorial.

<style name="CustomShowcaseTheme" parent="ShowcaseView.Light">
        <item name="sv_backgroundColor">@color/tutorial_background</item>
        <item name="sv_buttonBackgroundColor">#CF3119</item>
        <item name="sv_buttonText">Close</item>
        <item name="sv_titleTextAppearance">@style/CustomTitle</item>
        <item name="sv_detailTextAppearance">@style/CustomDetailText</item>
 </style>

Don't forget to link it in your theme configuration.

<style name="AppTheme" parent="@android:style/Theme.Holo.Light">
        <!-- Customize your theme here. -->
        <item name="showcaseViewStyle">@style/CustomShowcaseTheme</item>
</style>

I'm able to configure everything without any problem.

Try playing with your opacity, with colors like #11B3E5FC or #EEB3E5FC (same color different alpha)

I hope this would help you

edited Jul 26 '15 at 21:08

answered Jul 26 '15 at 19:34

Juan Aguilar Guisado

1,687
1
12
21

Thanks. But it cannot compile: "Cannot resolve symbol 'android:sv_backgroundColor'. – checklist Jul 26 '15 at 20:59
1

Sorry. did not work for me. Are you sure you are using the latest (5.0) version? – checklist Jul 27 '15 at 06:20
Yes, I'm. My target sdk is 22, and I'm developing with a Nexus 6. This problem is obviously due to other thing than XML configurations. Check if you are showing more than one showcase at same place/time (this may make your transparecy gone), rebuilding project etc. If you give me more information I would help you. – Juan Aguilar Guisado Jul 27 '15 at 06:26
I have updated the question with more details. I am not doing any of your suggestions. :-) – checklist Jul 27 '15 at 06:50
I can't see the second part of code I told you (link your style to your theme. I set the style in my XML, no programmatically. So, I would remove your "setStyle(...)" from your Java side, and add the link to your theme: `@style/CustomShowcaseTheme2` If your problems persist, maybe today or tomorrow (busy days) I'll be able to upload a github module I've made which makes showcase management abstract you. – Juan Aguilar Guisado Jul 27 '15 at 06:59
I tried both programmatically and in XML. Same :-( I have a feeling it has something to do with using the "material" styles. – checklist Jul 27 '15 at 07:30

Overlay not transparent for ShowcaseView

Edit

1 Answers1