Sina Moradi
Sina Moradi

Reputation: 61

switch button for change theme in android

I want change my app theme with a switch Button but I don't know how I should do it? I want that switch change it to a dark theme.

I can't found any things in web.

Upvotes: 0

Views: 8980

Answers (2)

Iman Dolatkia
Iman Dolatkia

Reputation: 226

I created a library that you can create your custom themes and change them dynamically with ripple animation.

check it here: https://github.com/imandolatkia/Android-Animated-Theme-Manager

also in this repository, there is a sample app that you can see what should you do.

enter image description here

Upvotes: 2

Shahriar Zaman
Shahriar Zaman

Reputation: 938

First, create a folder inside /app/src/main/res/ directory & name it values-night. It will show in Android Studio as values(night) in the project pane. Then for each configuration you need separate files. Such as colors, styles etc. Here colors and style are main.

Here is a sample:

For normal mode

colors.xml (as you wish)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#6C63FF</color>
    <color name="colorPrimaryDark">#6C63FF</color>
    <color name="colorAccent">#03DAC5</color>
    
    <color name="mainText">#2D313D</color>
    <color name="textAlt">#8D8F97</color>

    <color name="mainBackground">#ffffff</color>
</resources>

and styles.xml

<resources>

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

</resources>

For Night mode

Now in /app/src/main/res/values-night/ directory do the same as above. Just change the color that matches night mode. For instance:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#6C63FF</color>
    <color name="colorPrimaryDark">#2D313D</color>
    <color name="colorAccent">#03DAC5</color>
    
    <color name="mainText">#ffffff</color>
    <color name="textAlt">#8D8F97</color>

    <color name="mainBackground">#2D313D</color>
</resources>

and styles.xml

<resources>

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

</resources>

To switch from one mode to another, add these line in activity:

switch_btn.setOnClickListener(View.OnClickListener {
    if(isNightModeOn){
        AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
        switch_btn.text = "Enable Dark Mode"
    } else {
        AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
        switch_btn.text = "Disable Dark Mode"
    }
})

Upvotes: 3

Related Questions