Jetpack Compose displays wrong colours

Viewed 1172

Has anyone else came across this? As seen in photo here my surface background is white, yet displayed on the preview and in app is a purple colour. Same applies to the text views, they should be a black and grey colour but displayed as purple.

My code below

@Composable
fun EditableSettingItem(setting: EditableSetting) {
Surface(color = Color(R.color.background),
        modifier = Modifier.fillMaxWidth().height(86.dp)) {

    Column (modifier = Modifier.fillMaxHeight()) {
        Text(text = setting.settingName,
            modifier = Modifier
                .padding(start = 19.dp, top = 14.dp)
                .wrapContentSize(),
            style = TextStyle(fontFamily = FontFamily(Font(R.font.quicksand_regular)),
                fontSize = 13.sp,
                color = Color(R.color.sub_text)))

        Row(modifier = Modifier
            .padding(start = 16.dp, end = 16.dp, top = 16.dp)
            .fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween) {
            Text(text = setting.action,
                modifier = Modifier.wrapContentSize(),
                style = TextStyle(fontFamily = FontFamily(Font(R.font.quicksand_regular)),
                    fontSize = 15.sp,
                    color = Color(R.color.main_text)))

            Image(painter = painterResource(id = R.drawable.ic_chevron_right),
                contentDescription = null,
                alignment = Alignment.CenterEnd)

        }
    }
}

}

1 Answers

You are using Color(R.color.background). Color() takes the hex value of a color, not an ID of a color resource.

Instead, try colorResource(R.color.background). That takes a color resource ID and returns the underlying color, wrapped in a Color object.

Related