Compose BottomBar transparent background - 모서리 둥글게

BottomAppBar 모서리 둥글게

BottomAppBar서 모서리를 둥글게 만들기 위해서는 Modifier.clip을 사용할 수 있다.

아래 코드처럼 RoundedCornerShape(topStart = 40.dp, tepEnd = 40.dp)를 적용하여 위쪽의 왼쪽과 오른쪽 모서리를 둥글게 만들 수 있다. 

Scaffold(bottomBar = {
    BottomAppBar(
        modifier = Modifier
            .background(Color.Transparent)
            .clip(RoundedCornerShape(topStart = 40.dp, topEnd = 40.dp)),
        containerColor = Color.Green
    ) {
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            IconButton(onClick = {}) { Icon(Icons.Filled.Add, contentDescription = "add") }
            IconButton(onClick = {}) { Icon(Icons.Filled.Add, contentDescription = "add") }
            IconButton(onClick = {}) { Icon(Icons.Filled.Add, contentDescription = "add") }
        }
    }
}) { innerPadding ->
    Column(
        modifier = Modifier
            .padding(innerPadding)
            .fillMaxSize()
            .background(Color.Yellow)
    ) {
    }
}

그림1. 실행 화면

하지만 실행 화면을 BottomAppBar서 둥글어진 부분이 흰색으로 나타나는 것을 볼 수 있다.

본래 의도한 대로라면 Content의 배경색인 노란색으로 보였어야 하지만 

BottomAppBar의 배경색을 Color.Transparent를 적용하여도 해결이 되지 않는다.

이러한 문제가 발생하는 이유는 BottomAppBar가 정의된 방식 때문이며 이를 직접 수정할 수는 없다.

그래서 이를 해결하기 위한 방법은 바로 BottomAppBar을 사용하지 않는 것이다.

Scaffold { innerPadding ->
    Box(
        modifier = Modifier
            .padding(innerPadding)
            .fillMaxSize()
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.Yellow)
        ) { }
        Surface(
            modifier = Modifier
                .height(100.dp)
                .clip(RoundedCornerShape(topStart = 40.dp, topEnd = 40.dp))
                .align(Alignment.BottomCenter),
            color = Color.Green
        ) {
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                IconButton(onClick = {}) { Icon(Icons.Filled.Add, contentDescription = "add") }
                IconButton(onClick = {}) { Icon(Icons.Filled.Add, contentDescription = "add") }
                IconButton(onClick = {}) { Icon(Icons.Filled.Add, contentDescription = "add") }
            }
        }
    }
}

그림2. 변경 후 결과

content 영역을 Box로 감싼 후 본래 content에서

정의한 BottomBar(여기서는 Surface)를 아래에 배치해주면 그림2와 같이 처음에 의도했던 대로 나타나는 것을 확인할 수 있다.

📌 여기서 주의할 점은 content와 bottombar는 겹쳐 있는 것이기 때문에 content의 내용들이 bottomBar와 겹치지 말아야 된다면 적절한 padding을 설정해야 한다.

참고

전체 코드 | Github