CODEWITHSUNDEEP
androidandroid-jetpack-compose
alfietap
alfietap

Reputation: 2279

Jetpack Compose displays wrong colours

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)

        }
    }
}

}

Upvotes: 7

Views: 2964

Answers (1)

CommonsWare
CommonsWare

Reputation: 1007584

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.

Upvotes: 12

Related Questions