How to animate Google map to full screen in compose?

Question

My Android compose app displays maps in the column with a vertical scroll (like a preview). The map is displayed in the box and the fullscreen icon is at the bottom. How can I use the fullScreen map when the user clicks on the fullScreen icon?

I tried giving the map box fillMasSize modifier but it did not work.

Column(
        modifier = Modifier
            .verticalScroll(rememberScrollState())
            .fillMaxSize()
            .background(Color.Red.copy(alpha = 0.1f))
            .padding(innerPadding)
            .padding(horizontal = 5.dp)
    ) {

        Text(
            text = "Search",
            fontWeight = FontWeight.Bold,
            fontSize = 18.sp,
            modifier = Modifier.padding(5.dp)
        )

        SearchCard(
            state = searchVM,
            onEvent = searchVM,
        )

        Card(
            modifier = Modifier
                .padding(horizontal = 30.dp, vertical = 10.dp)
                .fillMaxWidth()
                .height(40.dp)
                ,
            elevation = CardDefaults.cardElevation(defaultElevation = 15.dp),
            colors = CardDefaults.cardColors(containerColor = Color.White)
        ) {
            Column(
                modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(text = "Search", textAlign = TextAlign.Center)
            }
        }

        Text(
            text = "Map",
            fontWeight = FontWeight.Bold,
            fontSize = 18.sp,
            modifier = Modifier.padding(start = 5.dp)
        )

        Box(
            modifier = Modifier
                .size(400.dp)
                .padding(10.dp)
                .clip(shape = RoundedCornerShape(10.dp))

        ) {
            GoogleMap(
                modifier = Modifier.fillMaxSize(),
                cameraPositionState = cameraPositionState
            )
            Box(
                modifier = Modifier
                    .align(Alignment.TopEnd)
                    .padding(10.dp)
            ) {
                Icon(imageVector = Icons.Default.Fullscreen, contentDescription = null,
                    modifier = Modifier
                        .size(30.dp)
                        .clickable {
                            isFullScreen = !isFullScreen
                        }
                )
            }
        }

        Text(
            text ="Hello",
            fontWeight = FontWeight.Bold,
            fontSize = 18.sp,
            modifier = Modifier.padding(start = 5.dp)
        )

        buttonList.list.chunked(2).forEach { rowItems ->
            ListCards(
                searchVM = searchVM,
                cardList = rowItems,
                navController = navController
            )
        }

        SocialMediaAndAboutUs()
    }
}

Answer 1

First of all, you have to define a separate view for your Regular map view and Full screen map view, one with this code and another one with GoogleMap composable with fillMaxSize, or you can hide/show other views with condition. then use a state variable to hide/show full screen MapView,

 var isFullscreen by remember { mutableStateOf(false) }

  if (isFullscreen) {
       FullscreenMap(onClose = { isFullscreen = false })
  } else {
       RegularMapView(onFullscreenClick = { isFullscreen = true })
  }

By this use can Toggle between this views. And if you need to Animated between full screen and regular view, then you can use Animated visibility for Animations.

 AnimatedVisibility(visible = isFullscreen) {
   FullscreenMap(onClose = { /* handle close */ })
 }

You can define any animation, when toggling between this view.

And if you want to smooth animate in GoogleMap Composable when changing camera view between co-ordinates then you can use this,

cameraPositionState.animate(CameraUpdateFactory.newLatLngZoom(initialLocation.value, 15f), durationMs = 500)