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

こんにちは、[nijibox](https://nijibox.jp)のエンジニアっぽいことをしているtack.saitoです。

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


# 使い方
[README](https://github.com/sephiroth74/android-target-tooltip/blob/master/README.md)にあるので、読めばOK！

```java: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();
    }
```

![tooltip-1.png](https://qiita-image-store.s3.amazonaws.com/0/99988/ad659f19-2b1b-0292-e107-8e33bab22dda.png)

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

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


## スタイルの変更(本編)


```xml

    <!-- 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>

```

```java: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();
    }

```

![tooltip-2.png](https://qiita-image-store.s3.amazonaws.com/0/99988/1915560d-6e72-7c98-f24a-538458e8c4ab.png)

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

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