Android Studio Question posted in
The official documentation can be found here.

Android Studio failed to render code：Render problem

I’m a beginner in Android, I’m currently trying to develop in the Kotlin, and I’m using Jetpack Compose.

It’s a very simple page, but Android Studio doesn’t render renderings properly

This is the error page

Here’s the code

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainUi() {
    val context = LocalContext.current
    val backgroundColor = ContextCompat.getColor(context, R.color.yellow)
    val subBackgroundColor = ContextCompat.getColor(context, R.color.milk_white)
    val topBarTitle = ContextCompat.getString(context, R.string.home_title)
    val topAppBarColors = TopAppBarColors(
        containerColor = Color(backgroundColor),
        titleContentColor = Color.White,
        scrolledContainerColor = Color(backgroundColor),
        navigationIconContentColor = Color(backgroundColor),
        actionIconContentColor = Color(backgroundColor)
    )
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .fillMaxSize()
            .background(Color(backgroundColor))
    ) {
        TopAppBar(
            title = { Text(text = topBarTitle) },
            colors = topAppBarColors
        )
        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(Color(subBackgroundColor))
        ) {
            Text(
                text = "This is the content of the page",
                modifier = Modifier
                    .padding(16.dp)
                    .align(Alignment.CenterHorizontally)
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
fun MainPreview() {
    WPJ_KotlinTheme {
        MainUi()
    }
}

If anyone knows the reason or solution, please tell me, thank you very much ! ! !

I tried to clean up and rebuild the project

And I updated Android Studio

Android Studio version

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you for your responses

    I tried the following two changes

    // val topBarTitle = ContextCompat.getString(context, R.string.home_title)
val topBarTitle = context.getString(R.string.home_title)

// val topAppBarColors = TopAppBarColors()
val topAppBarColors = TopAppBarDefaults.topAppBarColors()

    The problem was solved successfully


  2. 0

    To know exact problem you can click on the "Render issues" text

    enter image description here

    In this case the problem was a internal problem of compose. Problem is happening because you are not using the things as you are supposed to in Compose.

    enter image description here

    You should use "colorResource" & "stringResource" methods for reading colors and strings and other similar methods to get values from R class.

    Here is a working code

    @OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainUi() {
    val backgroundColor = colorResource(id = R.color.yellow)
    val subBackgroundColor = colorResource(id =  R.color.milk_white)
    val topBarTitle = stringResource(id = R.string.home_title)
    val topAppBarColors = TopAppBarColors(
        containerColor = backgroundColor,
        titleContentColor = Color.White,
        scrolledContainerColor = backgroundColor,
        navigationIconContentColor = backgroundColor,
        actionIconContentColor = backgroundColor
    )
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .fillMaxSize()
            .background(backgroundColor)
    ) {
        TopAppBar(
            title = { Text(text = topBarTitle) },
            colors = topAppBarColors
        )
        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(subBackgroundColor)
        ) {
            Text(
                text = "This is the content of the page",
                modifier = Modifier
                    .padding(16.dp)
                    .align(Alignment.CenterHorizontally)
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
fun MainPreview() {
        MainUi()
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search