Tag Archives: 안드로이드 테마

안드로이드 테마 기능 적용하기

안드로이드 10부터 시스템 수준에서 어두운 테마(Dark theme)를 지원하기 시작했고, 이제 안드로이드 앱들은 테마(밝은/어두운/시스템) 기능을 필수적으로 지원해야 할 때이다. 어두운 테마로 변경하면, 앱에서 사용하는 컴포넌트의 색을 어두운 계열로 변화 시켜 시인성을 높이고, 사용자 눈의 피로도를 줄이고, 배터리의 사용을 절약시키는 이점도 부가적으로 얻을 수 있다.

  
– 안드로이드 10 에뮬레이터의 설정 화면에서 어두운 테마 켜기

안드로이드 10에서 사용자가 설정 화면에서 어두운 테마를 선택했다면, 설치된 앱들도 어두운 색상으로 동작하길 원할 것이기에 사용자에게 일관적인 UI/UX를 경험할 수 있게 하기에 테마 기능 적용은 중요한 UX 요구사항이라고 볼 수 있게 되었다. 테마 변경을 살펴보기 전에 안드로이드 화면의 색상값에 대해서 한번 살펴보자.


– 안드로이드 화면에서의 테마 색상 요소 값

위 테마 색상은 스타일 파일(/res/styles.xml)에서 아래와 같이 확인할 수 있다.

앱에서 AppCompat 테마를 사용하는 경우에는, parent=”Theme.AppCompat.DayNight”로 선언을 해야 하고, MaterialComponents 테마를 사용하는 경우, parent=”Theme.MaterialComponents.DayNight”로 선언해야 한다.

이제 테마 기능을 추가해 보자. 테마 기능을 추가하는데 필요한 구성은 다음과 같다:

– 테마별 색상 변경을 위한 폴더 구조
– 스타일 파일(styles.xml)의 변경 요소들
– 테마 변경을 위한 코드 작성
– 테마 변경과 관련된 이슈들

1. 테마별 색상 변경을 위한 폴더 구조

1.1 테마 파일과 색상 파일

안드로이드 앱에서 기본값으로 읽는 테마와 색상 정보는 /res/values/ 폴더에 스타일 파일(styles.xml)과 색상 파일(colors.xml)에 선언한다. 어두운 테마가 읽는 테마 정보와 색상 정보는 /res/values-night/ 폴더에 같은 파일 이름으로 선언한다. 많은 경우에는 /res/values-night/ 폴더에 색상 파일만 위치시켜도 테마 기능이 잘 동작한다.

1.2 이미지 파일

만약 밝은 테마와 어두운 테마별로 보이는 이미지가 다른 경우, 밝은 테마에 보이는 이미지는 drawable-..hdpi 폴더에 어두운 테마에 보이는 이미지는 darwable-night-…hdpi 폴더에 넣어준다. mipmap을 사용하는 경우에도 drawable과 같은 패턴으로 mipmap-night-… 폴더를 사용하면 된다.

테마 변경 결과 화면을 먼저 살펴보자.

   

이 화면과 예제 소스는 https://github.com/mcsong/ThemeDemo 에서 확인할 수 있다.

2. 스타일 파일에서의 변경 요소들

스타일 파일(styles.xml)에서의 요소들에 대해서 살펴보자. 안드로이드 테마를 변경하는 경우에 색상 파일(colors.xml)만 변경해도 잘 동작할 것이다. 하지만, 시작 화면(Splash Screen) 테마의 경우에는 안드로이드 10 이후부터 어두운 테마에 어울리는 스타일을 읽어 들여야 하므로 /res/values-night/ 의 스타일 파일에 시작 화면 테마도 선언해야 한다.

