[Android/Kotlin] text를 표시하는 floating button (jetpack compose) + button 아래에 하얀색 공백이 보이는 문제

1. text만 표시하는 기본 floating button

FloatingActionButton(
    onClick = { },
    containerColor = Color.LightGrey,
    modifier = Modifier
        .clip(CircleShape)
        .size(dimensionResource(R.dimen.fab_size)) // 버튼 크기 고정
) {
    Text(
        "test",
        style = MaterialTheme.typography.labelSmall.copy(fontSize = 12.sp), // 텍스트 크기 줄이기
        textAlign = TextAlign.Center,
        maxLines = 1, // 한 줄로 제한
        overflow = TextOverflow.Ellipsis // 텍스트가 넘치면 줄임표 처리
    )
}

참고: Jetpack Compose에서 FloatingActionButton의 기본 형태는 원형이긴 하지만 Modifier.clip(CircleShape)을 추가하여 확실하게 원형으로 고정할 수 있다. text가 들어가면 모양이 일그러져서 이렇게 해줬음.

 

2. button 아래 (button과 그림자 사이) 무언가 하얀 영역이 보이는 문제

- 대부분 FloatingActionButton 내부에 기본적으로 적용된 여백이나 배경색 때문에 발생

- 단순히 텍스트 길이 때문에 FloatingActionButton 내부에서 여백이 추가되어 발생하는 경우, FloatingActionButton의 크기와 텍스트의 크기를 조정하면 됨

- 이걸로 안 될 경우 버튼의 elevation을 조정하거나 shadowElabation 옵션을 사용

1. 버튼의 elevation을 조정하기: 그림자와 관련된 문제 → elevation 값을 낮추거나 제거하는 방법을 시도
   1. shadowElevation 옵션 사용: Jetpack Compose에서 버튼 그림자의 elevation을 조정할 수 있음. 이를 통해 흰색 부분이 생기지 않도록 조정
   2. 버튼의 배경색 또는 여백 확인: 만약 elevation을 수정해도 해결되지 않는다면 버튼의 배경색과 버튼 사이의 여백을 없애거나 modifier = Modifier.padding(0.dp)을 사용해 여백을 제거해보기

FloatingActionButton(
    onClick = item.second,
    containerColor = Color.LightGrey,
    elevation = FloatingActionButtonDefaults.elevation(
        defaultElevation = 8.dp,
        pressedElevation = 12.dp
    )
) {
    Text(
        "test",
        textAlign = TextAlign.Center
    )
}

 

참고: elevation 눌러서 들어가보면 설정할 수 있는 게 네 가지 있음(hover.... 등)

elevation(0.dp)라고만 해줘도 됨

elevation(1.dp)까지해도 문제가 지속돼서 어쩔 수 없이 elevation(0.dp)까지 준 적이 있는데 floating button이 그림자가 없어지면 굉장히 심심해짐! 그래서 그림자를 따로 줄 수 있는지 찾아봤다.

당근 빠따 가능했음→ https://taetaegom.tistory.com/100