Android showcaseview trying to make circle smaller

Question

I tried to find some information how to do that but nothing works for me so far.

When I try to do that: new ShowcaseView.Builder(getActivity(), true)

Outer 2 glowing circle is gone and other two circles lose their colors. Only button remains to have the proper color.

Dimens.xml

<dimen name="showcase_radius">40dp</dimen>
<dimen name="showcase_radius_inner">44dp</dimen>
<dimen name="showcase_radius_outer">48dp</dimen>

Styles.xml

<style name="CustomShowcaseTheme">
        <item name="sv_backgroundColor">#CC000000</item>
        <item name="sv_buttonText">Close</item>
        <item name="sv_tintButtonColor">true</item>
        <item name="sv_titleTextAppearance">@style/CustomTitle</item>
        <item name="sv_detailTextAppearance">@style/TextAppearance.ShowcaseView.Detail</item>
</style>

<style name="CustomTitle" parent="TextAppearance.ShowcaseView.Title">
        <item name="android:textColor">#ffffff</item>
</style>

<style name="TextAppearance.ShowcaseView.Detail" parent="android:style/TextAppearance">
        <item name="android:textColor">#FFFFFF</item>
</style>

Example - as you can see there is no default color and outer circles are gone:

With the same settings but with new ShowcaseView.Builder(getActivity()) the innter circle get smaller but other ones do not follow it but they stay where they were.

Is there any solution to make them all get smaller but look exactly the same as default circles?

Answer 1

This is the solution I use.

I do prefer it because it does not modify the original sources of the ShowcaseView.

But it uses reflection.

1. First set any desired value into your resources xml like

   <dimen name="sv_radius">40dp</dimen>
   

2. Use this method to create an instance of the ShowcaseView.Builder

       private ShowcaseView.Builder createShowcaseViewBuilder() {
   
           ShowcaseView.Builder showcaseViewBuilder = new ShowcaseView.Builder(activity, true)
                   /**
                    * set theme
                    */
                   .setStyle(R.style.ShowcaseTheme4);
           /**
            * Load the new radius from resource xml
            */
           float radius = activity.getResources().getDimension(R.dimen.sv_radius);
   
           try {
               Field showcaseViewField = ShowcaseView.Builder.class.getDeclaredField("showcaseView");
               showcaseViewField.setAccessible(true);
               Object showcaseViewObject = showcaseViewField.get(showcaseViewBuilder);
               Field showcaseDrawerField = ShowcaseView.class.getDeclaredField("showcaseDrawer");
               showcaseDrawerField.setAccessible(true);
               Object showcaseDrawerObject = showcaseDrawerField.get(showcaseViewObject);
   
               Field innerRadiusField = null;
               try {
                   innerRadiusField = showcaseDrawerObject.getClass().getDeclaredField("innerRadius");
               } catch (NoSuchFieldException e) {
                   e.printStackTrace();
               }
               if (null != innerRadiusField) {
                   /**
                    * detected that the new showcase-drawer is used
                    */
                   innerRadiusField.setAccessible(true);
   
                   Field outerRadiusField = showcaseDrawerObject.getClass().getDeclaredField("outerRadius");
                   outerRadiusField.setAccessible(true);
   
                   float oldInnerRadius = (float) innerRadiusField.get(showcaseDrawerObject);
                   float oldOuterRadius = (float) outerRadiusField.get(showcaseDrawerObject);
                   float newOuterRadius = radius * (oldOuterRadius / oldInnerRadius);
   
                   innerRadiusField.set(showcaseDrawerObject, radius);
                   outerRadiusField.set(showcaseDrawerObject, newOuterRadius);
               } else {
                   /**
                    * detected that the old showcase-drawer is used (no outer radius)
                    */
                   Field showcaseRadiusField = showcaseDrawerObject.getClass().getDeclaredField("showcaseRadius");
                   showcaseRadiusField.setAccessible(true);
                   showcaseRadiusField.set(showcaseDrawerObject, radius);
               }
           } catch (Exception e) {
               e.printStackTrace();
           }
           return showcaseViewBuilder;
       }
   

Answer 2

I had the same problem and I found out a "solution" that worked for me, but maybe is not the correct way to do it. It's a bit late for the author but maybe it still can be helpful for anyone else.

1. That glowing circle is an image called cling_bleached.png. Find it (drawable-xhdpi folder) and resize it (from 800x800 to 400x400)

2. Set showcase_radius to 47 (half the original 94). Don't change the other two radius.

3. Don't use true in ShowcaseView.Builder.