Planning for dark and light mode in Android App Development

Planning for dark and light mode in Android App Development

Most people jump into app development without proper planning, structuring and organization of their development environment or directories. This in a long run would affect or impede their plan for future expansion or make it difficult at that.

Dark_light_mode

My colleagues refer to me as a forerunner because of my adept nature of trying to quickly get things together while making sure they are flexible for future expansion.

Here, I will share a little experience of how I and my colleagues planned for the light and dark mode of a huge project before getting started with coding.

This is not to say it was the first thing in the plan book, but this is a bit of it; and I thought to share with you in other that whenever you have it in mind to build an app that might incorporate dark/light mode, you might want to plan for it before getting into coding. It is also not to say that when you are done with the full app you cannot expand for dark or light mode, but the way you have structured your foundation to build the app could make that expansion easier or difficult.

Prerequisite
In other to follow through with this piece, it is expected that you are familiar with Android Studio environment, that you can switch between Project level or Android level in the environment, that you can locate directories as well.

Let's get started... :)

Screenshot 2021-02-16 at 11.57.50.png

let's say we have a simple image, text view, edit text and a button as above; you can design as you so wish. Then follow
Steps:
1. Create an attr file in values folder in the res directory

Screenshot 2021-02-16 at 11.08.03.png

you will notice how I had named the attributes or variable as you so wish to term it.
2. Next is to assign value to the variables;
3. Head to values directory and click on the drop-down for themes to open the themes and themes(night). We are going to be assigning values to our attr or variable in the themes and themes(night), just as their names; they denote the value the variables or attr will take when switched to day or night

Screenshot 2021-02-16 at 11.42.23.png

you will notice I had referenced a drawable to the be value of our attribute or variable moodImage. Just like so, depending on the context of your attribute, you can decide to reference color, drawable and string.

Screenshot 2021-02-16 at 11.45.52.png

So what I had done is to change the image when you toggle between light and dark mode.


4. On your activity_main layout where you have the imageView, you should change the src to point to the attr value like so: app:srcCompat="?attr/moodImage"


5. Now on your MainActivity- in the onCreate lifecycle, place this code for light mode AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO) and this code AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES) for dark mode.

This will automatically select the values you have applied to the attr moodImage in the themes and themes(night) respectively.

You can place this to happen when you click on a button, switch or whatever logic you have in mind to turn on the light or dark mode.

Screenshot 2021-02-16 at 11.59.09.png

Lastly, you can apply this approach to whatever view you want to target for light or dark mode just as I have done for the image above.
Note that by default Android studio already set values for background, status bar, button for light and dark mode when it is triggered; you can override this by defining your own attr and setting the views color, background color, text color or string values as well.

check it out on git as well
%github.com/sterlingking1990/SimpleDarkLight..