안드로이드 테마 적용 - andeuloideu tema jeog-yong

Question

안드로이드 스튜디오(Android Studio) 테마 변경하기

처음 안드로이드 스튜디오를 설치할 때 테마를 선택합니다. 생각없이 어두운 계열의 테마를 선택했더니 불편하네요. 에러나 경고성 표시들이 눈이 잘 띄지 않아서 한참을 바라봤습니다. 하얀색 배경에 익숙해서 그런지 아무래도 변경하는 것이 좋을 듯합니다.

▼ 제가 처음 설치했던 Darcula 테마 입니다. 회색 계열이라 눈이 덜 피곤하겠다고 생각했는데, 막상 사용하다가 보니 여러가지 불편하더군요. 그래서 주로 사용하던 하얀색 바탕의 테마를 사용하기로 했습니다.

▼ 테마 변경을 위해서는 세팅 화면으로 이동해야 합니다. 상단 File > Settings메뉴를 선택합니다.

▼ 세팅 화면에서 왼쪽 메뉴 목록으로 갑니다. 그리고 메뉴에서 Appearance & Behavior > Appearance를 선택합니다. 오른쪽 화면의 Theme 항목에 콤보 박스를 클릭해 보세요. 3가지 종류의 테마가 있을 겁니다.

▼ 3가지 중에서 Intellij 를 선택합니다. Theme 의 Intellij 버전의 모양은 다음과 같습니다. 우리가 기존에 주로 사용해 왔던 하얀색 바탕의 검은색 글자입니다. 위에서도 이야기했듯이 에러나 경고 표시를 잘 구분하지 못해서 Intellij 테마로 변경했습니다.

▼ 나머지 하나인 High Contrast 는 완전 흑백 모드입니다.

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

쭈욱 작업을 하고 마무리를 하는 시점이 되었을 때 배경색을 변경해 달라고 하거나, 글짜색이 마음에 들지 않는 다고 한다. 흑~... 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 이 미숙함을 지적해 주실꺼면 아래 댓글로 부탁 드립니다. 꾸벅^^;;

안드로이드 테마 추천 안드로이드 테마 다운 안드로이드 테마 만들기 갤럭시 테마 변경 안드로이드 머티리얼 테마 안드로이드 카톡테마