안드로이드 앱 만들기 동적 테마 변경 따라해 보기

앱을 만들어보다보니... 색상을 입히는 것도 테크니컬 해야 할 것 같은 생각이 들었다. 

쭈욱 작업을 하고 마무리를 하는 시점이 되었을 때 배경색을 변경해 달라고 하거나, 글짜색이 마음에 들지 않는 다고 한다. 흑~... theme 을 모르던 시절에는 하나하나 선택해서 font 도 지정하고 나름 color 도 지정해서 만들어 더니만.

이런이런... 

그럼 준비를 해 볼까 ?

먼저 theme.xml 을 이용해서 사용하고 싶은 style 을 만들어 본다.

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.Weroom714" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/default_color</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/white</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
        <item name="android:fontFamily">@font/poorstory_regular</item>
        <item name="android:background">@color/default_color</item>
        <item name="android:windowBackground">@color/default_color</item>
        <item name="android:colorBackground">@color/default_color</item>
        <item name="android:textColor">@color/white</item>
        <item name="colorAccent">@color/softBlue</item> <!--  -->
        <item name="android:textColorPrimaryDisableOnly">@color/white</item> <!-- checkbox text color -->
        <item name="android:textColorSecondary">@color/softBlue</item>
        <item name="android:buttonTint">@color/white</item><!-- checkbox 의 체크상자 색상 -->
    </style>
    <style name="Theme.Weroom714.purple" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_200</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/white</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
        <item name="android:fontFamily">@font/poorstory_regular</item>
        <item name="android:background">@color/purple_200</item>
        <item name="android:windowBackground">@color/purple_200</item>
        <item name="android:colorBackground">@color/purple_200</item>
        <item name="android:textColor">@color/white</item>
        <item name="colorAccent">@color/white</item> <!--  -->
        <item name="android:textColorPrimaryDisableOnly">@color/white</item> <!-- checkbox text color -->
        <item name="android:textColorSecondary">@color/softBlue</item>
        <item name="android:buttonTint">@color/white</item><!-- checkbox 의 체크상자 색상 -->
    </style>
    <style name="Theme.Weroom714.softBlack" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/softBlack</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/white</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
        <item name="android:fontFamily">@font/poorstory_regular</item>
        <item name="android:background">@color/softBlack</item>
        <item name="android:windowBackground">@color/softBlack</item>
        <item name="android:colorBackground">@color/softBlack</item>
        <item name="android:textColor">@color/white</item>
        <item name="colorAccent">@color/white</item> <!--  -->
        <item name="android:textColorPrimaryDisableOnly">@color/white</item> <!-- checkbox text color -->
        <item name="android:textColorSecondary">@color/softBlue</item>
        <item name="android:buttonTint">@color/white</item><!-- checkbox 의 체크상자 색상 -->
    </style>
    <style name="Theme.Weroom714.darkBlue" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/darkBlue</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/darkBlue</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/white</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
        <item name="android:fontFamily">@font/poorstory_regular</item>
        <item name="android:background">@color/darkBlue</item>
        <item name="android:windowBackground">@color/darkBlue</item>
        <item name="android:colorBackground">@color/darkBlue</item>
        <item name="android:textColor">@color/white</item>
        <item name="colorAccent">@color/white</item> <!--  -->
        <item name="android:textColorPrimaryDisableOnly">@color/white</item> <!-- checkbox text color -->
        <item name="android:textColorSecondary">@color/softBlue</item>
        <item name="android:buttonTint">@color/white</item><!-- checkbox 의 체크상자 색상 -->
    </style>
    <style name="Theme.Weroom714.darkGreen" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/darkGreen</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/darkGreen</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/white</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
        <item name="android:fontFamily">@font/poorstory_regular</item>
        <item name="android:background">@color/darkGreen</item>
        <item name="android:windowBackground">@color/darkGreen</item>
        <item name="android:colorBackground">@color/darkGreen</item>
        <item name="android:textColor">@color/white</item>
        <item name="colorAccent">@color/white</item> <!--  -->
        <item name="android:textColorPrimaryDisableOnly">@color/white</item> <!-- checkbox text color -->
        <item name="android:textColorSecondary">@color/softBlue</item>
        <item name="android:buttonTint">@color/white</item><!-- checkbox 의 체크상자 색상 -->
    </style>
    <style name="Theme.Weroom714.Loading" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:background">@color/default_color</item>
        <item name="android:windowBackground">@color/default_color</item>
        <item name="android:colorBackground">@color/default_color</item>
        <item name="colorPrimary">@color/default_color</item>
        <item name="android:textColor">@color/softBlue</item>
        <item name="android:fontFamily">@font/poorstory_regular</item>
    </style>
    <style name="ButtonText" parent="@android:style/Widget.Button">
        <item name="android:textColor">@color/white</item>
        <item name="android:background">@drawable/background_btn</item>
    </style>
    <style name="CustomRadioButton" parent="Theme.AppCompat.Light">
        <item name="colorAccent">@color/white</item>
        <item name="colorControlNormal">@color/default_color</item>
    </style>
    <style name="Theme.Weroom714.Transparent" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:textColor">@color/softBlue</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowAnimationStyle">@android:style/Animation</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:fontFamily">@font/poorstory_regular</item>
    </style>
    <style name="AppCompatAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
        <item name="colorAccent">@color/softBlue</item>
        <item name="android:textColor">@color/softBlue</item>
        <item name="android:textColorPrimary">@color/white</item>
        <item name="android:background">@color/default_color</item>
    </style>
</resources>

이렇게 길어야 하는 생각이 들기는 하지만, 아직 조금의 미숙(?)함이 있는 관계로 다가 비슷한 sylte 을 복사해서 여러개 만들었다.

기본테마 Theme.Weroom714 부터 Theme.Weroom714_darkGreen, Theme.Weroom714_darkBlue, Theme.Weroom714_softBlack 까지 사용자는 4개의 색상 조합을 요청했다.  자세히 살펴 보면 다른 건 없고, 배경색만 다르게 지정하는 구성이다. 

이걸 어떻게 지정하는 건가 ?

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        sp = getSharedPreferences(getPackageName(), MODE_PRIVATE);
        if (sp.getString("THEME", "default_color").equals("darkBlue")) {
            setTheme(R.style.Theme_Weroom714_darkBlue);
        } else if (sp.getString("THEME", "default_color").equals("darkGreen")) {
            setTheme(R.style.Theme_Weroom714_darkGreen);
        } else if (sp.getString("THEME", "default_color").equals("softBlack")) {
            setTheme(R.style.Theme_Weroom714_softBlack);
        } else {
            setTheme(R.style.Theme_Weroom714);
        }
        binding = ActivityMainBinding.inflate(getLayoutInflater());
        View view = binding.getRoot() ;
        setContentView(view);
        
  }

적용하려는 activity 의 onCreate 에 위와 같이 적용하면 된다. 여기서 주의할 것은 viewBinding 을 하고 있기 때문에 그 위치를 잡는데, 테스트를 몇차례해서 정한건데, layout 을 binding 하기전에 setTheme()을 이용해서 먼저 설정하고 binding을 해야 실행 했을때 적용이 되는 것을 확인할 수 있었다.

이렇게 선택적으로 배경색을 변경하는 앱을 만들어 볼 수 있었다.

 

오늘도 즐~ 코딩...

 

p.s 이 미숙함을 지적해 주실꺼면 아래 댓글로 부탁 드립니다. 꾸벅^^;;