Follow this link https://developer.android.com/jetpack/compose/setuphttps://developer.android.com/jetpack/compose/setup
https://developer.android.com/jetpack/compose/migrate/strategy
Set up Compose for an existing app
To start using Compose, you need to first add some build configurations to your project. Add the following definition to your app’s build.gradle
file:
android {
buildFeatures {
///you might have viewbinding or databinding let be like data
compose true
}
composeOptions { kotlinCompilerExtensionVersion = "1.5.3" }
}
Some things to note:
- Setting the
compose
flag totrue
inside the AndroidBuildFeatures
block enables Compose functionality. - Kotlin Compiler extension versioning defined in the
ComposeOptions
block is tied to Kotlin versioning. Make sure to consult the Compatibility map and choose a version of the library that matches your project’s Kotlin version.
In addition, add the Compose BOM and the subset of Compose library dependencies you need to your dependencies from the block below:
dependencies {
def composeBom = platform('androidx.compose:compose-bom:2023.10.00') implementation composeBom
androidTestImplementation composeBom
// Choose one of the following:
// Material Design 3
implementation 'androidx.compose.material3:material3'
// or Material Design 2
implementation 'androidx.compose.material:material'
// or skip Material Design and build directly on top of foundational components
implementation 'androidx.compose.foundation:foundation'
// or only import the main APIs for the underlying toolkit systems,
// such as input and measurement/layout
implementation 'androidx.compose.ui:ui'
// Android Studio Preview support
implementation 'androidx.compose.ui:ui-tooling-preview'
debugImplementation 'androidx.compose.ui:ui-tooling'
// UI Tests
androidTestImplementation 'androidx.compose.ui:ui-test-junit4' debugImplementation 'androidx.compose.ui:ui-test-manifest'
// Optional - Included automatically by material, only add when you need
// the icons but not the material library (e.g. when using Material3 or a
// custom design system based on Foundation)
implementation 'androidx.compose.material:material-icons-core'
// Optional - Add full set of material icons
implementation 'androidx.compose.material:material-icons-extended'
// Optional - Add window size utils
implementation 'androidx.compose.material3:material3-window-size-class'
// Optional - Integration with activities
implementation 'androidx.activity:activity-compose:1.7.2'
// Optional - Integration with ViewModels
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1'
// Optional - Integration with LiveData
implementation 'androidx.compose.runtime:runtime-livedata'
// Optional - Integration with RxJava
implementation 'androidx.compose.runtime:runtime-rxjava2'
}