시작 화면 테마는 앱이 화면(MainActivity가 주로 로딩)을 보이기 전에 보이는 화면의 구성이라고 보면 된다. 안드로이드 앱을 실행하면 런타임이 앱을 읽어 들이는 시간에 사용자가 느리다는 것을 인지하게 되고, 이것을 개선하는 방법으로 시작 화면 테마 사용을 권장하고 있다. 간단한 예제는 아래의 링크에서 확인할 수 있다.

시작 화면 테마 구성 방법 : https://android.jlelse.eu/launch-screen-in-android-the-right-way-aca7e8c31f52

예제 프로젝트에서도 시작 화면 테마를 사용하고 있으니, 예제 프로젝트의 소스를 살펴보면 시작 화면 테마를 어떻게 사용하고 있는지 알 수 있다. 이제 스타일 파일을 살펴보자.

    
    




– /res/values/styles.xml 파일

이 파일은 밝은 테마를 구성하는 스타일 파일이고, 밝은 계열의 색으로 배경을 구성한다. 그리고, android:windowLightNavigationBar의 값을 true로 설정해서 안드로이드 기기 아래의 컨트롤 버튼을 잘 보이게 한다.

    
    






– /res/values-night/styles.xml 파일

이 파일은 어두운 테마를 구성하는 스타일 파일이고, 어두운 계열의 색으로 배경을 구성한다. 그리고, android:windowLightNavigationBar의 값을 false로 설정해서 아래 컨트롤 버튼을 잘 보이게 한다.

3. 테마 변경을 위한 코드 작성

테마 변경을 위한 소스 코드는 https://github.com/mcsong/ThemeDemo을 기준으로 살펴보자.

package net.sjava.examples.theme;
import android.app.Application;

public class ThemeApp extends Application {

  @Override
  public void onCreate() {
    super.onCreate();

    ThemeUtil.applyTheme(this);
  }
}

– ThemeApp.java 소스 코드

이 클래스는 어플리케이션 소스를 상속받아서, 앱을 실행하면 가장 먼저 실행해서 예제 앱에서 변경한 테마를 읽게 한다.

package net.sjava.examples.theme;

import android.content.Context;
import android.os.Build;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatDelegate;

public class ThemeUtil {

  static final String THEME_KEY = "theme_value";

  public static void applyTheme(@NonNull Context context) {
    int option = SharedPrefsUtil.getInt(context, THEME_KEY, 0);
    applyTheme(context, option);
  }

  // 0 : light, 1 : dark, 2 : daytime
  public static void applyTheme(@NonNull Context context, int option) {
    // 테마 값 저장
    SharedPrefsUtil.putInt(context, THEME_KEY, option);

    if (option == 0) {
      AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
      return;
    }

    if (option == 1) {
      AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
      return;
    }

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
      AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM);
    } else {
      AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_AUTO_BATTERY);
    }
  }
}

– ThemeUtil.java 소스 코드

이 소스는 실제로 테마를 변경하는 소스로, 테마를 변경하면 변경된 값을 저장한다. 시스템에 따라 테마를 활성화시키는 것을 살펴보면, 안드로이드 10에서는 설정에서 어두운 테마를 활성화시킬 수 있고, 안드로이드 9와 이하 버전에서는 배터리가 절전 모드인 경우 또는 현재 시간이 저녁시간대인 경우에 어두운 테마가 활성화 된다. 그래서 안드로이드 10에서는 AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM의 값으로, 안드로이드 10 이하 버전에서는 AppCompatDelegate.MODE_NIGHT_AUTO_BATTERY의 값으로 시스템에 적용된 테마를 앱에 적용할 수 있다.

    findViewById(R.id.theme_light_button).setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        ThemeUtil.applyTheme(v.getContext(), 0);
      }
    });

    findViewById(R.id.theme_dark_button).setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        ThemeUtil.applyTheme(v.getContext(), 1);
      }
    });

    findViewById(R.id.theme_system_default_button).setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        ThemeUtil.applyTheme(v.getContext(), 2);
      }
    });

– 테마를 변경하는 소스

