Rendering issues in Android Studio, code compiles fine

Question

I'm trying to solve for the case here - https://developer.android.com/codelabs/basic-android-kotlin-compose-composables-practice-problems?continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fandroid-basics-compose-unit-1-pathway-3%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fbasic-android-kotlin-compose-composables-practice-problems#3

Basically, I'm trying to create this as the final screen - enter image description here

The code that I have written compiles fine with no errors but it doesn't render in the design view. Sharing the code below -

package com.example.composequadrant

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.composequadrant.ui.theme.ComposeQuadrantTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ComposeQuadrantTheme {
                Quadrant(
                    modifier = Modifier
                )
            }
        }
    }
}



@Composable
fun Quadrant(modifier: Modifier = Modifier) {
    Column(
        modifier = modifier
    ) {
        Row(
            modifier = modifier
        ) {
            Card("0xFFEADDFF",stringResource(R.string.H1),stringResource(R.string.T1), modifier = modifier)
            Card("0xFFD0BCFF",stringResource(R.string.H2),stringResource(R.string.T2), modifier = modifier)
        }
        Row(
            modifier = modifier
        ) {
            Card("0xFFB69DF8",stringResource(R.string.H4),stringResource(R.string.T3), modifier = modifier)
            Card("0xFFF6EDFF",stringResource(R.string.H4),stringResource(R.string.T4), modifier = modifier)
        }
    }
}

@Composable
fun Card(bgcolor: String, h: String, t: String, modifier: Modifier){
    val intColor = Integer.parseInt(bgcolor)
    Column (
        modifier = modifier
            .background(Color(intColor))
            .width(LocalConfiguration.current.screenWidthDp.dp/2)
            .height(LocalConfiguration.current.screenHeightDp.dp/2)
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center

    ){
        Text(
            text = h,
            fontWeight = FontWeight.Bold,
            modifier = modifier
                .padding(bottom = 16.dp)
        )
        Text(
            text = t,
            modifier = modifier
        )
    }
}

@Preview(showBackground = true)
@Composable
fun QuadrantPreview() {
    ComposeQuadrantTheme {
        Quadrant()
    }
}

In the absence of any error, not sure what should I change in the code.

I suspect it has something to do with hex value instead of int value inside color function but when I try converting it to hex and pass that value, it throws an error stating int value is expected.

Answer 1

This is because you are trying to convert hex-coded color to Int by calling Integer.parseInt(bgcolor) which is wrong. It might work if you had a numeric value of color in string instead of hex.

Ideally, you should predefine Color constants instead of creating them at runtime. [example]

Although in some cases runtime Color might be required so for your case you can try replacing Int parsing code to val intColor = android.graphics.Color.parseColor(bgcolor)

Note: Your current hex string format does not support for above API, it supports #RRGGBB & #AARRGGBB format

FYI

1. Your application would have crashed with a runtime exception if you had run this code.

2. You can view why rendering failed in the preview under the Problems tab.