AndroidStudio, which has been teased for being slow to pack, has finally made its big move!!

Compose

Official definition:

Jetpack Compose is a new Android toolkit for building native interfaces. It simplifies and speeds up interface development on Android. Make your app lively and exciting quickly with less code, powerful tools, and the intuitive Kotlin API.

Compose is a UI framework that Google is pushing for in 2021, offering functionality as a Jetpack.

The main function is to code the UI – de-XML

Another nice feature is that code changes can be seen in real time

This function, Android students to ecstasy, finally can abandon more than ten minutes to play a bag of pain.

Of course, there is always a price to be paid for getting, and here is the price to be paid:

  1. Language restrictions: Compose only supports the Kotlin language.
  2. Syntax redefinition: get rid of the original XML layout and replace it with code control UI.

While packaging time is reduced, new programming patterns are also time consuming to learn.

Don’t be afraid. It’s all over.

This chapter demonstrates two ways to create the Compose application.

  • One is a brand new project, a brand new Android Studio, created in one step.

  • The second is to add the Compose component to an existing project.

One-step creation

1. Preparation:

  1. The latest version of AndroidStudio
  2. The latest edition of the kotlin

2, create,

If you are prompted to update the plugin, update it and restart AndroidStudio when you are done.

This is the code generated by specifying the creation of the Empty Compose Activity project, not a word changed. This project can be run directly.

You can see if the preview screen on the right is updated, and if the screen running on the phone is updated in real time, by modifying the copy in your code and then saving it.

Existing project transformation

1. Preparation:

  1. The latest version of AndroidStudio
  2. Kotlin version 1.4.32 or later

For example, for example, the live preview function for Compose is mandatory for AndroidStudio, so we need to update it.

2. Add dependencies

Modify the configuration of build.gradle for Compose and kotlin.

Add the following dependencies to the build.gradle file in the app folder

android { buildFeatures { // Enables Jetpack Compose for this module compose = true } // Set both the Java and Kotlin compilers to target Java 8. compileOptions { sourceCompatibility = JavaVersion.VERSION_1_8 targetCompatibility = Javchoc.version_1_8} kotlinOptions {jvmTarget = "1.8" useIR = true} composeOptions {kotlinCompilerVersion = "1.4.32 kotlinCompilerExtensionVersion" = "1.0.0 - beta07"}} dependencies {/ / composei related dependency Implementation (" androidx.com pose. The UI: UI: 1.0.0 - beta07 ") / / Tooling support (Previews, Implementation ("androidx.compose. UI :ui-tooling:1.0.0-beta07") // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, Etc.) implementation (" androidx.com pose. Foundation, foundation: 1.0.0 - beta07 ") / / Material Design Implementation (" androidx.com pose. Material: material: 1.0.0 - beta07 ") / / material design ICONS Implementation (" androidx.com pose. Material: material - the ICONS - the core: 1.0.0 - beta07 ") Implementation (" androidx.com pose. Material: material - the ICONS - extended: 1.0.0 - beta07 ") / / Integration with observables Implementation (" androidx.com pose. The runtime: the runtime - livedata: 1.0.0 - beta07 ") Implementation (" androidx.com pose. The runtime: the runtime - rxjava2:1.0.0 - beta07 ") implementation 'androidx. Activity: activity - compose: 1.3.0 - alpha06' / / UI Tests AndroidTestImplementation (" androidx.com pose. The UI: UI - test - junit 4:1.0.0 - beta07 ")}Copy the code

The kotlin version in the build.gradle file at the project root should be the same as the previous kotlinCompilerVersion 1.4.32 or greater

Build. gradle file in root directory:

Dependencies {classpath "org. Jetbrains. Kotlin: kotlin - gradle - plugin: 1.4.32"}Copy the code

3. Code modification

Suppose the original code looks like this:

package com.example.maomao.democomposefromexisted

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}
Copy the code

Revised:

package com.example.maomao.democomposefromexisted import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import androidx.compose.material.MaterialTheme import androidx.compose.material.Surface import androidx.activity.compose.setContent import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.ui.tooling.preview.Preview import com.example.maomao.democomposedefault.ui.theme.DemoComposeDefaultTheme class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // setContentView(R.layout.activity_main) setContent { DemoComposeDefaultTheme { // A surface container using the 'background' color from the theme Surface(color = MaterialTheme.colors.background) { Greeting("Android") } } } } @Composable fun Greeting(name: String) {Text(Text = "$name!" ) } @Preview(showBackground = true) @Composable fun DefaultPreview() { DemoComposeDefaultTheme { Greeting("Android") } } }Copy the code

After modifying the code, there will be a reminder of Build & Refresh on the right side. Click to Refresh the Preview interface and you can see the preview.

Run to view the results.

If the DemoComposeDefaultTheme is not found, create an Empty Compose Activity and copy the DemoComposeDefaultTheme into your original project.

So far, this is just getting the project running, not real logical development.

That’s the end of the line for visitors who are experiencing Compose’s new features.

If you really need to migrate your project, you should have the kotlin syntax base in place, as well as the syntax for the Compose code layout. Then you can start developing.

In the future, we will update the articles related to Compose syntax. Please stay tuned.