예제 프로젝트의 MainActivith.java 소스를 살펴보면, 위의 코드를 확인할 수 있다. 개별 버튼을 누르면 테마가 변경되는 것을 확인할 수 있다.

4. 테마 변경과 관련된 이슈들

이제 앱에서 테마를 쉽게 변경할 수 있다. 하지만, 이것도 기존의 앱에서 업그레이드하다 보면 문제가 발생 할 수 있고, 테마 기능을 추가하면서 문제가 된 이슈에 대해서 살펴보자.

우선, 코드상에서 안드로이드 10 버전에 추가된 API를 확인하려면, compileSdkVersion 29로 컴파일 SDK 버전을 맞추면 된다. 그리고, 빌드하는 앱의 SDK 버전은 28 또는 29로 맞추면 되겠다. 혹시 29를 사용하면 문제가 있는 경우에는 targetSdkVersion을 28로 설정해서 컴파일해도 된다. 그래서 빌드 파일(build.xml)에 아래와 같이 사용하면 된다.

android {
   compileSdkVersion 29

   defaultConfig {
      applicationId "net.sjava.appstore.demo"
      minSdkVersion 15
      targetSdkVersion 28
      versionCode 1
      versionName "1.0"
   }
......
}

안드로이드 앱에서 테마를 변경하려면 액티비티(Activity)를 다시 생성해야 한다. 그래서, 프레그먼트(Fragment)에서 테마를 변경하려면 테마를 변경하고, 액티비티의 recreate() 메서드를 수동으로 호출해야 했다. 최신 androidx.appcompat:appcompat:1.1.0 를 사용하면, 액티비티의 recreate() 메서드를 호출하지 않아도 액티비티를 다시 생성해서 테마 변경을 바로 확인할 수 있게 한다.

그리고, 아래와 같이 configChange의 uiMode를 선언한 경우에는 시스템에서 어두운 테마로 변경해도 액티비티의 recreate()가 호출되지 않기 때문에 주의해야 한다.


마지막으로 외부 라이브러리를 사용한 경우 테마별 사용한 색이 달라서 이질감이 들 수 있는 경우가 있다. 사용하는 라이브러리에서 안드로이드 기본색을 사용하지 않고 자신의 색을 사용하는 경우에 이런 문제가 발생할 수 있다. 이 경우 라이브러리 소스를 가져와서 소스를 수정해서 사용하는 방법으로 해결하면 된다.

+ 예제 프로젝트 설명

+ reference

– 테마 예제: https://github.com/mcsong/ThemeDemo
– 앱 시작 시간: https://developer.android.com/topic/performance/vitals/launch-time#java
– 머티리얼 디자인 적용: https://developer.android.com/guide/topics/ui/look-and-feel?hl=ko
– 스타일 및 테마: https://developer.android.com/guide/topics/ui/look-and-feel/themes?hl=ko
– 어두운 테마: https://developer.android.com/guide/topics/ui/look-and-feel/darktheme?hl=ko

v7 Support Preference 라이브러리 사용하기

구글의 안드로이드는 매년 새로운 버전이 나오면서 새로운 기능을 제공하는 API를 발표한다. 새로운 버전이다 보니 이전의 버전에서 새로운 기능 또는 UI 등을 사용하기 힘든 상황이다. 그래서 구글은 Android Support 라이브러리(Support 라이브러리)들을 제공해서 하위 버전에서도 상위 버전의 기능과 UI를 사용할 수 있게 지원한다. 그래서 안드로이드 개발자들은 기본 API와 더불어 Support 라이브러리를 살펴봐야 하는 이중고(?)를 겪게 있다. 이 글에서는 Support 라이브러리 중의 하나인 v7 버전의 preference 라이브러리를 사용하는 방법과 약간의 팁을 살펴보자.

preference_01
그림 1, Android SDK Manager 툴 일부

