StreetView Composable is drawn outside of clipping area

[amatanat]

StreetView composable doesn't fully respect the parent's and its own clip area.

Environment details

We tested it in Android 13 & 14.

Versions:

• 4.3.0 of com.google.maps.android:maps-compose
• 1.1.2 of androidx.compose.material3:material3

Steps to reproduce

Put the StreetView inside a Card or ModalBottomSheet with rounded corners where the street view fills out to each side. The street view will be drawn outside of the rounded corners, no matter if you put Modifier.clip on the StreetView itself or the parent Composable.

Also tried adding shape to the Card and no Modifier.clip applied on the StreetView, but got the same result.

ℹ️ There was the same bug report for the Composable GoogleMap which is Closed now but there is a comment that it still doesn't work.

Code example

Card(
        modifier = Modifier
            .fillMaxWidth()
            .clip(RoundedCornerShape(20.dp)),
    ){
        StreetView(
            modifier = Modifier
                .clip(RoundedCornerShape(20.dp))
                .height(200.dp),
            cameraPositionState = cameraPositionState,
            streetViewPanoramaOptionsFactory = {
                StreetViewPanoramaOptions().position(position, StreetViewSource.OUTDOOR)
            },
        )
    }

Example screenshot from a ModalBottomSheet with RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp) shape and Modifier.clip(RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp)) applied to StreetView.

[wangela]

If you would like to upvote the priority of this issue, please comment below or react on the original post above with :+1: so we can see what is popular when we triage.

@amatanat Thank you for opening this issue. 🙏 Please check out these other resources that might help you get to a resolution in the meantime:

• Check the issue tracker - bugs and feature requests for Google Maps Platform APIs and SDKs
• Open a support case - Get 1:1 support in Cloud Console.
• Discord - chat with other developers
• StackOverflow - use the google-maps tag

This is an automated message, feel free to ignore.

[kikoso]

Hi @amatanat ,

Could you try setting the shape directly in the Card Composable?

 Card(modifier = Modifier.fillMaxWidth(),
         shape = RoundedCornerShape(40.dp))

If this does not work, can you provide a snippet where this can be reproduced? Particularly interested in checking how the ModalBottomSheet is set.

[amatanat]

Hi @kikoso,

The suggestion above doesn't work. Here is a snipped with the ModalBottomSheet:

    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
    val sheetShape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp)

    ModalBottomSheet(
        onDismissRequest = {},
        sheetState = sheetState,
        shape = sheetShape,
        tonalElevation = 0.dp,
        dragHandle = null,
        windowInsets = ScaffoldDefaults.contentWindowInsets.exclude(ScaffoldDefaults.contentWindowInsets.only(WindowInsetsSides.Top)).exclude(ScaffoldDefaults.contentWindowInsets.only(WindowInsetsSides.Bottom)),
    ) {
        val cameraPositionState = rememberStreetViewCameraPositionState()

        StreetView(
            modifier = Modifier
                .clip(RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp))
                .height(150.dp),
            cameraPositionState = cameraPositionState,
            streetViewPanoramaOptionsFactory = {
                StreetViewPanoramaOptions().position(LatLng(1.1, 2.2), StreetViewSource.OUTDOOR)
            },
        )
    }