Jetpack Compose meets Map Kit

Hi Folks!

In the modern world, the declarative UI is becoming trendy and is affecting also the ‘native’ approach that we’re used to have.

But no, Jetpack Compose is not the first declarative UI solution for Android native development.
A few years ago I wrote an article about the solution provided by the Kotlin team, Anko.
https://medium.com/@frankStrangerZ/android-template-layout-example-with-anko-d82ee72562d3

Another solution that I could remember is from the Facebook team, Litho.
https://fblitho.com/

But come back to the Jetpack Compose solution and my experiment integrating the Huawei Map kit with it.

Setup

In order to integrate the Map Kit, there are many useful guides from the official one to medium articles on Huawei Developers and/or the official community .

Let’s code

Gradle

//Compose main dependency
implementation 'androidx.compose.ui:ui:1.0.5'
// Tooling support (Previews, etc.)
implementation 'androidx.compose.ui:ui-tooling:1.0.5'
// Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
implementation 'androidx.compose.foundation:foundation:1.0.5'
// Integration with activities
implementation 'androidx.activity:activity-compose:1.4.0'
//Huawei Map Kit
implementation 'com.huawei.hms:maps:5.2.0.301'

a) With XML -> MapFragment [easier, self-management of the lifecycle]

b) Without XML -> MapView [you need to manage the lifecycle and the savedInstanceState]

Result

Thanks!
Bye Folks :}