Developing an App with Jetpack Compose for Android【01】 - Initial Setup

* It's been 2~3 years since I last posted an article related to `Jetpack compose`

During this period, I occasionally touched upon it

But I never systematically studied it

Recently, I had the opportunity to develop an entire project using Compose

So after some exploration

I have some insights to share

I've decided to write this process down as notes to share with everyone

• First, I will decide which libraries to use this time

This time, I chose to challenge myself with the latest official recommendations

• Some of these libraries are also the latest versions applied when creating a new project in AS

Such as material3, kts+toml configuration, jetpack compose, etc.

Additionally, I previously shared issues encountered during toml migration

If interested, you can check it out

• The actual plan is as follows:

• Previously, when using XML, I would add color codes to colors.xml

Then place the color resource ID into styles.xml to achieve dark mode theme configuration

Now with compose, you can configure the app's theme through .kt

You can configure it according to the needs of each project

Personally, I prefer to set ColorScheme, shape, typography, statusBarColor, navigationBarColor, etc., based on UX/UX design drafts

Rather than designing each page individually

This saves a lot of repetitive development time

Import as needed

The actual usage of toml is written like this: implementation(libs.androidx.material3)

Place it in your build.gradle.kts(:app)

• tips: The multiple libraries above support automatic mapping of corresponding library versions when importing androidx-compose-bom, so you don't necessarily need to input version.ref

Here is the documentation on Material 3 theme documentation

Here we set up the status bar, navigation bar, theme, etc.

The colorscheme is applied from the previous implementation

Use in Activity or Screen:

* Here we create a universal toolbar

Because usually when a UI/UX designer provides the design

Most of the time the toolbar will have a similar effect

I would write a universal toolbar based on the design draft

You can decide whether you need to do this step

As follows:

Here is the actual use of MainAppBarConfig

The main thing is to add the desired style or click response in MainAppBarConfig

Then put it in the topBar of the Scaffold

* This is the end of the first part

The main thing is to lay a solid foundation

Future development will be very convenient and efficient!

Back to Contents