CODEWITHSUNDEEP
android
Deven
Deven

Reputation: 191

how to set day and night theme in android application

I have created an Android application that uses a list of preferences to set day and night mode theme.

My styles.xml

<style name="Theme.FullScreen" parent="@android:style/Theme.Black.NoTitleBar.Fullscreen"></style>

<style name="PreferencesTheme" parent="android:Theme.Light">
    <item name="android:background">#FFEAEAEA</item>
</style>

<style name="PreferencesTheme" parent="android:Theme.Light">
    <item name="android:windowBackground">@drawable/ic_icon_settings</item>
</style>

Does anyone know how how I can apply night and day mode to my styles.xml

Upvotes: 7

Views: 8702

Answers (1)

Siddharth Lele
Siddharth Lele

Reputation: 27748

You should look at the HoneycombGallery example from the Android 3.2 API13 sample applications.

They way they have implemented this is:

Declare two themes in your styles.xml:

<style name="ActionBar" parent="@android:style/Widget.Holo.ActionBar" />

<style name="ActionBar.Light" parent="@style/ActionBar">
    <item name="android:background">@color/actionbar_background_light</item>
</style>

<style name="ActionBar.Dark" parent="@style/ActionBar">
    <item name="android:background">@color/actionbar_background_dark</item>
</style>

<style name="AppTheme.Light" parent="@android:style/Theme.Holo.Light">
    <item name="android:actionBarStyle">@style/ActionBar.Light</item>
    <item name="android:windowActionBarOverlay">true</item>
    <item name="listDragShadowBackground">@android:color/background_light</item>
    <item name="menuIconCamera">@drawable/ic_menu_camera_holo_light</item>
    <item name="menuIconToggle">@drawable/ic_menu_toggle_holo_light</item>
    <item name="menuIconShare">@drawable/ic_menu_share_holo_light</item>
</style>

<style name="AppTheme.Dark" parent="@android:style/Theme.Holo">
    <item name="android:actionBarStyle">@style/ActionBar.Dark</item>
    <item name="android:windowActionBarOverlay">true</item>
    <item name="listDragShadowBackground">@android:color/background_dark</item>
    <item name="menuIconCamera">@drawable/ic_menu_camera_holo_dark</item>
    <item name="menuIconToggle">@drawable/ic_menu_toggle_holo_dark</item>
    <item name="menuIconShare">@drawable/ic_menu_share_holo_dark</item>
</style>

MENUS TO SWITCH BETWEEN THE MODES:

This is the main_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/toggleTheme"
        android:title="Day/Night"
        android:showAsAction="never" />
</menu>

And the MainActivity class where they toggle between the Day and Night modes:

NOTE: I have stripped out the other stuff that is not necessary for the context of this question.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {

    case R.id.toggleTheme:
        if (mThemeId == R.style.AppTheme_Dark) {
            mThemeId = R.style.AppTheme_Light;
        } else {
            mThemeId = R.style.AppTheme_Dark;
        }
        this.recreate();
        return true;

    default:
        return super.onOptionsItemSelected(item);
    }
}

The Global Variable necessary for switching between the modes:

private int mThemeId = -1;

And for saving the last selected mode, in the onCreate():

if(savedInstanceState != null && savedInstanceState.getInt("theme", -1) != -1) {
    mThemeId = savedInstanceState.getInt("theme");
    this.setTheme(mThemeId);
}

But do download the samples from the SDK Manager and see the actual (entire) functioning.

Upvotes: 10

Related Questions