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.