[Android / Compose] 기존 XML 기반 프로젝트에 Compose 도입하기

지겹도록 사용하던 Kotlin Extensions를 모두 걷어내고, 기존 XML 기반 프로젝트에 코틀린 버전을 업그레이드하여 Compose를 도입하게 되었습니다! 이번에는 XML 기반 프로젝트에서 중간에 Compose를 끼워 넣는 과정을 설명드리고자 합니다.

 

코틀린 & Compose 버전 업데이트

제 프로젝트는 코틀린 버전 1.8.0으로 설정되어 있어 해당 버전과 호환이 가능한 Compose 버전 확인이 필요했습니다.

아래 주소에서 각 코틀린 버전에 대한 컴포즈 버전 확인이 가능합니다. 만일 리스트에 없는 버전이라면 코틀린 버전에 대한 업그레이드가 선행되어야 하겠습니다. (만일 1.7.22 코틀린 버전이라면 1.4.0 컴포즈 활용이 가능한 1.8.0 코틀린 버전으로 마이그레이션 해주세요.)

https://developer.android.com/jetpack/androidx/releases/compose-kotlin?hl=ko

Compose와 Kotlin의 호환성 지도  |  Android 개발자  |  Android Developers

 

제가 사용 중인 1.8.0이 컴포즈 1.4.0과 호환되어 그에 맞게 앱 수준의 build.gradle 설정을 진행합니다.

buildFeatures {
    viewBinding = true
    compose true
}

compileOptions {
    sourceCompatibility = JavaVersion.VERSION_17
    targetCompatibility = JavaVersion.VERSION_17
}

kotlinOptions {
    jvmTarget = JavaVersion.VERSION_17.toString()
}
composeOptions {
    kotlinCompilerExtensionVersion = "1.4.0"
}

 

Compose 종속성 추가

target SDK 33, Kotlin version 1.8.0을 고려하여 아래와 같이 종속성을 추가했습니다.

    //Compose UI
    implementation 'androidx.activity:activity-compose:1.4.0'
    implementation 'androidx.compose.material:material:1.1.1'
    implementation 'androidx.compose.animation:animation:1.1.1'
    implementation 'androidx.compose.ui:ui-tooling:1.1.1'
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.4.1'
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.2'
    implementation platform('androidx.compose:compose-bom:2023.03.00')
    implementation 'androidx.compose.ui:ui'
    implementation 'androidx.compose.ui:ui-graphics'
    implementation 'androidx.compose.ui:ui-tooling-preview'
    implementation 'androidx.compose.material3:material3'
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.1.1'
    implementation "com.google.android.material:compose-theme-adapter:1.1.1"
    implementation "com.google.accompanist:accompanist-appcompat-theme:0.16.0"
    androidTestImplementation platform('androidx.compose:compose-bom:2023.03.00')
    debugImplementation 'androidx.compose.ui:ui-test-manifest'

이제 Sync 이후 Compose에 접근할 수 있게 됩니다.

 

XML에서 Compose View 사용하기

Compose View는 Android Jetpack Compose UI를 호스팅 하기 위한 Android View입니다. 이를 통해 기존 Android View 계층 구조에 Compose를 접목시킬 수 있습니다.

 

아래의 XML TextView 코드를 Compose View를 활용하여 전환해 보겠습니다.

<TextView
    android:id="@+id/topTitleText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:layout_marginLeft="50dp"
    android:fontFamily="@font/bold"
    android:text="@string/settings"
    android:textColor="@color/primary_text"
    android:textSize="18dp" />

 

text와 font에 대한 부분 제외하고는 그대로 ComposeView에 선언했습니다.

<androidx.compose.ui.platform.ComposeView
    android:id="@+id/topTitleText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:layout_marginLeft="50dp"/>

 

Kotlin에서 Composable로 UI 구성

이제 Activity 코드에서 컴포즈 UI에 대한 세밀한 구현을 진행하면 되겠습니다.

@Composable
fun dpToSp(dp: Dp) = with(LocalDensity.current) { dp.toSp() }

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = ActivitySettingBinding.inflate(layoutInflater)
    setContentView(binding.root)
    onBackPressedDispatcher.addCallback(this@SettingsActivity, onBackPressedCallback)

    binding.topTitleText.setContent {
        AppCompatTheme {
            Text(
                fontSize = dpToSp(18.dp),
                fontFamily = FontFamily(Font(R.font.bold)),
                text = stringResource(id = R.string.settings),
                color = colorResource(id = R.color.primary_text))
        }
    }
}

이런 식으로 점점 부분적인 Compose 도입을 진행해 나갈 수 있겠습니다.