【Android】Custom Tabsの高さを調節してボトムシートのように表示させる方法

こんにちは、Androidエンジニアのふなちです🟢

突然ですが本日こんな記事を見かけました。

pc.watch.impress.co.jp

上記の記事のことを書いた本家の記事↓ android-developers.googleblog.com

興味が沸いたのでサクッと実際に触ってみました。 そこで今回は上記のブログで紹介されている Browser  |  Jetpack  |  Android Developers のv1.5.0（2/8にリリース済み）で新たに入った、Custom Tabsの高さを調節してボトムシートのように表示させる方法（オーバーレイ表示をする方法）を紹介していきたいと思います。

実際に試した際の挙動

www.youtube.com

⚠️Custom Tabsを閉じた後に画面がチカっとなっているのはベースとして使っているアプリの仕様です。

実装方法

実際に私が実装したコードは以下になります。

// 呼び出したいURLを引数に取るランチャーの作成
// 釈迦に説法かもしれませんが、ランチャーはonCreateで作成しましょう！
val activityResultLauncher: ActivityResultLauncher<String> =
    registerForActivityResult(object :
        ActivityResultContract<String, Int>() {
        override fun createIntent(
            context: Context,
            input: String
        ): Intent {
            val builder = CustomTabsIntent.Builder()
                .setInitialActivityHeightPx(500) // 表示するボトムシートの高さをピクセルで指定する
                .setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
                .setToolbarCornerRadiusDp(10)
            val customTabsIntent = builder.build().intent
            customTabsIntent.data = Uri.parse(input)
            return customTabsIntent
        }

        override fun parseResult(
            resultCode: Int,
            intent: Intent?
        ): Int {
            return resultCode
        }
    }) { resultCode ->
        // 終了時に呼び出されるコールバック
    }

// あとは開きたいタイミングで以下をかく
// 引数に開きたいURLを指定するだけ！
activityResultLauncher.launch("https://hunachi.com/profile/")

公式ドキュメントにもサンプルコード（Java）が載っていますが、現状一部間違えがあるため私のコードを参考にしてもらったほうがいいかもしれません💦 developer.chrome.com 修正してもらうためのPRは作成済みです： https://github.com/GoogleChrome/developer.chrome.com/pull/5311

v1.5.0で新しく使えるようになった他の部分の解説

setInitialActivityHeightPxが使えることになったことで、実質ボトムシート表示が可能になりました。

それに伴い、以下の関数もv1.5.0で追加されています。

• setCloseButtonPosition：閉じるボタンを表示する位置を指定できる
• setToolbarCornerRadiusDp：ボトムシートの上部の丸みを指定できる（指定できるMaxの値は16dp）
• onActivityResized：サイズが変更されたのを知ることができる（CustomTabsCallbackへの追加）

builder
    .setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END) // 閉じるボタンの位置を調節
    .setToolbarCornerRadiusDp(10) // ボトムシートのように表示された際のボトムシート上部の角の丸みの設定
    .setSession(object : CustomTabsCallback() {
   ... 省略 ...
    // サイズが変更されたのを知ることができる
    override fun onActivityResized(
        height: Int,
        width: Int,
        extras: Bundle
    ) {
        super.onActivityResized(height, width, extras)
    }
})

まとめ

今回は、Browser  |  Jetpack  |  Android Developers のv1.5.0で新たに入った、Custom Tabsの新しい表示方法を紹介させていただきました。

今までCustom Tabsでは別画面表示しかできなかったので簡単に表現の幅を広げることができるようになって嬉しいですね☺︎

弊社ではエンジニアを募集しています。興味が湧いた方はぜひカジュアル面談でお話しましょう！

open.talentio.com