본문 바로가기
안드로이드 자바

[Java][Android] 다크모드 구현하기

by teamnova 2021. 4. 22.

안녕하세요!

오늘은 스틱코드를 이용하여 '다크모드'를 구현해보도록 하겠습니다.

 

'다크/라이트 모드'에 사용될 'themes.xml'을 생성해 줍니다.

 

 

'themes.xml' 파일을 이용하여 '다크 모드'가 적용 되었을 때와 '라이트 모드(일반)'가 적용되었을 때, xml 파일 내 설정해둔 배경, 글씨 등의 UI 색상이 적용 되도록 진행해 보겠습니다.

 

 

1. ThemeUtil 만들기

먼저 '다크/라이트 모드'를 선택한 값에 따라 모드가 바뀌도록 하는 '테마 유틸 클래스'를 생성해보도록 하겠습니다.

 

ThemeUtil.java

developer.android.com/reference/androidx/appcompat/app/AppCompatDelegate

 

AppCompatDelegate  |  Android 개발자  |  Android Developers

AppCompatDelegate public abstract class AppCompatDelegate extends Object java.lang.Object    ↳ androidx.appcompat.app.AppCompatDelegate This class represents a delegate which you can use to extend AppCompat's support to any Activity. When using an App

developer.android.com

'applyTheme' 메소드를 만들어 'themeColor' 값에 따라 모드가 적용되도록 만들어 줍니다.

 

앱을 껐다 켜더라도 설정한 모드가 적용이 되도록,

마지막에 설정한 모드를 'SharedPreferences'에 저장하는 메소드를 '테마 유틸 클래스'에 추가하도록 합니다.

 

 

2. 모드를 선택할 다이얼로그 만들기

'다크/라이트 모드'를 선택할 수 있도록 다이얼로그를 만들도록 하겠습니다.

모드를 선택할 'ModDialog' 액티비티를 생성 다이얼로그를 만들어줍니다.

 

아래 화면과 같이 왼쪽 화면의 'MainActivity'에서 모드 변경하기 버튼을 누르면 오른쪽의 'ModDialog'에서 모드를 선택하도록 레이아웃을 만들어 줍니다.

 

 

먼저 매니페스트에서 'ModDialog' 액티비티를 다이얼로그로 사용하기 위해,
android:theme="@android:style/Theme.Dialog" 를 추가해 줍니다.

 

라디오 버튼을 누를 때 마다 해당 모드가 적용 되도록,

미리 만들어 두었던

'ThemeUtil''applyTheme' 메소드와 변경한 모드가 저장되도록 'modSave' 메소드를 사용해 줍니다.

 

ModDialog.java

 

 

3. 앱 시작 시, 모드 적용

앱 구동 시,

'MainActivity'에서 설정된 모드의 저장 값 또는 값이 없을때의 로직과 앞서 만든 'ModDialog' 액티비티 다이얼로그가 화면에 나오도록 버튼 클릭 리스너를 추가해 줍니다.

 

MainActivity.java

먼저 기기에 저장된 모드 저장값을 'modLoad' 메소드를 이용하여 불러오도록 합니다. (기본값 : 라이트 모드)

다음으로 불러온 모드 저장값을 'applyTheme' 메소드로 적용하도록 합니다.

 

마지막으로 'ModDialog' 액티비티 다이얼로그와 연결한 버튼 클릭 리스너를 추가해주면 마무리입니다.

 

 

 

다른 색상의 테마를 추가하거나 다크모드 시 색상 변경을 다르게 하시려면,

테마 xml을 수정 또는 추가하여 자신이 만드는 앱에 맞는 모드를 만들어보면 좋을 것 같습니다.

 

스틱코드 참고 포스팅

다크모드 적용

stickode.com/detail.html?no=2057

 

스틱코드

 

stickode.com

액티비티 다이얼로그 띄우기

stickode.com/detail.html?no=1910

 

스틱코드

 

stickode.com

sharedpreferences

 

stickode.com/detail.html?no=1548

 

스틱코드

 

stickode.com