그림 1에서 Android Support Library는 23.1.1 버전이 설치된 것을 확인할 수 있다. 그래서 Support 라이브러리 버전은 v4든 v7이든 23.1.1 버전을 사용한다는 것도 알 수 있다. 이 라이브러리는 %android_home%\extras\android\support 폴더에서 확인할 수 있다.

1. 환경설정

그래들(Gradle) 빌드 파일(Build.gradle)에 아래와 같은 의존 라이브러리가 필요하다.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])

    compile 'com.android.support:support-v4:23.1.1'
    compile 'com.android.support:recyclerview-v7:23.1.1'
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.android.support:preference-v7:23.1.1'
}

2. Preference xml 파일 추가

안드로이드에서 설정 화면 역시 xml 파일로 구성한다. 다른 UI와 다르게 목록의 형태로만 구성할 수 있도록 되어 있다. 기존의 Preference는 내부에서 ListView를 사용하고 있지만, v7의 경우에는 RecyclerView를 사용한다. 그래서 그래들 빌드 파일의 의존성에 v7의 다른 라이브러리가 필요한 것이다. 그리고 아래와 같은 설정 파일은 app/res/xml/ 아래에 위치해야 한다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.preference.PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android">
    <android.support.v7.preference.PreferenceCategory android:title="카테고리1">
        <android.support.v7.preference.SwitchPreferenceCompat
            android:key="pf_folder_display_option"
            android:icon="@mipmap/ic_launcher"
            android:title="카테 타이틀 01"
            android:summary="summary"
            android:defaultValue="false" />

        <android.support.v7.preference.SwitchPreferenceCompat
            android:icon="@mipmap/ic_launcher"
            android:title="카테 타이틀 02"
            android:summary="summary"
            android:defaultValue="false" />

        <android.support.v7.preference.SwitchPreferenceCompat
            android:icon="@mipmap/ic_launcher"
            android:title="summary"
            android:summary="summary"
            android:defaultValue="true" />
    </android.support.v7.preference.PreferenceCategory>

    <android.support.v7.preference.PreferenceCategory android:title="카테고리2">
        <android.support.v7.preference.SwitchPreferenceCompat
            android:title="SwitchPreferenceCompat 타이틀"
            android:summary="SwitchPreferenceCompat Summary"
            android:icon="@mipmap/ic_launcher"
            android:defaultValue="true" />
    </android.support.v7.preference.PreferenceCategory>

    <android.support.v7.preference.PreferenceCategory android:title="카테고리3">
        <android.support.v7.preference.Preference
            android:title="타이틀 02"
            android:summary="Summary"
            />

        <android.support.v7.preference.Preference
            android:title="타이틀 03"
            android:summary="Summary"
            />

        <android.support.v7.preference.Preference
            android:title="@string/app_name"
            android:summary="Summary"
            />
    </android.support.v7.preference.PreferenceCategory>
</android.support.v7.preference.PreferenceScreen>

3. 액티비티(Activiy) 예제

예제 프로젝트의 SettingsActivity.java 소스는 아래와 같다. 이 소스는 간단하게 아래의 PreferenceFragmentCompat을 상속해서 구현하고 있는 클래스로 화면을 구성하는 소스이다.

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        getSupportFragmentManager().beginTransaction()
                .replace(android.R.id.content, new SettingsFragment(), null).commit();
    }
}

4. SettingsFragment 예제

이 클래스는 PreferenceFragmentCompat를 상속해서 실제 Preference 화면을 구성하는 xml을 로딩하는 소스이다. 기존에 사용하던 PreferenceFragment에서는 onCreate() 메서드에서 xml을 로딩했지만, PreferenceFragmentCompat 에서는 onCreatePreferences() 메서드를 사용한다.

import android.os.Bundle;
import android.support.v7.preference.PreferenceFragmentCompat;

