[Android/Compose]: Button에 색상(Color) 지정하기

Button에 색상 지정

Button Composable 내부를 들여다보면 colors를 지정할 수 있다. 해당 파라메터로 ButtonColors 클래스를 넘겨주면 됩니다.

기본값은 ButtonDefaults.buttonColors()로 되어있는데 구현 로직을 따라가다보면 시스템 기본 컬러로 지정되어 있는 것을 확인할 수 있습니다.

@Composable
fun Button(
	... 
	colors: ButtonColors = ButtonDefaults.buttonColors(),
    ...
)

@Composable
    fun buttonColors(
        containerColor: Color = FilledButtonTokens.ContainerColor.toColor(),
        contentColor: Color = FilledButtonTokens.LabelTextColor.toColor(),
        disabledContainerColor: Color =
            FilledButtonTokens.DisabledContainerColor.toColor()
                .copy(alpha = FilledButtonTokens.DisabledContainerOpacity),
        disabledContentColor: Color = FilledButtonTokens.DisabledLabelTextColor.toColor()
            .copy(alpha = FilledButtonTokens.DisabledLabelTextOpacity),
    ): ButtonColors = ButtonColors(
        containerColor = containerColor,
        contentColor = contentColor,
        disabledContainerColor = disabledContainerColor,
        disabledContentColor = disabledContentColor
    )

ButtonColors 의 구현 로직

그렇다면 우리는 Button에 직접 컬러를 적용하기 위해서 ButtonColors 인스턴스를 생성하여 Button 의 colors 파라메터로 집어넣어주기만 하면 끝입니다.

다만 ButtonColors 는 internal constructor로 해당 클래스의 생성자가 같은 모듈 내부에서만 호출할 수 있습니다. 그렇기에 해당 클래스는 같은 모듈 내부에서만 인스턴스화 할 수 있고, 그 외부에서는 인스턴스를 생성할 수 없습니다.

@Immutable
class ButtonColors internal constructor(
    private val containerColor: Color,
    private val contentColor: Color,
    private val disabledContainerColor: Color,
    private val disabledContentColor: Color,
)

따라서 위의 기본값에서 사용된 ButtonDefaults.buttonColors()를 통해 아래 4가지 컬러를 지정해야합니다.

• containerColor : containerColor는 버튼의 배경색을 지정합니다. 이 색상은 버튼이 활성화되어 있을 때 (즉, 클릭 가능한 상태일 때) 적용됩니다.
• contentColor: contentColor는 버튼 내용의 색상을 지정합니다. 이 색상은 버튼의 텍스트나 아이콘 같은 내부 요소에 적용됩니다. containerColor와 잘 어울리도록 설정되어야 하며, 대조가 되어야 사용자가 쉽게 구분할 수 있습니다.
• disabledContainerColor: disabledContainerColor는 버튼이 비활성화된 상태일 때의 배경색을 지정합니다. 이 색상은 버튼이 클릭할 수 없는 상태일 때 사용됩니다.
• disabledContentColor:disabledContentColor는 버튼이 비활성화된 상태일 때 내용의 색상을 지정합니다. 버튼 내의 텍스트나 아이콘 등이 이 색상을 사용하게 됩니다. 보통은 disabledContainerColor와 어느 정도 대조를 이루되, 비활성화 상태임을 뚜렷이 나타낼 수 있도록 설정됩니다.

실제 사용 예제

실제 사이드 프로젝트에서 사용하고 있는 버튼으로 ButtonDefaults.buttonColors() 를 사용하여 버튼에 색상을 지정한 예제입니다.

Button(
        modifier = modifier,
        colors = ButtonDefaults.buttonColors(
            containerColor = Main100,
            contentColor = Color.White,
            disabledContainerColor = Gray200,
            disabledContentColor = Color.White,
        ),
        onClick = {
            onReviewRegisterClicked()
        },
        shape = RoundedCornerShape(12.dp),
        content = {
            Text(
                text = stringResource(R.string.register),
                style = TextStyle(
                    fontSize = 16.sp,
                    fontWeight = FontWeight(500),
                    color = Color.White,
                )
            )
        }
    )

• Enabled
  
• Disabled
  

XML 에서는 BackgrdundTint만 적용해주면 되었었는데, Compose는 기본적인 색상 변경하는 코드마저도 구글링을 해야한다니... 역시 아직 배울 점이 너무나도 많은 것 같습니다.