안드로이드 테마 바꾸기

Intro

테마 바꾸기

Styles.xml 테마 추가

styles 에서 사용할 아이템 attrs.xml 생성

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ds">
        <attr name="backgroundcolor" format="color"/>
        <attr name="cardbackground" format="color"/>
        <attr name="textcolor" format="color"/>
        <attr name="tintcolor" format="color"/>
        <attr name="buttoncolor" format="color"/>
        <attr name="navibackground" format="color"/>
        <attr name="navitint" format="color"/>
    </declare-styleable>

</resources>

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="backgroundcolor">#FCFCFC</item>
        <item name="cardbackground">#FFFFFF</item>
        <item name="textcolor">#808080</item>
        <item name="tintcolor">#FFFFFF</item>
        <item name="buttoncolor">#2196F3</item>
        <item name="navibackground">#FFFFFF</item>
        <item name="navitint">#000000</item>
    </style>

    <!--  Dark Theme -->
    <style name="DarkTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">#212121</item>
        <item name="colorPrimaryDark">#000000</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="backgroundcolor">#303030</item>
        <item name="cardbackground">#424242</item>
        <item name="textcolor">#FFFFFF</item>
        <item name="tintcolor">#FFFFFF</item>
        <item name="buttoncolor">#2196F3</item>
        <item name="navibackground">@color/darkblack</item>
        <item name="navitint">#FFFFFF</item>
        <item name="android:textColorPrimary">#FFFFFF</item>
        <item name="colorControlNormal">#FFFFFF</item>
    </style>

    <!--Default Calendar Style-->
    <style name="DefaultCalendarViewDateCustomText" parent="android:TextAppearance.DeviceDefault.Small">
        <!--<item name="android:textColor">#000000</item>-->
        <item name="android:weekNumberColor">@color/colorAccent</item>
    </style>

    <style name="DefaultCalendarViewWeekCustomText" parent="android:TextAppearance.DeviceDefault.Small">
        <item name="android:textColor">#000000</item>
    </style>


    <!--Dark Calendar Style-->
    <style name="CalendarViewDateCustomText" parent="android:TextAppearance.DeviceDefault.Small">
        <item name="android:textColor">#FFFFFF</item>
        <item name="android:weekNumberColor">@color/colorAccent</item>
    </style>

    <style name="CalendarViewWeekCustomText" parent="android:TextAppearance.DeviceDefault.Small">
        <item name="android:textColor">#FFFFFF</item>
    </style>


    <!--Dialog Style-->
    <style name="Dialog" parent="Theme.AppCompat.Dialog">
        <item name="android:windowBackground">@color/deepdarkblack</item>     <!--Dialog background-->
        <item name="android:textColorPrimary">#FFFFFF</item>    <!--content text color-->
        <item name="android:windowMinWidthMajor">@dimen/dialog_min_width_major</item> <!--화면 비율-->
        <item name="android:windowMinWidthMinor">@dimen/dialog_min_width_minor</item> <!--화면 비율-->

        <item name="android:windowTitleStyle">@style/MyTitleTextStyle</item> <!--title text style-->

        <item name="colorAccent">@color/colorAccent</item>     <!--Button text color-->
        <item name="android:windowNoTitle">false</item>
        <item name="android:windowIsFloating">true</item>
    </style>

    <!--Dialog Title Style-->
    <style name="MyTitleTextStyle">
        <item name="android:textColor">#FFFFFF</item>
        <item name="android:textAppearance">@style/TextAppearance.AppCompat.Title</item>
    </style>



</resources>

AppTheme은 기본테마이고 DarkTheme는 새로 적용할 테마이다.

위에서 새로추가한 attrs 아이템들과 적용할 색상을 지정해주었다.

또한 이외 따로 적용시킬 달력스타일과 Dialog 스타일도 정의해주었다.

테마 변경

xml 테마지정

<CalendarView
            android:id="@+id/calendarView"
            android:layout_width="match_parent"

            android:dateTextAppearance="@style/CalendarViewDateCustomText"
            android:weekDayTextAppearance="@style/CalendarViewWeekCustomText"
            android:layout_height="wrap_content"/>


        <TextView
            android:id="@+id/whenDate"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/calendarView"
            android:gravity="center_horizontal"
            android:textColor="?attr/textcolor"
            android:text="date"
            android:textSize="24dp"/>

        <TextView
            android:id="@+id/scheduleText"
            android:layout_below="@+id/whenDate"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="?attr/textcolor"/>
       

테마가 지정될 xml 아이템에 ?attr/color를 지정해준다.

테마 변경 스위치

 // 앱 테마 변경
switchdark.setOnPreferenceChangeListener(new Preference.OnPreferenceChangeListener()
{
    @Override
    public boolean onPreferenceChange(Preference preference, Object newValue)
    {
        if (switchdark.isChecked())
        {
           
            sharedPref.setNightModeState(false);
            switchdark.setChecked(false);
            restartApp();
        } else
        {
            sharedPref.setNightModeState(true);
            switchdark.setChecked(true);
            
            restartApp();
        }
        return false;
    }
});

// 테마 변경시 앱 재시작
public void restartApp()   
{
    Intent intent = new Intent(getActivity().getApplicationContext(), MainActivity.class);
    startActivity(intent);
    getActivity().finish();
}

스위치 클릭시 현재 상태에 따라 테마 상태 boolean값을 SharedPreference를 이용해 저장하고 앱을 재시작한다.

• SharedPreference를 이용하면 앱을 껐다 켜도 설정된 테마가 유지된다.

테마 적용

// 테마적용
protected void onCreate(@Nullable Bundle savedInstanceState)
{
    sharedPref =new SharedPref(this);

    // 테마
    if (sharedPref.loadNightModeState())
    {
        setTheme(R.style.DarkTheme);
    }
    else
    {
        setTheme(R.style.AppTheme);
    }

    super.onCreate(savedInstanceState);
    setContentView(R.layout.addschedule);
}

액티비티에서 뷰가 생성되기전에 저장된 boolean값을 체크하고 setTheme를 이용해 styles에 저장해준 테마를 적용시킨다.

그 외 테마 적용

// 테마에 따른 캘린더, Dialog 스타일 변경
if (sharedPref.loadNightModeState())
{
    mCalendarView.setDateTextAppearance(R.style.CalendarViewDateCustomText);
    mCalendarView.setWeekDayTextAppearance(R.style.CalendarViewWeekCustomText);
    builder =  new AlertDialog.Builder(getActivity(), R.style.Dialog);
}
else
{
    mCalendarView.setDateTextAppearance(R.style.DefaultCalendarViewDateCustomText);
    mCalendarView.setWeekDayTextAppearance(R.style.DefaultCalendarViewWeekCustomText);
    builder =  new AlertDialog.Builder(getActivity());
}

캘린더나 다이얼로그처럼 따로 테마를 지정해줘야 하는부분은 마찬가지로 저장된 Boolean값으로 지정해준다.

실행 결과

참고자료

https://youtu.be/-qsHE3TpJqw