checklist
checklist

Reputation: 12930

Overlay not transparent for ShowcaseView

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>

Upvotes: 2

Views: 1463

Answers (1)

Juan Aguilar Guisado
Juan Aguilar Guisado

Reputation: 1701

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

Upvotes: 2

Related Questions