My way to implement In-App Tutorials for Android apps

Volodia Chornenkyi
2 min readApr 1, 2017

--

I suppose every application, not even Android one, have some user tutorials to make users familiar with the app itself.
There are few approaches to creating the tutorial, and each of them has their field of usage.
One of the most popular methods by googling “android app tutorial overlay” in 99% result contains using an additional view for that. This pretty straightforward solution with own pros and cons.

Source: https://github.com/worker8/TourGuide

Pros:
* faster, as it shouldn’t be created at runtime (if you don’t inflate it yourself)
* exist the possibility to handle user touch events directly on the UI

Cons:
* increased view hierarchy
* stuck to the root container bounds

On the project where I work we have such requirements (simplified): display full-screen view every 3rd-time user visit page at view pager, and this tutorial may be reused in other places.
So view doesn’t suite here (in case we don’t have end up with spaghetti code) as it should be reused and displayed full screen.

The first thought about full screen may be activity, isn’t it? It may work in case you don’t care about your main activity will call onPause/Stop() and onStart/Resume(). In my case, we care because of tracking and counting screen visibility (requirement says tutorial should be displayed every 3rd time). If you don’t care about the lifecycle and it may be your choice.
After some brainstorming, I remembered that dialog doesn’t affect the activity lifecycle. So full-screen dialog is my choice to go.

To create full-screen dialog, I have the next style

<style name=”FullScreenDialog”>
<item name=”android:windowIsTranslucent”>true</item>
<item name=”android:windowBackground”>
@android:color/transparent
</item>
<item name=”android:windowContentOverlay”>@null</item>
<item name=”android:windowNoTitle”>true</item>
<item name=”android:windowIsFloating”>false</item>
<item name=”android:backgroundDimEnabled”>false</item>
<item name=”android:windowTranslucentStatus” tools:targetApi=”lollipop”>true</item>
</style>

As dialog style can’t be applied in the runtime, it can be passed as an argument to the constructor Dialog(Context context, int themeResId)

class CustomDialog extends AlertDialog {

public CustomDialog(Context context) {
super(context, R.style.FullScreenDialog);
}
}

Or with a builder

new AlertDialog.Builder(context, R.style.FullScreenDialog)
.create()
.show();

Also in 100% of cases, you also need to set your custom view with tutorial UI it may be achieved with the Dialog#setView(View view) method.

As a result, you will have the dialog which may be shown anytime you need without not related to the screen code.

Have you got any thoughts about that? Feel free to leave a comment about this.

--

--