Skip to content

updated: AGP 9 project migration guide #530

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

updated: AGP 9 project migration guide #530

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6e5caee
update: initial for AGP 9 migration
zamulla Oct 7, 2025
3d6528d
update: basic structure of the page
zamulla Oct 7, 2025
32cebc0
update: first modules detailed
zamulla Oct 10, 2025
5128e23
update: done with the bulk of instructions
zamulla Oct 13, 2025
e03b11f
update: done, with a couple of todos left up to discussion
zamulla Oct 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions mpd.tree
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@
<toc-element toc-title="Basic project structure" topic="multiplatform-discover-project.md"/>
<toc-element toc-title="Advanced project structure" topic="multiplatform-advanced-project-structure.md"/>
<toc-element toc-title="Project configuration options" topic="multiplatform-project-configuration.md"/>
<toc-element toc-title="Project configuration options" topic="multiplatform-project-agp-9-migration.md"/>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wrong toc-title

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, I'm not sure if this guide will be discoverable under "Explore project structure"

</toc-element>
<toc-element toc-title="Share code">
<toc-element topic="multiplatform-share-on-platforms.md"/>
Expand Down
1 change: 1 addition & 0 deletions topics/compose-onboard/compose-multiplatform-modify-project.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ To use the `kotlinx-datetime` library:
1. Open the `composeApp/src/commonMain/kotlin/App.kt` file and add the following function which returns a string containing the current date:

```kotlin
@OptIn(ExperimentalTime::class)
fun todaysDate(): String {
fun LocalDateTime.format() = toString().substringBefore('T')

Expand Down
48 changes: 26 additions & 22 deletions topics/compose-onboard/compose-multiplatform-new-project.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,8 @@ To get started, implement a new `App` composable:

When you run your application and click the button, the hardcoded time is displayed.

3. Run the application on the desktop. It works, but the window is clearly too large for the UI:
3. Run the application on the desktop (with the **composeApp [jvm]** run configuration).
It works, but the window is clearly too large for the UI:

![New Compose Multiplatform app on desktop](first-compose-project-on-desktop-3.png){width=400}

Expand All @@ -77,7 +78,7 @@ To get started, implement a new `App` composable:
```kotlin
fun main() = application {
val state = rememberWindowState(
size = DpSize(400.dp, 250.dp),
size = DpSize(400.dp, 350.dp),
position = WindowPosition(300.dp, 300.dp)
)
Window(
Expand All @@ -94,22 +95,22 @@ To get started, implement a new `App` composable:
Here, you set the title of the window and use the `WindowState` type to give the window an initial size and position on
the screen.

> To see your changes in real time in the desktop app, use [Compose Hot Reload](compose-hot-reload.md):
> 1. In the `main.kt` file, click the **Run** icon in the gutter.
> 2. Select **Run 'composeApp [hotRunJvm]' with Compose Hot Reload (Beta)**.
> ![Run Compose Hot Reload from gutter](compose-hot-reload-gutter-run.png){width=350}
>
> To see the app automatically update, save any modified files (<shortcut>⌘ S</shortcut> / <shortcut>Ctrl+S</shortcut>).
>
> Compose Hot Reload is currently in [Beta](https://kotlinlang.org/components-stability.html#stability-levels-explained) so its functionality is subject to change.
>
{style="tip"}

5. Follow the IDE's instructions to import the missing dependencies.
6. Run the desktop application again. Its appearance should improve:

![Improved appearance of the Compose Multiplatform app on desktop](first-compose-project-on-desktop-4.png){width=350}

> To see your changes in real time in the desktop app, use [Compose Hot Reload](compose-hot-reload.md):
> 1. In the `main.kt` file, click the **Run** icon in the gutter.
> 2. Select **Run 'composeApp [hotRunJvm]' with Compose Hot Reload (Beta)**.
> ![Run Compose Hot Reload from gutter](compose-hot-reload-gutter-run.png){width=350}
>
> To see the app automatically update, save any modified files (<shortcut>⌘ S</shortcut> / <shortcut>Ctrl+S</shortcut>).
>
> Compose Hot Reload is currently in [Beta](https://kotlinlang.org/components-stability.html#stability-levels-explained) so its functionality is subject to change.
>
{style="tip"}

<!--
### Compose Hot Reload demo {initial-collapse-state="collapsed" collapsible="true"}

Expand All @@ -121,7 +122,7 @@ To get started, implement a new `App` composable:
Now let users enter the name of a city to see the time at that location. The simplest way to achieve this is by adding
a `TextField` composable:

1. Replace the current implementation of `App` with the one below:
1. Replace the current implementation of `App()` in `commonMain/kotlin/compose.project.demo/App.kt` with the one below:

```kotlin
@Composable
Expand Down Expand Up @@ -168,7 +169,8 @@ The next step is to use the given input to calculate time. To do this, create a
1. Return to the `App.kt` file and add the following function:

```kotlin
fun currentTimeAt(location: String): String? {
@OptIn(ExperimentalTime::class)
fun currentTimeAt(location: String): String? {
fun LocalTime.formatted() = "$hour:$minute:$second"

return try {
Expand Down Expand Up @@ -300,6 +302,7 @@ list.
```kotlin
data class Country(val name: String, val zone: TimeZone)

@OptIn(ExperimentalTime::class)
fun currentTimeAt(location: String, zone: TimeZone): String {
fun LocalTime.formatted() = "$hour:$minute:$second"

Expand Down Expand Up @@ -405,7 +408,7 @@ modify the build file.
To support images in your project, you'll need to download image files, store them in the correct directory, and add
code to load and display them:

1. Using an external resource, such as [Flag CDN](https://flagcdn.com/), download flags to match the list of countries
1. Download flag images from [Flag CDN](https://flagcdn.com/) to match the list of countries
you have already created. In this case, these
are [Japan](https://flagcdn.com/w320/jp.png), [France](https://flagcdn.com/w320/fr.png), [Mexico](https://flagcdn.com/w320/mx.png), [Indonesia](https://flagcdn.com/w320/id.png),
and [Egypt](https://flagcdn.com/w320/eg.png).
Expand All @@ -419,14 +422,15 @@ code to load and display them:
4. Update the code in the `commonMain/kotlin/.../App.kt` file to support images:

```kotlin
import compose.project.demo.generated.resources.eg
import compose.project.demo.generated.resources.fr
import compose.project.demo.generated.resources.id
import compose.project.demo.generated.resources.jp
import compose.project.demo.generated.resources.mx
import demo.composeapp.generated.resources.jp
import demo.composeapp.generated.resources.mx
import demo.composeapp.generated.resources.eg
import demo.composeapp.generated.resources.fr
import demo.composeapp.generated.resources.id

data class Country(val name: String, val zone: TimeZone, val image: DrawableResource)
data class Country(val name: String, val zone: TimeZone, val image: DrawableResource)

@OptIn(ExperimentalTime::class)
fun currentTimeAt(location: String, zone: TimeZone): String {
fun LocalTime.formatted() = "$hour:$minute:$second"

Expand Down
Loading