[안드로이드] 앱에서 다크모드 지원하는 방법(Dark Theme)

 

<style name="AppTheme" parent="Theme.AppCompat.DayNight">

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">

안드로이드 앱에서 다크모드를 지원하려면.. 앱에서 사용중인 Theme이 DayNight 관련 Theme을 상속 받아야 합니다.

안드로이드에서는 2번째 Theme인 Theme.MaterialComponents.DayNight를 사용하는 것을 추천하네요.

 

 implementation 'com.google.android.material:material:1.2.0-alpha04' 

2번째 Theme을 사용하려면 app Gradle에서 위 코드를 추가해야합니다.

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:orientation="vertical"
    android:background="?android:attr/colorBackground"
    >

    <ImageView
        android:id="@+id/splash"
        android:layout_width="fill_parent"
        android:layout_height="100dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:cropToPadding="false"
        android:src="@drawable/logo_title" />
</LinearLayout>

그러면 이제 layout 파일에서

android:background="?android:attr/colorBackground"

코드를 사용하면 다크모드일 때와 아닐 때 알아서 다른 색이 적용됩니다.

 

다크모드일 때는.. 아주 많이 검은 색,

일반모드?일 때는 흰색이 적용됩니다.

 

이 값을 가장 많이 사용할 것 같네요.

 

시스템에서 설정되는 값이 아닌 커스텀 값을 사용해야할 때도 있을 겁니다.

 

values-night 폴더를 만들고

colors.xml, styles.xml 를 추가합니다.

여기에 있는 값들은.. 다크모드일 때만 사용됩니다.

 

drawable-night 폴더를 만들어서

이미지를 추가하면 여기에 있는 이미지는 다크모드일 때만 사용됩니다.

 

drawable-hdpi의.. Dark Theme용 폴더를 위해서는

drawable-night-hdpi를 만들어서 사용하면 됩니다.

 

 

Material 관련 Theme 사용 시..

Button의 모양과 색이 변하네요.

 

app:backgroundTint="@color/darkBlue"
android:insetBottom="0dp"
android:insetTop="0dp"
app:cornerRadius="0dp"

위의 값을 <Button>에 사용해서.. 원하는 모양과 색으로 바꿔야 할 수도 있습니다.

 

음.. 

그런데 app:backgroundTint로 버튼의 색을 변경하게 되면..

Button이 disabled상태(setEnable(false))라도.. app:backgroundTint에서 정한 색을 그대로 가지고 있어서.. 문제가 될 수 있네요.

 

https://stackoverflow.com/questions/55087014/cant-change-background-color-on-materialbutton-without-change-coloraccent

MaterialButton uses colorPrimary as background when button is in active state and colorOnSurface when disabled. So, you can define it in your theme and apply it on material buttons

 

<Button>의 기본색은 colorPrimary 에 영향을 받고, disalbed의 상태는 colorOnSurface 에 영향을 받습니다.

버튼 색을 바꾸기 위해서는 styles.xml에서 자신의 앱이 사용중인 style의 colorPrimary, colorOnSurface  값을 바꾸는게 더 좋아보입니다.

 

 

*기존의 CardView 대신에 <com.google.android.material.card.MaterialCardView>를 사용하면..

테두리의 색과 테두리의 두께 등.. 추가적으로 많은 것을 조절할 수 있습니다.

app:strokeColor="@color/myColor"

app:strokeWidth="1dp"

 

참고

https://developer.android.com/guide/topics/ui/look-and-feel/darktheme

https://material.io/develop/android/components/buttons/

https://stackoverflow.com/questions/54713087/how-to-center-icon-in-a-materialbutton-which-has-no-text