WIP: [android] convert help screen to compose #5179

Draft

arnaudvergnet wants to merge 1 commit from arnaudvergnet/compose into master

arnaudvergnet commented

2023-05-18 10:32:48 +00:00

(Migrated from github.com)

This is an experiment following https://github.com/orgs/organicmaps/discussions/2212.

The PR adds support for Kotlin and Jetpack Compose, and rewrites the help page with it. Help page is a quite simple screen so it was a good candidate for such a test. The goal is to fully migrate this screen and its child to decide if Compose is worth the migration. This is not ready to merge yet, this PR is here so it is easier for contributors to test and follow the development.

Please note while I have experience with other declarative UI languages such as React-Native and QML, this is my first experience with Compose. So any tips from experienced developers are welcome!

Known issues

~~Status bar is not updated on dark mode~~ Fixed
FAQ and copyright buttons do not work yet. I'll try to convert those to compose as well so we can experiment with navigation between screens.

UI changes

This is not a 1:1 conversion from the XML layout. I want to avoid weird custom implementations and stick to the standard components as much as possible, so some things have slightly changed.

Buttons are smaller and have a different design. I never liked the old ones anyway so IMO this is a step forward.
Colors are a bit different, such as the dark mode background. While the app uses some custom colors, I decided to stick as much as possible to the standard Material Design colors so it is better integrated with the rest of the ecosystem.
Fonts have slightly different sizes and colors. Again, I tried to use standard typography styles that match as close as possible the previous design.

Architecture

If you are not familiar with declarative UI languages, please take a look here. The main difference is that we do not need XML at all anymore. Everything is defined inside Kotlin files.

The Help activity has been rewritten in Kotlin. It is fully interoperable with Java so nothing changes outside of HelpActivity.java (which became HelpActivity.kt). This class defines which "composables" to render in the screen, which theme to use, ...

I created other files to hold child composables so it is easier to read and we can easily reuse those components.

Compose uses its own theme/design system. This is contained in the Theme.kt file, and the colors used in Colors.kt. The theme uses Material design as its base, and adds new colors specific to organic maps on top. This will hopefully make migration to Material 3 a lot easier and will greatly simplify the theme. Using a color from the theme (without having to worry about light/dark variants) is as simple as calling ExtendedMaterialTheme.colors.COLOR_YOU_NEED.

As explained in the documentation, adaptive layout does not look at landscape or tablet mode, but rather at dimensions so it adapts better to different screen sizes and form factors. Here we use BoxWithConstraints composable to render child composable conditionally based on the available width.

Thoughts on Compose

This is way better than the current XML approach. I am a little biased because I worked a lot with similar frameworks, but it is easier to work with and understand. It will be easier to make UI changes and have a consistent design. I hope we'll be able to integrate it in the app and gradually make the switch.

This is an experiment following https://github.com/orgs/organicmaps/discussions/2212. The PR adds support for Kotlin and Jetpack Compose, and rewrites the help page with it. Help page is a quite simple screen so it was a good candidate for such a test. The goal is to fully migrate this screen and its child to decide if Compose is worth the migration. This is not ready to merge yet, this PR is here so it is easier for contributors to test and follow the development. Please note while I have experience with other declarative UI languages such as React-Native and QML, this is my first experience with Compose. So any tips from experienced developers are welcome! **Known issues** - ~Status bar is not updated on dark mode~ Fixed - FAQ and copyright buttons do not work yet. I'll try to convert those to compose as well so we can experiment with navigation between screens. **UI changes** This is not a 1:1 conversion from the XML layout. I want to avoid weird custom implementations and stick to the standard components as much as possible, so some things have slightly changed. - Buttons are smaller and have a different design. I never liked the old ones anyway so IMO this is a step forward. - Colors are a bit different, such as the dark mode background. While the app uses some custom colors, I decided to stick as much as possible to the standard Material Design colors so it is better integrated with the rest of the ecosystem. - Fonts have slightly different sizes and colors. Again, I tried to use standard typography styles that match as close as possible the previous design. **Architecture** If you are not familiar with declarative UI languages, please take a look [here](https://developer.android.com/jetpack/compose/mental-model). The main difference is that we do not need XML at all anymore. Everything is defined inside Kotlin files. The Help activity has been rewritten in Kotlin. It is fully interoperable with Java so nothing changes outside of `HelpActivity.java` (which became `HelpActivity.kt`). This class defines which "composables" to render in the screen, which theme to use, ... I created other files to hold child composables so it is easier to read and we can easily reuse those components. Compose uses its own theme/design system. This is contained in the `Theme.kt` file, and the colors used in `Colors.kt`. The theme uses Material design as its base, and adds new colors specific to organic maps on top. This will hopefully make migration to Material 3 a lot easier and will greatly simplify the theme. Using a color from the theme (without having to worry about light/dark variants) is as simple as calling `ExtendedMaterialTheme.colors.COLOR_YOU_NEED`. As explained in the [documentation](https://developer.android.com/jetpack/compose/layouts/adaptive), adaptive layout does not look at landscape or tablet mode, but rather at dimensions so it adapts better to different screen sizes and form factors. Here we use `BoxWithConstraints` composable to render child composable conditionally based on the available width. **Thoughts on Compose** This is way better than the current XML approach. I am a little biased because I worked a lot with similar frameworks, but it is easier to work with and understand. It will be easier to make UI changes and have a consistent design. I hope we'll be able to integrate it in the app and gradually make the switch.

Jean-BaptisteC (Migrated from github.com) reviewed 2023-05-18 10:55:30 +00:00

Rows
Columns