ShowcaseView Customisation and Consecutive Showcases

Novoda has a reputation of building the most desirable apps for Android. We believe living and sharing a hack-and-tell culture is one way to maintain top-shelf quality.

When creating your apps, sometimes you may be targeting a set of users that won’t be so familiar with the Android UX, or sometimes your UI is that rad, so you need to tell someone how to navigate. Thanks to this cool guy Espian, things have become much easier.

If you instantly just want the sauce, see the link below. Check the readme as it has a dependency on the ShowcaseView library.

Here’s a ShowcaseView Example and a quick look at what I’m talking about:

SS1

Now the library is great, but like many open source libraries there is a lack of documentation. So I have written a sample project that shows you how to fully customise these “showcase views”, using layouts and themeing.

The library itself has recently had an update that was supposed to make it easier to add a showcase view to your app, it kinda worked but also made it harder to customise and to realise that you can customise it.

The one thing I couldn’t find in the library was a way to add multiple Showcases to one Activity. I wanted it to show one view, and right when you click ok it will show you the next. So I have also put that into this example.

Let’s have a brief run through of this and I think it will cover all the main points then I’ll leave you to go showcase everything. First off we have created an Activity with a Spinner, some text and a button. The Spinner doesn't have any items but just highlights navigation.

The button navigates to a second activity that also has a ShowcaseView.

MainActivity

In the MainActivity, onCreate will tell it to show its own showcase. This is the ShowcaseManager, a nice way to encapsulate what changes about showcases in one place.

ShowcaseManager

So in the ShowcaseManager here for the SecondActivity it shows an easy way to Showcase a View, note that this is much better than the static methods offered by the library as you now have access to the XML layout file where you can change the colours of the text and background. If you just used the static methods you have no control over these.

public void showcaseSecondActivity() {  
ShowcaseView showcaseView = (ShowcaseView) activity.getLayoutInflater().inflate(R.layout.view_showcase, null);  
showcaseView.setShowcaseItem(ShowcaseView.ITEM_ACTION_HOME, android.R.id.home, activity);  
        showcaseView.setText("Up Button", "Press this to send you 'up' one level");
        ((ViewGroup) activity.getWindow().getDecorView()).addView(showcaseView);
    }

I also found that the .show() method would not work (at least for me) so I pulled out the getDecorView().addView to do myself (which is a bit of a hack).

And in case you’re wondering view_showcase looks like this:

<com.github.espiandev.showcaseview.ShowcaseView xmlns:android="http://schemas.android.com/apk/res/android"  
      xmlns:showcaseview="http://schemas.android.com/apk/res/com.blundell.tut"
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      showcaseview:sv_backgroundColor="@color/showcase_background"
      showcaseview:sv_buttonText="@string/showcase_button_ok" />

So the above is how you fully customise a ShowcaseView. The below handles the scenario where you want to show a few showcases in the row, i.e. show them all the funcitonality in a wizard / step by step kind of fashion.

public void showcaseMainActivity() {  
        ShowcaseViews views = new ShowcaseViews(activity, R.layout.view_showcase);
        views.addView(new ShowcaseViews.ItemViewProperties(ID_SPINNER, R.string.showcase_main_spinner_title, R.string.showcase_main_spinner_message, ShowcaseView.ITEM_TITLE_OR_SPINNER));
        views.addView(new ShowcaseViews.ViewProperties(R.id.activity_main_button_continue, R.string.showcase_main_continue_title, R.string.showcase_main_continue_message));
        views.show();
    }

ShowcaseViews is a class I have written to wrap ShowcaseView allowing for easy adding of Showcases then showing each one as the user clicks the ok button.

ShowcaseViews

It comprises of a list of ShowcaseViews’s and will show the next one after the first has been acknowledged. Again this is not immediately possible with the static helper methods or original library. I think this class wraps up that functionality nicely and I should do a pull request on the original library.

That’s it, I hope the info helps if you ever want to Showcase your app UX to users.

Thanks to:

About Novoda

We plan, design, and develop the world’s most desirable Android products. Our team’s expertise helps brands like Sony, Motorola, Tesco, Channel4, BBC, and News Corp build fully customized Android devices or simply make their mobile experiences the best on the market. Since 2008, our full in-house teams work from London, Liverpool, Berlin, Barcelona, and NYC.

Let’s get in contact