android-target-tooltipのスタイル書き換え

こんにちは、nijiboxのエンジニアっぽいことをしているtack.saitoです。

Androidでandroid-target-tooltipというライブラリがあり、
チュートリアルっぽい感じの見た目を出したく、このライブラリを使いました。
スタイルを書き換えるのに手間取ったので、その時のメモ。

使い方

READMEにあるので、読めばOK！

MainActivity

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button button = findViewById(R.id.myButton); // xmlにButton作っといた
        showTooltips(this, button, "表示メッセージだよー");
    }

    private void showTooltips(Context context, View view, String message) {
        Tooltip.make(context, new Tooltip.Builder(101)
                .anchor(view, Tooltip.Gravity.BOTTOM)
                .closePolicy(new Tooltip.ClosePolicy()
                        .insidePolicy(true, false)
                        .outsidePolicy(true, false), 10000)
                .activateDelay(800)
                .showDelay(300)
                .text(message)
                .maxWidth(500)
                .withArrow(true)
                .withOverlay(true)
                .floatingAnimation(Tooltip.AnimationBuilder.DEFAULT)
                .build()
        ).show();
    }

出たー。簡単。
widthはpx指定なので、dpに変えてあげる必要はあるようです。

しかし、ピンクはやめたい。どうしたものか。
Builderの中でも、指定できそうな感じはない。

スタイルの変更(本編)

    <!-- tool tip style -->
    <declare-styleable name="TooltipLayout">
        <attr name="ttlm_padding" format="dimension" />
        <attr name="ttlm_strokeColor" format="color" />
        <attr name="ttlm_backgroundColor" format="color" />
        <attr name="ttlm_strokeWeight" format="dimension" />
        <attr name="ttlm_cornerRadius" format="dimension" />
        <attr name="ttlm_arrowRatio" format="float" />
        <attr name="android:textAppearance" />
        <attr name="ttlm_overlayStyle" format="reference" />
        <attr name="ttlm_elevation" format="dimension" />

        <!-- font file path inside your assets folder -->
        <attr name="ttlm_font" format="string" />

        <!-- textview text gravity -->
        <attr name="android:gravity" />
    </declare-styleable>

    <declare-styleable name="TooltipOverlay">
        <attr name="android:color" />
        <attr name="android:alpha" />
        <attr name="ttlm_repeatCount" format="integer" />
        <attr name="ttlm_duration" format="integer" />
        <attr name="android:layout_margin" />
    </declare-styleable>

というあたりがカスタムできるらしいので

style.xml

    <style name="MyTooltip">
        <item name="ttlm_backgroundColor">#000000</item>
        <item name="ttlm_overlayStyle">@style/MyToolTipOverlayStyle</item>
        <item name="android:textAppearance">@style/TooltipText</item>
    </style>

    <style name="TooltipText">
        <item name="android:textColor">#ffffff</item>
    </style>

    <style name="MyToolTipOverlayStyle">
        <item name="android:color">#f5f5f5f5</item>
        <item name="ttlm_repeatCount">999</item>
        <item name="ttlm_duration">300</item>
    </style>

MainActivity

    private void showTooltips(Context context, View view, String message) {
        Tooltip.make(context, new Tooltip.Builder(101)
                .anchor(view, Tooltip.Gravity.BOTTOM)
                .closePolicy(new Tooltip.ClosePolicy()
                        .insidePolicy(true, false)
                        .outsidePolicy(true, false), 10000)
                .activateDelay(800)
                .showDelay(300)
                .text(message)
                .maxWidth(500)
                .withArrow(true)
                .withOverlay(true)
                .floatingAnimation(Tooltip.AnimationBuilder.DEFAULT)
                .withStyleId(R.style.MyTooltip) //ここにstyleを渡す
                .build()
        ).show();
    }

でけたー。素敵ー。ちょろーー！！

まぁREADMEにもsampleにも書いてあったんですけどね。
まずは読め、という教訓でした。