Compose is Jetpack’s new UI framework for Android and other platforms. Instead of writing Android XML for declarative development, Compose will be integrated into existing projects below.

Compose the official address: https://developer.android.com/jetpack/compose/documentation

The relevant version configuration required to integrate Compose

  • IDE: Android Studio Arctic Fox version of the official address: developer.android.com/studio, download the latest is.
  • Gradle: 7.0 +
  • TargetSdk/CompileSdk: 31 +
  • MinSdk: 21 +
  • Kotlin: 1.5.31 (Kotlin version is currently available for Compose’s latest stable release. Kotlin version will be added as Compose’s version increases)
  • Compose: 1.0.5 (the latest stable version), version address: developer.android.com/jetpack/and…

The libraries that need to be referenced are described below.

Integrate into existing projects

Upgrade the Gradle version

  1. Open Projectbuild.gradleFile configuration plug-in version:
buildscript {
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        // Gradle version 7.0 +
        classpath "Com. Android. Tools. Build: gradle: 7.0.4"
        // Kotlin version (for compose version)
        classpath "Org. Jetbrains. Kotlin: kotlin - gradle - plugin: 1.5.31"}}Copy the code

Configure the Modulebuild.gradlefile

  1. The Kotlin plugin is introduced at the top of the file:
plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'kotlin-android-extensions'
    id 'kotlin-kapt'
}
Copy the code
  1. Added Compose support:
android {

    buildFeatures {
        // Enable Compose support
        compose true 
    }
    
    composeOptions {
        Compose is composed developed by Kotlin. You need to configure Kotlin's corresponding compilation extension
        // 1.0.5 is also a version of the Compose reference library, which can be stored as a constant
        kotlinCompilerExtensionVersion '1.0.5'
    }

     kotlinOptions {
        // Build the specified JVM version
        jvmTarget = "1.8"}}Copy the code
  1. Introduction of Compose library

First, the subcontracting of Compose is introduced, and then the corresponding library is introduced according to the project requirements. The structure is sorted from bottom to top, with the lowest library at the top:

  • Compile: Compiler plug-in
  • Runtime: Underlying conceptual model
  • UI: Basic UI-related support
  • Animation: Basic animation API support based on rutime and UI
  • Foundation: a more practical component library based on the UI layer encapsulation, such as Scroll, Box, etc
  • Material/Material3: Implementation of Material2/3

You can always develop a direct reference to the Material library, which contains all the above libraries. There is no material design required in the project and you can reference the Foundation library, which will contain the basic UI configuration.

Lite version:

dependencies {
    // Compose supports previews, an XML-like preview mode, and supports clicks, swipes, and other interactions that ARE not supported by XML
    implementation 'androidx.com pose. The UI: UI - tooling: 1.0.5'
    // The main package for the Compose library, described above
    implementation 'androidx.com pose. Material: material: 1.0.5'
    // Support Compose for your Activity
    implementation 'androidx. Activity: activity - compose: 1.4.0'
}
Copy the code

Official version:

dependencies {
    Compose UI-related base support
    implementation 'androidx.com pose. The UI: UI: 1.0.5'
    Compose UI preview
    implementation 'androidx.com pose. The UI: UI - tooling: 1.0.5'
    Compose is based on the UI layer package for more useful component libraries such as Scroll, Box, etc
    implementation 'androidx.com pose. Foundation, foundation: 1.0.5'
    // Compose Material Design
    implementation 'androidx.com pose. Material: material: 1.0.5'
    // Compose Material design icons
    implementation 'androidx.com pose. Material: material - the ICONS - the core: 1.0.5'
    implementation 'androidx.com pose. Material: material - the ICONS - extended: 1.0.5'
    // Support Compose for your Activity
    implementation 'androidx. Activity: activity - compose: 1.3.1'
    // Compose ViewModels stores data
    implementation 'androidx. Lifecycle: lifecycle - viewmodel - compose: 1.0.0 - alpha07'
    // Compose other integration
    implementation 'androidx.com pose. The runtime: the runtime - livedata: 1.0.5'
    implementation 'androidx.com pose. The runtime: the runtime - rxjava2:1.0.5'
    // Compose UI Tests
    androidTestImplementation 'androidx.com pose. The UI: UI - test - junit 4:1.0.5'
}
Copy the code

Test whether Compose is configured successfully

Create a new Activity that overwrites the onCreate method and replaces setContentView(r.layout.activity_main) with setContent{}, for which Compose no longer writes XML.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?). {
        super.onCreate(savedInstanceState)
        setContent {
            // The corresponding TextView of XML
            Text("Hello Compose!")}}}Copy the code

Run the project to see if it can be successfully displayed. If you have any problems, please leave a message and solve the problem together.

Compose a preview

  1. The Compose support preview needs to be introducedImplementation of 'androidx.com pose. The UI: UI - tooling: 1.0.5'Library, which was introduced at the top.
  2. The Compose preview requires a band@PreviewAnnotated function to preview View, input in codeprevYou will be prompted to generate preview code directly (the code template comes with Android Studio)
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?). {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setContent {
            HelloView()
        }
    }
    
    Composable represents a Compose View
    @Composable
    fun HelloView(a) {
        Text("Hello Compose!")}/ / the preview
    @Preview
    @Composable
    fun ComposePreView(a) {
        HelloView()
    }
}
Copy the code
  1. Currently, preview does not support automatic XML updates. If you need to update, click the refresh button on the right.
  2. Click the run button on the left to make the preview interface run separately on the phone, which is a very convenient function for large project construction time.

Create a new Android Compose project

Android Studio -> File -> New -> New Project select Compose Activity

Other Compose articles

Android Jetpack Compose — Integrate into existing projects

Android Jetpack Compose – For layout control Column, Row, Box, etc.