[TIL-230524] Google Map 지도 위에 검색창 출력

안녕하세요 지난 포스팅보다 많이 늦었습니다.

이번 포스팅은 Google Map 상단에 검색창 생성하는 것을 공유해보려 합니다.

---

검색창 만들기

목표는 아래에 노란색으로 표시한 부분을 구현하려고 합니다.

간단하게 Google Map 위에 바로 TextField를 출력하는 방법이 있습니다.

 

1. GoogleMap 출력 후 바로 검색창 관련 코드 추가

2. 검색창 구현 코드 상세 구현

Box(modifier = Modifier.padding(10.dp)) {
        Card(
            modifier = Modifier.requiredHeight(50.dp),
            shape = RoundedCornerShape(10.dp), elevation = 6.dp
        ) {
            Row(
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier
                    .fillMaxSize()
                    .padding(8.dp)
            ) {
                Icon(Icons.Default.Menu, "Menu", Modifier.padding(10.dp))
                Text(text = "Search", modifier = Modifier.weight(2.0f))
            }
        }
    }

코드 설명

- Box : 여러 영역으로 겹쳐서 쌓을 수 있는 Layout

- Card : 내부에 여러 UI요소를 사용하기위해 선언하는 Container. 주로 곡선 속성이나 그림자를 표시할 수 있는 속성 등을 사용한다.

- Row : UI 요소들을 수평 배치할 수 있게 하는 Layout

- 검색창 왼쪽에 메뉴 출력을 위한 아이콘을 배치

- 검색창이라고 알려주기 위해 해당 UI에 "Search"를 표기

 

구현 화면

---

오늘은 간단하게 지도 위 검색창을 추가하는 코드를 작성해보았습니다

잘못된 내용이 있다면 댓글 부탁드리고, 내용이 좋았다면 공감, 구독 부탁드려요!