ChromeCustomTabs for BottomSheet

Androidやってるめっしです(Twitter：https://twitter.com/0601messi)
先日こちらのChromeCustomTabsの記事を見て気になったので調べてみました

概要

AndroidアプリでWebURLをタップした際に、ブラウザーを起動するかWebViewを使用して独自のアプリ内ブラウザーを作るなどがあります。
その他の方法として、ネイティブコンテンツとWebコンテンツ間の遷移がよりシームレスになるChromeCustomTabsというものがあります。

そんなChromeCustomTabsが新たにBottomSheetで表示できるようになりました。
では、やってみます。

実装

ライブラリの追加

build.gradle.kts

implementation(androidx.browser:browser:1.5.0) // 最新バージョンを

ChromeCustomTabsの呼び出し

SampleFragment.kt

private val startForResult = registerForActivityResult(ActivityResultContracts.StartActivityForResult()) {
  // 閉じた時に呼ばれるコールバック。ChromeCustomTabsを閉じた時に何か処理をしたい時はこちらに
}

// 呼び出したいところでlaunchする。
binding.button.setOnClickListener {
  val builder = CustomTabsIntent.Builder()
    .setInitialActivityHeightPx(800) // カスタムタブの初回起動の高さを指定できます
    .setToolbarCornerRadiusDp(16) // ツールバーの上隅角の丸みのサイズを指定できます
  val customTabsIntent = builder.build().intent.apply {
    // 表示させたいURLの設定
    data = Uri.parse("https://developer.android.com/")
  }
  startForResult.launch(customTabsIntent)
}

完成

通常	半分展開	全展開

注意・補足

• 以下の書き方だとBottomSheetにならなかったのでstartActivityForResultで呼ぶ必要がある。

Fail.kt

val url = "https://google.com/"
val builder = CustomTabsIntent.Builder()
val customTabsIntent = builder.build()
customTabsIntent.launchUrl(this, Uri.parse(url))

• setInitialActivityHeightPxの設定は必須。こちらもないと通常のViewになる。
• 同じコードでもAndroid10だと通常のView。12だとBottomSheetになった。
• CustomTabsIntentのオプションで他にもタイトルや色等の設定できる。
  • https://developer.android.com/reference/androidx/browser/customtabs/CustomTabsIntent.Builder

おわり

面白いUI系の新機能探してます。