AndroidViewで実装していたGUIをJetpackComposeに移行していく場合、一度に全てのGUIを移行するのは難しいですし、少しつづリリースしたい時もあるかと思います。その場合はGUI一つづつJetpackComposeにしていくとJetpackComposeに移行しやすいです。

今回はAndroidView内にあるFloatingActionButtonをJetpackComposeにします。build.gradle.ktsに下記のライブラリを追加します。

implementation("androidx.compose.ui:ui:1.1.1")
implementation("androidx.compose.material3:material3:1.0.1"

バージョンは2023年4月時点なので適宜変更してください。またjetpackComposeはKotlinのバージョンと依存関係があるので適切なバージョンを選択してください。Kotlinのバージョンアップによってはgradleのバージョンやhiltのバージョンも変更が必要になるかもしれません。

AndroidViewのレイアウトXMLは必要な部分のみ書きます。JetpackComposeに置き換えたいViewをComposeViewとしてレイアウトXMLに入れます。ファイル名はfragment_compose.xmlとします。

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 他のView -->
    
    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/fab"
        android:layout_margin="@dimen/fab_margin"
        android:padding="@dimen/fab_padding"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"/>

    <!-- 他のView -->

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Fragment側のコードも必要な部分のみ抜粋します。

class ComposeFragment : Fragment() {
    private var _viewBinding: FragmentComposeBinding? = null
    private val viewBinding get() = _viewBinding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        _viewBinding = FragmentComposeBinding.inflate(layoutInflater, container, false)
        viewBinding.fab.setContent { Fab() }
        return viewBinding.root
    }

    @Composable
    fun Fab() {
        ExtendedFloatingActionButton(
            expanded = true,
            onClick = { /* fabがクリックされた時の処理 */ },
            icon = { Icon(Icons.Filled.Add, null) },
            text = { Text(text = "表示する文字列") },
        )
    }
}

ComposeView.setContent { }でComposableを指定するところがポイントですね。これを繰り返すことでAndroidViewからJetpackComposeに少しづつ移行できそうです。