chore: recomposition demo, updates Camera [googlemaps:googlemaps#543]

.github/workflows/docs.yml

@@ -29,13 +29,13 @@ jobs:
     steps:
     # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
     - name: Checkout Repo
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
 
     - name: Gradle Wrapper Validation
-      uses: gradle/wrapper-validation[email protected]
+      uses: gradle/actions/wrapper-validation@v3
 
     - name: Set up JDK 17
-      uses: actions/setup-java@v2.3.1
+      uses: actions/setup-java@v4.2.1
       with:
         java-version: '17'
         distribution: 'adopt'
@@ -54,7 +54,7 @@ jobs:
 
     # Commit changes and create a PR
     - name: PR Changes
-      uses: peter-evans/create-pull-request@v3
+      uses: peter-evans/create-pull-request@v6
       with:
         token: ${{ secrets.SYNCED_GITHUB_TOKEN_REPO }}
         commit-message: 'docs: Update docs'

.github/workflows/instrumentation-test.yml

@@ -26,17 +26,17 @@ on:
 
 jobs:
   run-instrumentation-test:
-    runs-on: macOS-latest # enables hardware acceleration in the virtual machine
+    runs-on: macOS-latest-large # enables hardware acceleration in the virtual machine
     timeout-minutes: 30
     steps:
     - name: Checkout Repo
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
 
     - name: Gradle Wrapper Validation
-      uses: gradle/wrapper-validation[email protected]
+      uses: gradle/actions/wrapper-validation@v3
 
     - name: Set up JDK 17
-      uses: actions/setup-java@v2.3.1
+      uses: actions/setup-java@v4.2.1
       with:
         java-version: '17'
         distribution: 'adopt'
@@ -61,7 +61,7 @@ jobs:
 
     - name: Upload test reports
       if: always()
-      uses: actions/upload-artifact@v2
+      uses: actions/upload-artifact@v4
       with:
         name: test-reports
         path: ./app/build/reports

.github/workflows/release.yml

@@ -23,12 +23,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
       with:
         token: ${{ secrets.SYNCED_GITHUB_TOKEN_REPO }}
-    - uses: gradle/wrapper-validation[email protected]
+    - uses: gradle/actions/wrapper-validation@v3
     - name: Set up JDK 17
-      uses: actions/setup-java@v2.3.1
+      uses: actions/setup-java@v4.2.1
       with:
         java-version: '17'
         distribution: 'adopt'
@@ -51,15 +51,15 @@ jobs:
         SONATYPE_PASSWORD: ${{ secrets.SYNCED_SONATYPE_PASSWORD }}
         SONATYPE_USERNAME: ${{ secrets.SYNCED_SONATYPE_USERNAME }}
 
-    - uses: actions/setup-node@v2
+    - uses: actions/setup-node@v4
       with:
         node-version: '14'
 
     - name: Install conventionalcommits
       run: npm i -D conventional-changelog-conventionalcommits
 
     - name: Semantic Release
-      uses: cycjimmy/semantic-release-action@v3.4.1
+      uses: cycjimmy/semantic-release-action@v4.1.0
       with:
         extra_plugins: |
           "@semantic-release/[email protected]"

.github/workflows/test.yml

@@ -32,13 +32,13 @@ jobs:
     steps:
     # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
     - name: Checkout Repo
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
 
     - name: Gradle Wrapper Validation
-      uses: gradle/wrapper-validation[email protected]
+      uses: gradle/actions/wrapper-validation@v3
 
     - name: Set up JDK 17
-      uses: actions/setup-java@v3
+      uses: actions/setup-java@v4.2.1
       with:
         java-version: '17'
         distribution: 'temurin'

README.md

@@ -22,14 +22,14 @@ You no longer need to specify the Maps SDK for Android or its Utility Library as
 
 ```groovy
 dependencies {
-    implementation 'com.google.maps.android:maps-compose:4.3.3'
+    implementation 'com.google.maps.android:maps-compose:5.0.1'
 
     // Optionally, you can include the Compose utils library for Clustering,
     // Street View metadata checks, etc.
-    implementation 'com.google.maps.android:maps-compose-utils:4.3.3'
+    implementation 'com.google.maps.android:maps-compose-utils:5.0.1'
 
     // Optionally, you can include the widgets library for ScaleBar, etc.
-    implementation 'com.google.maps.android:maps-compose-widgets:4.3.3'
+    implementation 'com.google.maps.android:maps-compose-widgets:5.0.1'
 }
 ```
 
@@ -200,6 +200,84 @@ GoogleMap(
 
 </details>
 
+<details>
+  <summary>Shapes</summary>
+
+### Shapes
+
+A shape is an object on the map, tied to a latitude/longitude coordinate. Currently, android-maps-compose offers `Polyline`, `Polygon` and `Circle`. For all shapes, you can customize their appearance by altering a number of properties.
+
+
+#### Polyline
+A `Polyline` is a series of connected line segments that can form any shape you want and can be used to mark paths and routes on the map:
+
+```kotlin
+val polylinePoints = remember { listOf(singapore, singapore5) }
+
+// ... 
+Polyline(
+    points = polylinePoints
+)
+```
+
+You can use spans to individually color segments of a polyline, by creating StyleSpan objects:
+
+```kotlin
+val styleSpan = StyleSpan(
+    StrokeStyle.gradientBuilder(
+        Color.Red.toArgb(),
+        Color.Green.toArgb(),
+    ).build(),
+)
+
+// ...
+
+val polylinePoints = remember { listOf(singapore, singapore5) }
+val styleSpanList = remember { listOf(styleSpan) }
+
+// ... 
+
+Polyline(
+    points = polylinePoints,
+    spans = styleSpanList,
+)
+```
+
+#### Polygon
+
+A `Polygon` is an enclosed shape that can be used to mark areas on the map:
+
+```kotlin
+val polygonPoints = remember { listOf(singapore1, singapore2, singapore3) }
+
+
+// ... 
+
+Polygon(
+    points = polygonPoints,
+    fillColor = Color.Black.copy(alpha = 0.5f)
+)
+```
+
+#### Circle
+
+A Circle is a geographically accurate projection of a circle on the Earth's surface drawn on the map:
+
+```kotlin
+var circleCenter by remember { mutableStateOf(singapore) }
+
+// ... 
+
+Circle(
+    center = circleCenter,
+    fillColor = MaterialTheme.colors.secondary,
+    strokeColor = MaterialTheme.colors.secondaryVariant,
+    radius = 1000.0,
+)
+```
+
+</details>
+
 <details>
   <summary>Recomposing elements</summary>
 

app/src/main/java/com/google/maps/android/compose/BasicMapActivity.kt

@@ -53,6 +53,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
@@ -62,6 +63,8 @@ import com.google.android.gms.maps.model.BitmapDescriptorFactory
 import com.google.android.gms.maps.model.CameraPosition
 import com.google.android.gms.maps.model.LatLng
 import com.google.android.gms.maps.model.Marker
+import com.google.android.gms.maps.model.StrokeStyle
+import com.google.android.gms.maps.model.StyleSpan
 import com.google.maps.android.compose.theme.MapsComposeSampleTheme
 import kotlinx.coroutines.launch
 
@@ -71,8 +74,22 @@ val singapore = LatLng(1.3588227, 103.8742114)
 val singapore2 = LatLng(1.40, 103.77)
 val singapore3 = LatLng(1.45, 103.77)
 val singapore4 = LatLng(1.50, 103.77)
+val singapore5 = LatLng(1.3418, 103.8461)
+val singapore6 = LatLng(1.3430, 103.8844)
+val singapore7 = LatLng(1.3430, 103.9116)
+val singapore8 = LatLng(1.3300, 103.8624)
+val singapore9 = LatLng(1.3200, 103.8541)
+val singapore10 = LatLng(1.3200, 103.8765)
+
 val defaultCameraPosition = CameraPosition.fromLatLngZoom(singapore, 11f)
 
+val styleSpan = StyleSpan(
+    StrokeStyle.gradientBuilder(
+        Color.Red.toArgb(),
+        Color.Green.toArgb(),
+    ).build(),
+)
+
 class BasicMapActivity : ComponentActivity() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
@@ -122,11 +139,18 @@ fun GoogleMapView(
     val singapore2State = rememberMarkerState(position = singapore2)
     val singapore3State = rememberMarkerState(position = singapore3)
     val singapore4State = rememberMarkerState(position = singapore4)
+
     var circleCenter by remember { mutableStateOf(singapore) }
     if (singaporeState.dragState == DragState.END) {
         circleCenter = singaporeState.position
     }
 
+    val polylinePoints = remember { listOf(singapore, singapore5) }
+    val polylineSpanPoints = remember { listOf(singapore, singapore6, singapore7) }
+    val styleSpanList = remember { listOf(styleSpan) }
+
+    val polygonPoints = remember { listOf(singapore8, singapore9, singapore10) }
+
     var uiSettings by remember { mutableStateOf(MapUiSettings(compassEnabled = false)) }
     var shouldAnimateZoom by remember { mutableStateOf(true) }
     var ticker by remember { mutableIntStateOf(0) }
@@ -195,15 +219,32 @@ fun GoogleMapView(
                     )
                 }
             }
+
             Circle(
                 center = circleCenter,
                 fillColor = MaterialTheme.colors.secondary,
                 strokeColor = MaterialTheme.colors.secondaryVariant,
                 radius = 1000.0,
             )
+
+            Polyline(
+                points = polylinePoints,
+                tag = "Polyline A",
+            )
+
+            Polyline(
+                points = polylineSpanPoints,
+                spans = styleSpanList,
+                tag = "Polyline B",
+            )
+
+            Polygon(
+                points = polygonPoints,
+                fillColor = Color.Black.copy(alpha = 0.5f)
+            )
+
             content()
         }