public class SettingsFragment extends PreferenceFragmentCompat {
    @Override
    public void onCreatePreferences(Bundle bundle, String s) {
        addPreferencesFromResource(R.xml.settings);
    }
}

5. 스타일(styles.xml) 추가

위 과정이 끝나면 테마에 preference 테마를 추가할 필요가 있다. 아래의 수정된 styles.xml 에서 AppTheme의 preferenceTheme 요소의 값으로 @style/PreferenceThemeOverlay를 사용하고 있는 것을 알 수 있다.

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="preferenceTheme">@style/PreferenceLocalTheme</item>
    </style>
    <style name="PreferenceLocalTheme" parent="@style/PreferenceThemeOverlay" />
</resources>

이제 위 과정의 결과로 아래와 같은 멋진(?) 화면을 확인할 수 있다.

preference_02
그림 2, v7 Preference 라이브러리를 사용한 설정 화면

그림 2를 살펴보면, 롤리팝의 머터리얼 디자인 테마와 홀로 테마가 섞여 있다는 것을 알 수 있다. 그래서 조금 더 머터리얼 디자인의 모습을 가지도록 UI를 변경해 보자.

6. 스타일(style.xml) 변경

위 결과 화면을 보면, v7 Preference 기본 UI가 머터리얼(Material) 디자인이라고 보기에는 구리다. 그래서 스타일을 변경해서 UI를 개선하는 방법을 살펴보자.

6.1 android.support.v7.preference.PreferenceCategory의 Text 스타일 변경

아래와 같이 PreferenceCategory에 보여지는 TextView의 스타일을 변경한다.

<style name="ListSeparatorTextView">
  <item name="android:textSize">16sp</item>
  <!--item name="android:textStyle">bold</item-->
  <item name="android:textColor">@color/accent</item>
  <item name="android:paddingTop">16dp</item>
  <item name="android:layout_marginBottom">16dp</item>
</style>

6.2 Preference의 Title과 Summary 스타일 변경

이 Preference의 Title은 textAppearanceLarge를 style로 사용하고 있고, Summary는 textAppearanceMedium을 style로 사용하고 있다. 그래서 위 설정화면의 Title과 Summary가 크게 느껴진다. 그래서 이 두개의 스타일을 변경해 보자.

<style name="LargeText">
   <item name="android:textSize">16sp</item>
</style>
<style name="MediumText">
   <item name="android:textSize">11sp</item>
   <item name="android:typeface">sans</item>
</style>

위 과정으로 변경된 전체 styles.xml은 아래와 같다.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="preferenceTheme">@style/PreferenceLocalTheme</item>
    </style>

    <style name="AppThemePreference" parent="AppTheme">
        <item name="android:listSeparatorTextViewStyle">@style/ListSeparatorTextView</item>
        <item name="android:textAppearanceLarge">@style/LargeText</item>
        <item name="android:textAppearanceMedium">@style/MediumText</item>
    </style>

    <style name="PreferenceLocalTheme" parent="@style/PreferenceThemeOverlay" />

    <style name="ListSeparatorTextView">
        <item name="android:textSize">16sp</item>
        <!--item name="android:textStyle">bold</item-->
        <item name="android:textColor">@color/colorPrimary</item>
        <item name="android:paddingTop">16dp</item>
        <item name="android:layout_marginBottom">16dp</item>
    </style>

    <style name="LargeText">
        <item name="android:textSize">16sp</item>
    </style>

    <style name="MediumText">
        <item name="android:textSize">11sp</item>
        <item name="android:typeface">sans</item>
    </style>

</resources>

위 스타일로 변경된 스타일의 화면은 다음과 같다.
preference_03

위 스타일에서 설정을 가지고 있는 액티비티는 AppThemePreference를 테마로 사용하면 된다. 이 테마안에 보면 android:textAppearanceLarge나 android:textAppearanceMedium이 테마 전역으로 사용하는 요소이기 때문에 이 테마를 사용하는데는 주의를 해야 한다.