workspace/bottomsheetdialog-compose

Android 9 에서 네비게이션바와 ui 겹침 문제

Closed this issue · 7 comments

keyboardseokmin commented

Info

  • 갤럭시 S22(Android13), S20(Android11) 정상
  • 갤럭시 S9(Android9) 버그 발생

Problem

  • BottomSheetDialog 와 하단 네비게이션바가 겹쳐서 ui 출력
workspace commented

image
Android 9 테스트 기기에서 샘플앱 기준 정상 동작하는 것 같습니다.

BottomSheetDialog를 사용 시 기본값과 다르게 property를 설정하신 부분이 있다면 공유해주실 수 있을까요?
BottomSheetDialog content Composable에서 navigationBarsPadding modifier를 사용하고 계신지도 궁금합니다.

workspace commented

사용 중이신 compose 버전과 라이브러리 버전도 부탁드립니다!

keyboardseokmin commented

navigationBarsPadding modifier 는 사용하고 있지 않습니다.
사용중인 compose 버전은 1.6.1 입니다 :)

keyboardseokmin commented 
BottomSheetDialog(
    onDismissRequest = {},
    properties = BottomSheetDialogProperties(
        dismissOnBackPress = false,
        dismissOnClickOutside = false,
        dismissWithAnimation = false,
        navigationBarProperties = NavigationBarProperties(
            color = Color.White
        ),
        behaviorProperties = BottomSheetBehaviorProperties(
            isFitToContents = true,
            isDraggable = false,
            isHideable = false,
        )
    )
) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .fillMaxWidth()
            .background(
                color = Color.White,
                shape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp)
            )
    ) {
        Spacer(modifier = Modifier.height(51.dp))
        Text(
            text = stringResource(id = R.string.permission_message_require),
            style = MaterialTheme.typography.permissionMainTop,
            textAlign = TextAlign.Center
        )
        Spacer(modifier = Modifier.height(39.dp))
        Row(
            modifier = Modifier
                .width(236.dp)
                .height(50.dp)
                .padding(start = 3.dp, top = 6.dp)
        ) {
            Column {
                Spacer(modifier = Modifier.height(2.dp))
                Image(
                    painter = painterResource(id = R.drawable.marker),
                    contentDescription = null,
                    modifier = Modifier.size(24.dp)
                )
            }
            Spacer(modifier = Modifier.width(13.dp))
            Column {
                Text(
                    text = stringResource(id = R.string.permission_location),
                    style = MaterialTheme.typography.permissionSub
                )
                Spacer(modifier = Modifier.height(4.dp))
                Text(
                    text = stringResource(id = R.string.permission_location_sub),
                    style = MaterialTheme.typography.permissionDetail
                )
            }
        }
        Spacer(modifier = Modifier.height(13.dp))
        Row(
            modifier = Modifier
                .width(236.dp)
                .height(50.dp)
                .padding(start = 3.dp, top = 6.dp)
        ) {
            Column {
                Spacer(modifier = Modifier.height(2.dp))
                Image(
                    painter = painterResource(id = R.drawable.call),
                    contentDescription = null,
                    modifier = Modifier.size(24.dp)
                )
            }
            Spacer(modifier = Modifier.width(13.dp))
            Column {
                Text(
                    text = stringResource(id = R.string.permission_number),
                    style = MaterialTheme.typography.permissionSub
                )
                Spacer(modifier = Modifier.height(4.dp))
                Text(
                    text = stringResource(id = R.string.permission_number_sub),
                    style = MaterialTheme.typography.permissionDetail
                )
            }
        }
        Spacer(modifier = Modifier.height(42.dp))
        Text(
            text = stringResource(id = R.string.permission_message_ask),
            style = MaterialTheme.typography.permissionMainBottom,
            textAlign = TextAlign.Center
        )
        Spacer(modifier = Modifier.height(59.dp))
        Button(
            onClick = onConfirm,
            colors = ButtonDefaults.buttonColors(backgroundColor = MaterialTheme.colors.buttonBlue),
            shape = RoundedCornerShape(10.dp),
            modifier = Modifier
                .width(328.dp)
                .height(54.dp)
        ) {
            Text(
                text = stringResource(id = R.string.button_confirm),
                style = MaterialTheme.typography.buttonConfirm,
                textAlign = TextAlign.Center
            )
        }
        Spacer(modifier = Modifier.height(40.dp))
    }
}
keyboardseokmin commented

다시 테스트 해본 결과 네비게이션바와 겹치는게 아니라 갤럭시S9 Android 9 버전 에서 content Composable의 최하단 Spacer가 동작하지 않는것 이였습니다. 현재 추측으로는 BottomSheetDialog 의 최대 높이가 화면의 70% 정도로 정해져 있어서 그 아래 부분은 잘리는것 같습니다.

keyboardseokmin commented

BottomSheetBehaviorProperties 의 state 를 Expanded 로 지정하여 해결하였습니다.

  • 👍1
  • ❤️1