테마 변경 (compose vs xml)

테마 변경을 진행하던 도중 테마를 변경하면 화면이 깜빡이는 듯한 현상이 나타났다.

screen-20231207-023735.mp4

이유는 테마를 변경하고 recreate()가 호출되면서 액티비티가 재생성돼서 깜빡이는 현상이 보이는 것이었다.

하지만 now in android 어플에서 테마 변경을 하면 깜빡이는 효과 없이 부드럽게 테마가 변경되는 것을 확인할 수 있다.

Screen_Recording_20231213_041355_Now.in.Android.mp4

그러면 now in android에서는 이 문제를 어떻게 해결했을까?

결론부터 말하자면 compose와 xml기반 레이아웃의 차이였다.

compose는 내부 상태 변화에 따라 UI를 업데이트 하고 변경된 부분만 업데이트 할 수 있는데 XML 기반 레이아웃은 테마를 변경하려면 액티비티를 다시 시작하거나(현재 적용중인 방법) 동적으로 스타일을 적용하는 방법을 택해야 한다고 한다.

근데 xml기반에서 런타임 중에 동적으로 스타일 적용하는게 각 뷰 스타일을 변경해야해서 xml 기반에서는 테마를 동적으로 변경하는게 까다롭다.

compose에서는 CompositionLocal를 통해 앱 전체 테마, 언어, 폰트 크기 등 값을 일관된 상태로 유지할 수 있고 로컬 값이 변경되면 자동으로 compose 컴포넌트들이 랜더링된다고 한다.

실제로 나우 인 안드로이드에서도 Theme.kt 파일에서 compositionLocal 값을 업데이트 함으로써 앱 전체 테마를 변경하는 것을 확인할 수 있다.

    CompositionLocalProvider(
        LocalGradientColors provides gradientColors,
        LocalBackgroundTheme provides backgroundTheme,
        LocalTintTheme provides tintTheme,
    ) {
        MaterialTheme(
            colorScheme = colorScheme,
            typography = NiaTypography,
            content = content,
        )
    }

https://github.com/android/nowinandroid/blob/b39f3f33d8f0025b987dacca6d65ad7ba5e37[…]ogle/samples/apps/nowinandroid/core/designsystem/theme/Theme.kt

위에서 알아본 바와 같이 xml기반에서 테마 변경시 recreate()가 필요한 것은 어쩔 수 없는 현상이다.

따라서 깜빡이는 현상을 최소화하기 위해 기존에 라디오 버튼으로 테마 변경을 하던 방식을 확인 버튼을 눌렀을 때 테마를 변경하도록 변경하였다.

Screen_Recording_20231213_041309_PriceGuard.mp4