MaterialなFeatureDiscoveryのライブラリを使ってみる

Material Designでは様々なデザインパターンが用意されています。 FeatureDiscoveryもその一つで、画面を開いた時にユーザーに機能の発見を促し、エンゲージメントを高めることができます。

Feature discovery - Growth & communications - Material Design

今回は以下のライブラリを使用した実装を紹介します。

github.com

セットアップ

ライブラリのGithubのページを参考にdependenciesに追加します。

ToolbarのメニューをTapTargetに設定する

Toolbarのメニューに対して、TarTargetViewを設定します。 このライブラリではToolbarのインスタンスを渡す必要があるため、従来のActionBarを使用している場合、TapTargetViewを設定できません。
Toolbarを使用するか、別のライブラリを使ってみましょう。

まず、Toolbarに対して、inflateMenuでメニューを設定し、その後TapTargetViewのTargetとして設定します。 onCreateOptionsMenu時ではまだViewが生成されていないため、TargetのViewが取得できませんので。

        Toolbar toolbar = findViewById(R.id.toolbar);
        toolbar.inflateMenu(R.menu.menu_main);

        TapTargetView.showFor(MainActivity.this, 
                TapTarget.forToolbarMenuItem(toolbar, R.id.action_settings, "これは設定メニューです", "ここから設定画面を開けます"));

アプリを起動すると以下のように表示されます。

シーケンスを設定する

TapTargetSequenceを使用すると、TapTargetViewを順番に表示することができます。
ToolbarのメニューとFloating Action ButtonにTapTargetViewを表示するサンプルを示します。

        TapTargetSequence sequence = new TapTargetSequence(this);
        sequence.targets(
                TapTarget.forToolbarMenuItem(toolbar, R.id.action_settings,
                        "これは設定メニューです",
                        "ここから設定画面を開けます")
                        .cancelable(false)
                        .id(1),
                TapTarget.forView(findViewById(R.id.fab),
                        "メッセージ作成ボタン",
                        "ここからメッセージの作成ができます")
                        .tintTarget(false)
                        .id(2))
                .start();

参考サイト

Feature discovery - Growth & communications - Material Design GitHub - KeepSafe/TapTargetView: An implementation of tap targets from the Material Design guidelines for feature discovery