[Compose] Solving Custom TopAppBar Height Issues

 

뒤로가기  버튼만 있는 TopAppBar를 아래처럼 작성하여 사용하고 있었는데

Preview에서는 문제 없이 보여지지만 Device에서는 TopAppBar의 높이가 반절이상 줄어드는 문제가 발생했습니다.

 

아래는 변경 전 코드입니다.

TopAppBar(
    modifier = Modifier
        .fillMaxWidth()
        .height(54.dp),
    title = { Text(text = "") },
    navigationIcon = {
        Box(
            modifier = Modifier
                .size(48.dp, 48.dp)
                .noRippleClickable(onBackPressed),
        ) {
            Icon(
                modifier = Modifier.size(24.dp, 24.dp),
                imageVector = ImageVector.vectorResource(id = R.drawable.ic_round_arrow_back),
                contentDescription = "Back"
            )
        }
    },
    colors = TopAppBarDefaults.topAppBarColors().copy(
        containerColor = DaysTheme.colors.bgDefault,
        navigationIconContentColor = DaysTheme.colors.grey500
    )
)

 

결론 부터 말씀드리자면, Modifier.heightIn(min = 54.dp) 이렇게 최소 높이 값을 정해주면 정상적으로 작동하는 것을 확인할 수 있었습니다. 

 

그냥 height로 했을 때는 왜 줄어드는 현상이 나타나는 지 아직 찾지 못해서 추후 알게된다면 추가하도록 하겠습니다.