メモ2ブログ

メモtoウェブログ。旧ブログはこちら。 http://sakebook.blogspot.jp/

Android Support Library 23.2で追加されたChrome Custom TabsのBottom barを試してみた。

Chrome Custom Tabs

Webページを自分のアプリ内ブラウザで開くかのごとく、Chromeを使って開くことができる機能です。 利用するにはChromeのバージョンが45以上であることが必要です。

Chrome Custom Tabs自体は23.1.0から提供されていた機能ですが、新たにBottom barが提供されました。

今まではアクションボタンが一つしか置けない制約があったのですが、今回の更新でBottom barにItemが置けるようになったのでその機能を試してみました。

Bottom bar

色の変更とItem(5つまで)の設置ができます。

Bottom barと紹介してきましたが、中ではsecondaryToolbarと呼ばれています。

次のメソッドで色を指定できます。デフォルトではToolbarと同じ色が使われます。

  • public CustomTabsIntent.Builder setSecondaryToolbarColor(@ColorInt int color)

Itemの追加は次のメソッドです。一つも追加しない場合、Bottom barが表示されません。

  • public CustomTabsIntent.Builder addToolbarItem(int id, @NonNull Bitmap icon, @NonNull String description, PendingIntent pendingIntent) throws IllegalStateException

Itemを5つ以上追加するとIllegalStateExceptionが発生します。

idはItem間でユニークなものでないと、後から追加しようとしたものは追加されないので注意が必要です。

descriptionは、Itemを長押しした際に表示されるToastで使われます。

複数追加した場合、 後から追加したものが右側に追加されます。

Toolbarはスクロールに合わせて見え隠れするのですが、 Bottom barは表示されっぱなし なのでWebViewの表示領域が若干狭くなります。

サンプル

適当ですが、次のような感じです。

dependencies {
    compile 'com.android.support:appcompat-v7:23.2.0'
    compile 'com.android.support:customtabs:23.2.0'
}
    public static void launch(Activity activity, String url) {
        Intent dummyIntent = new Intent();
        CustomTabsIntent.Builder customTabsIntentBuilder = new CustomTabsIntent.Builder();

        PendingIntent pendingIntent =
                PendingIntent.getActivity(activity.getApplicationContext(), 100, dummyIntent, PendingIntent.FLAG_ONE_SHOT);
        Bitmap icon = BitmapFactory.decodeResource(activity.getResources(), android.R.drawable.ic_menu_share);
        customTabsIntentBuilder.setSecondaryToolbarColor(ContextCompat.getColor(activity, android.R.color.holo_purple));

        customTabsIntentBuilder.addToolbarItem(1, icon, "1", pendingIntent);
        customTabsIntentBuilder.addToolbarItem(2, icon, "2", pendingIntent);
        customTabsIntentBuilder.addToolbarItem(3, icon, "3", pendingIntent);
        customTabsIntentBuilder.addToolbarItem(4, icon, "4", pendingIntent);
        customTabsIntentBuilder.addToolbarItem(5, icon, "5", pendingIntent);

        CustomTabsIntent customTabsIntent = customTabsIntentBuilder.build();
        customTabsIntent.launchUrl(activity, Uri.parse(url));
    }

f:id:sakebook:20160227033748p:plain

f:id:sakebook:20160227033817p:plain

f:id:sakebook:20160227033824p:plain

f:id:sakebook:20160227033831p:plain

f:id:sakebook:20160227033840p:plain

実際に動きを見たい方はこちらのアプリで見れます。早速対応してみました。(v1.6.0)

play.google.com

条件

Support Libraryを23.2.0に上げることはもちろんですが、Chromeのバージョンが 49以上でないと表示されません。

それ未満の場合は、何も表示されないだけで、今までのChrome Custom Tabsと同じように使うことができます。

まとめ

49未満でも組み込んでも支障ないので、今までの制約に苦しんでいた人は積極的に組み込んでいいと思います。

未対応の場合表示されないので、右上の設定内に置いていたものを追加でBottom barに出すのがいいんじゃないかなと思います。

今後もできることが増えていくはずなので、楽しみ!

参考

Android Support Library 23.2 / Android Developers Blog

Chrome Custom Tabs / Chrome

Support Library Features / Android Developers