-
     }
     Column {
         MapTypeControls(onMapTypeClick = {

app/src/main/java/com/google/maps/android/compose/ScaleBarActivity.kt

@@ -20,7 +20,9 @@ import androidx.activity.compose.setContent
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.EnterTransition
 import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
@@ -34,15 +36,10 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
-import com.google.android.gms.maps.model.CameraPosition
-import com.google.android.gms.maps.model.LatLng
+import com.google.maps.android.compose.widgets.DarkGray
 import com.google.maps.android.compose.widgets.DisappearingScaleBar
 import com.google.maps.android.compose.widgets.ScaleBar
 
-private const val TAG = "ScaleBarActivity"
-
-private const val zoom = 8f
-
 class ScaleBarActivity : ComponentActivity() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
@@ -56,6 +53,9 @@ class ScaleBarActivity : ComponentActivity() {
                 position = defaultCameraPosition
             }
 
+            val scaleBackground = MaterialTheme.colors.background.copy(alpha = 0.4f)
+            val scaleBorderStroke = BorderStroke(width = 1.dp, DarkGray.copy(alpha = 0.2f))
+
             Box(Modifier.fillMaxSize()) {
                 GoogleMap(
                     modifier = Modifier.matchParentSize(),
@@ -64,18 +64,45 @@ class ScaleBarActivity : ComponentActivity() {
                         isMapLoaded = true
                     }
                 )
-                DisappearingScaleBar(
+
+                Box(
                     modifier = Modifier
-                        .padding(top = 5.dp, start = 10.dp)
-                        .align(Alignment.TopStart),
-                    cameraPositionState = cameraPositionState
-                )
-                ScaleBar(
+                        .padding(top = 5.dp, start = 5.dp)
+                        .align(Alignment.TopStart)
+                        .background(
+                            scaleBackground,
+                            shape = MaterialTheme.shapes.medium
+                        )
+                        .border(
+                            scaleBorderStroke,
+                            shape = MaterialTheme.shapes.medium
+                        ),
+                ) {
+                    DisappearingScaleBar(
+                        modifier = Modifier.padding(end = 4.dp),
+                        cameraPositionState = cameraPositionState
+                    )
+                }
+
+                Box(
                     modifier = Modifier
-                        .padding(top = 5.dp, end = 15.dp)
-                        .align(Alignment.TopEnd),
-                    cameraPositionState = cameraPositionState
-                )
+                        .padding(top = 5.dp, end = 5.dp)
+                        .align(Alignment.TopEnd)
+                        .background(
+                            scaleBackground,
+                            shape = MaterialTheme.shapes.medium,
+                        )
+                        .border(
+                            scaleBorderStroke,
+                            shape = MaterialTheme.shapes.medium
+                        ),
+                    ) {
+                    ScaleBar(
+                        modifier = Modifier.padding(end = 4.dp),
+                        cameraPositionState = cameraPositionState
+                    )
+
+                }
                 if (!isMapLoaded) {
                     AnimatedVisibility(
                         modifier = Modifier