Junn_

https://developer.android.com/develop/ui/compose/setup?hl=ko

build.gradle.kts (Module: app)

    kotlinOptions {
        jvmTarget = "1.8"
    }
    
    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.13"
    }

위 안드로이드 공식 문서를 참조하여 option과 dependency를 추가해 준다.

Compose Activity 생성

    File - New - Compose - Empty Activity

class ComposeActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            KotlinMemoTheme {
                // A surface container using the 'background' color from the theme
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    KotlinMemoTheme {
        Greeting("Android")
    }
}

Compose는 @Preview 어노테이션을 통해 미리보기가 가능하며, 기존 xml과 동일하게 Split / Design을 통해 해당 View를 확인 할 수 있다.

 Render Problem

위 예시 코드를 보면 "Hello Android!" 가 보여야 할 것 같지만, render problem이 발생하여 검은색 화면으로만 표시 되었다.

Compose Compiler Version 과 Compatible Kotlin Version이 동일 해야하며, 위 에러메세지는

Compatible Kotlin Version -> 1.9.22 를 사용 하지만 Compose Compiler Version -> 1.5.13 으로 맞춰주고 있음으로 발생하는 에러이다.

해당 버전은 다음 문서에서 확인 가능하다.

https://developer.android.com/jetpack/androidx/releases/compose-kotlin

위 build.gradle 에서 설정한 composeOptions 의 kotlinCompilerExtensionVersion을 변경해 준다.

// Compatible Kotlin Version -> 1.9.22

// Compose Compiler Version -> 1.5.10

해당 설정이 끝난 후에도 Render Problem이 발생한다면, Api 레벨을 확인해 본다.

현재 IDE가 API 34를 지원하지 않고 있다고 한다.

https://stackoverflow.com/questions/77611812/android-compose-preview-render-problem-with-api-34-and-compose-ui-1-5-0

@Preview(apiLevel = 33)

Preview의 apiLevel을 33으로 지정하고 확인하면 Hello Android! 가 보이는 것을 확인 할 수 있다.