Android Night Mode

Android Q offers a new Dark theme that applies to both the Android system UI and apps running on the device. Before Q we have only option for light theme.

Android Night Mode

Andorid Night Mode

Please download sample project from here.  NightMode 

Android Q provide Dark Theme feature which is very attractive and usefull for application. This Dark Theme is have many key benifits.

Key Points in Night Mode:

1. Night mode support from 14+ API.

2. Android DayNight theme "Theme.AppCompat.DayNight" with the support library 23.2.0.

 

Benifits :

  1. Health & well-being
  2. Avoid shiny screen
  3. Increase Readability
  4. Save battery life
  5. Increase application usability
  6. Reduce eyestrain
  7. Reduce dry eye

----------------------------------------------------------------

Creating a sample project in android studio

 

1. Create a sample project from android studio. to create a sample project please go to below steps:

File  -> New -> New Project --> A popup will come then select a empty activity.

2. Open project app -> res -> change resource values file like strings, color, dimens.

colors.xml  :
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>

    <color name="colorWhite">#FFFFFF</color>
    <color name="colorBlack">#A6000000</color>
</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="android:windowBackground">@color/colorWhite</item>
        <item name="android:textColorPrimary">@android:color/black</item>
        <item name="android:textColorSecondary">@android:color/black</item>
    </style>

</resources>

strings.xml:

<resources>
    <string name="app_name">NightMode</string>
</resources>

3. Now Add Night Theme in values-night folder in side res folder.

Project >> app >> res >> values-night  and create colors.xml and styles.xml same as values folder.

colors.xml  :

In this file you can define color for night mode with colorPrimary, colorPrimaryDark, colorAccent.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="colorWhite">#FFFFFF</color>
    <color name="colorBlack">#000000</color>
</resources>

styles.xml

In this you can create style with parent  Theme.AppCompat.DayNight

Like : Theme.AppCompat.DayNight.DarkActionBar

Theme.AppCompat.DayNight.NoActionBar
<resources>
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowBackground">@color/colorBlack</item>
        <item name="android:textColorPrimary">@color/colorWhite</item>
        <item name="android:textColorSecondary">@color/colorWhite</item>
    </style>

</resources>

4.  Open application app project gradle file and  add implement all dependencies :

apply plugin: 'com.android.application'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.datanapps.nightmode"
        minSdkVersion 15
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    implementation 'com.android.support:design:28.0.0'

    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

5. Here manifest file for permissions and activities.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.datanapps.nightmode">

    <application
        android:name=".MyApplication"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        android:usesCleartextTraffic="true"
        tools:ignore="GoogleAppIndexingWarning">

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

 

6. Create layout for MainActivity class.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/tv_mode"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text=" this is mode"
        android:gravity="center"
        app:layout_constraintBottom_toTopOf="parent"
        app:layout_constraintTop_toBottomOf="parent"
        tools:ignore="MissingConstraints" />

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/btn_day_mode"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Day Mode"
       app:layout_constraintBottom_toTopOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_mode"
        tools:ignore="MissingConstraints" />

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/btn_night_mode"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Night Mode"
        app:layout_constraintEnd_toStartOf="parent"
        app:layout_constraintStart_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_mode"
        tools:ignore="MissingConstraints" />

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/btn_auto_mode"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Auto Mode"
       app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_mode"
        tools:ignore="MissingConstraints" />

    <android.support.v7.widget.SwitchCompat
        android:id="@+id/webview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" Switch Toggle "
        app:layout_constraintEnd_toStartOf="parent"
        app:layout_constraintStart_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/btn_auto_mode"
        app:layout_constraintTop_toBottomOf="@+id/tv_mode"
        tools:ignore="MissingConstraints" />
</android.support.constraint.ConstraintLayout>

 

7. Create MainActivity class.

package com.datanapps.nightmode;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.app.AppCompatDelegate;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // AppCompatDelegate.MODE_NIGHT_NO,   AppCompatDelegate.MODE_NIGHT_YES, AppCompatDelegate.MODE_NIGHT_AUTO
    //AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
    }

    private void initViews() {

        TextView textModeType = findViewById(R.id.tv_mode);

       int modeType = AppCompatDelegate.getDefaultNightMode();

        if (modeType == AppCompatDelegate.MODE_NIGHT_AUTO) {
            textModeType.setText("Default Mode Type: Auto");
        } else if (modeType == AppCompatDelegate.MODE_NIGHT_NO) {
            textModeType.setText("Default Mode Type: Day");
        } else if (modeType == AppCompatDelegate.MODE_NIGHT_YES) {
            textModeType.setText("Default Mode Type: Night");
        }
    }
}

8. Now in just add delegate in application or activity according to your use case. (Prefer in application class)

package com.datanapps.nightmode;

import android.app.Application;
import android.support.v7.app.AppCompatDelegate;

public class MyApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        // AppCompatDelegate.MODE_NIGHT_NO,   AppCompatDelegate.MODE_NIGHT_YES, AppCompatDelegate.MODE_NIGHT_AUTO
       AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_AUTO);
    }
}

AppCompatDelegate.MODE_NIGHT_YES : Mode which means to always use night mode

AppCompatDelegate.MODE_NIGHT_NO : Mode which means to not using night mode

AppCompatDelegate.MODE_NIGHT_AUTO : Mode which means to use night mode according to device time

 

---------------------------------------------

Also, check out  :  A single adapter for multi view

you can also suggest ideas for my next blog in comment section.

Next week I’ll post top data binding in android  that is very useful and key feature. 

please click LIKE button and SHARE to help others find it!

Thank you so much, Have a great day !

 


Click Here To See More

What's Your Reaction?

like
0
dislike
0
love
0
funny
0
angry
0
sad
0
wow
1