fix: metric ScaleBar text not rendering correctly (#527) (#563)

Co-authored-by: dkhawk <dkhawk@google.com>

Author: dkhawk

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

maps-compose-widgets/src/main/java/com/google/maps/android/compose/widgets/ScaleBar.kt

@@ -32,7 +32,7 @@ import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment.Companion.End
@@ -44,6 +44,7 @@ import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.em
 import androidx.compose.ui.unit.sp
 import com.google.android.gms.maps.model.LatLng
 import com.google.maps.android.compose.CameraPositionState
@@ -76,7 +77,7 @@ public fun ScaleBar(
             .size(width = width, height = height)
     ) {
         var horizontalLineWidthMeters by remember {
-            mutableStateOf(0)
+            mutableIntStateOf(0)
         }
 
         Canvas(
@@ -249,6 +250,7 @@ private fun ScaleText(
         fontSize = 12.sp,
         color = textColor,
         textAlign = TextAlign.End,
+        lineHeight = 1.em,
         modifier = modifier,
         style = MaterialTheme.typography.h4.copy(
             shadow = Shadow(