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