android-congenial-fortnight-darktheme
π³πππ πΌπππ |
πΎπππππ |
π»ππππ πΌπππ |
|---|---|---|
 |
 |
 |
πΈπππππππππππ ππ π³πππ πππππ ποΈ
DarkMode/DarkTheme is a feature in android if supported by the application, we can switch the visual display to dark colors.
ππππ ππππππππππ ππ ππππππ π ππππ πππππ ππ πππππππ ποΈ
- Reduction in battery usage in OLED and AMOLED display panels. In OLED displays every pixel is individually lit. So when the display is light, most of the display pixels are turned on, which in turn consumes a lot of battery power. On the contrary, when the dark mode is turned on and dark pixels are turned on, the battery usage goes down.
- Reduces the emission of the harmful Blue light, which in turn reduces the strain on the eyes.
ππ’πππ ππ π³πππ πΌπππ ποΈ
Using day-night Theme- It gives more control and helps to support dark mode in pre android 10 devices.
- But its bit time consuming to set up
Force Dark- It is a quick way to support dark theme on android-10 devices.
- Google describes force dark being a quick way to transition into a dark theme in existing apps.
- When you apply force dark, android tries its best to attempt to apply a dark theme to your android app running in android-10.
- Since force dark is automatic without the input from you as a developer, it is not always perfect.
- So there is an option to turn off force dark for particular views in your application.
π·ππ ππ πππ π΅ππππ π³πππ ππππ ππ πππππππ ποΈ
- Make sure you are in
android-10orabove - Use the line below in the the application theme
<item name="android:forceDarkAllowed">true</item>This is represented as
<!-- 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:forceDarkAllowed">true</item>
</style>- Now once you select the option
Dark Modein the taskbar, The dark theme is applied - If you want to exclude a
viewfrom theDark Modeadd the line below
android:forceDarkAllowed="false"This is represented as
<Button
android:id="@+id/pressMeButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/press_me"
android:forceDarkAllowed="false"/>π·ππ ππ πππ πππ πππ’ π½ππππ πππππ ππ πππππππ ποΈ
Steps in setting up the day-night theme
If we want to support dark theme on android-10 & above, pre android devices we need to use via day-night theme
We have two options
DayNight Theme
- The
androidXAppCompactlibrary has aDayNight themecalledTheme.AppCompat.DayNight - In the
res/values/styles.xml
<style name="Theme.AppCompat.DayNight" parent="Theme.AppCompat.Light">- In the
res/values-night/styles.xml
<style name="Theme.AppCompat.DayNight" parent="Theme.AppCompat">- Styles implemented as
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompact.DayNight">
<!-- 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:forceDarkAllowed">true</item>
</style>MaterialComponents DayNight Theme
- The Material component library also has theme support supporting both day and night types.
- Advantage of using the
MaterialComponentsis the appearance that looks more stylish and modern which users might expect from a modern android application. - For this we need to use
implementation 'com.google.android.material:material:1.4.0-beta01'- Styles added as
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
<!-- 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:forceDarkAllowed">true</item>
</style>π²ππππππππππ π πππ πππππ ππππ π πππ πππππ ππ ππππ πππππ ποΈ
Controlling the resources displayed on the screen using the styles using the modes
- We can achieve this using the styles having two values folder for
normal modeanddark moderes/values/styles.xmlres/values-night/styles.xml
- To create
values-nightfolder- Right-click on the values folder
- Select
newfrom the options. - In the available qualifiers select
Night-Modeand push to right using the middle selection arrows. - Then Select
Not Nightmode - Give the file name as
styles - Press
ok
- In the
res/values/styles.xmladd the below entries
<style name="TextStyle" parent="AppTheme">
<item name="android:text">@string/let_me_out</item>
</style>
<style name="ImageStyle" parent="AppTheme">
<item name="android:src">@drawable/airlock</item>
</style>- In the
res/values-night/styles.xmladd the below entries
<style name="TextStyle" parent="AppTheme">
<item name="android:text">@string/let_me_out</item>
</style>
<style name="ImageStyle" parent="AppTheme">
<item name="android:src">@drawable/astronaut</item>
</style>ππ ππππ πππππ ππππππππππππππππ’ ποΈ
Ways of selecting the View Modes
There are three modes which we can programmatically select
Dark Mode> Display into dark modeLight Mode- > Display into light modeSystem-> Default settings from the system
Code to change the models programmatically using day-night theme
AppCompatDelegate.setDefaultNightMode(nightMode)
// nightMode = Integer value passed based on selectionHow to persist or save the choice the user has made
- For this, we use shared preferences to save the selection, it will be integer value we are saving
Handling when we close and open the application
Use get the value in shared preferences and load it when the application opens
ππππππππππ πππ ππππ πππππ ππ πΏππ π°ππππππ π·πΆ πππππππ ποΈ
- Now we can control the modes in android 10 and above modes easily.
- But in pre android 10 devices there is no system setting since to take default setting.
- So we can check if it is pre android 10 and set it into a battery saver mode.
πππππππ β
If you feel like support me a coffee for my efforts, I would greatly appreciate it.
π²πππππππππ πββοΈ
Read contribution guidelines for more information regarding contribution.
π΅πππππππ βοΈ
Feature requests are always welcome, File an issue here.
π΅πππ ππππ πππππππ ππππππ ? β€οΈ
Support it by clicking the
π»ππππππ 
π³
This project is licensed under the Apache License 2.0 - see the LICENSE file for details
