Creating Different Shades of a Color in Phimpme Android

Getting different shades of a particular color is very much useful when setting color to layouts which are just adjacent to each other. It maintains the uniformity of the theme and also creates a distinction between those layouts. In Phimpme Android application we used this method for setting colors for the status bar, navigation bar and few other foreground elements.

Use of different shades of a color

As per the normal theme of the application, we assigned the primary color of the theme to the  background color of the action bar in Phimpme Android application. The status bar will be present just above the action bar. So if we assign the same primary color to the status bar also, then there will be no distinction between both the views and it is not visibly attractive. For getting the distinction between both the views, we created a dark shade of the primary color of the current theme and set it as the background color of the status bar.

  

In Phimpme Android application we used a bottomnavigationview widget for navigating between activities in the application. It is placed at the bottom of the application window i.e. just above the system navigation bar. So, even here, for creating the distinction between both the views, we used the similar approach of getting the darker shade of the color, assigning it to the system navigation bar and normal shade to the bottomnavigationview of Phimpme Android application.

  

In the splash screen of the Phimpme Android application, the primary color of the theme is set as the main background. A progress bar also gets displayed on the screen. Its color should match the theme and should also get distinguished from the background. We could’ve used darker shade for this too, but a lighter foreground object would be visibly much better. So, we created a lighter shade of the primary color and used it as the color filter for the progress bar.

Implementation

In Phimpme Android, this is implemented by getting the color coordinates in HSV space corresponding to the given coordinates (here – primary color of theme) in RGB space and changing the luminance in that HSV space and remapping it back to RGB space. By this we get almost any shade of the color.

The implementation for getting darker shade of a color which we used for status bar in Phimpme application is shown below.

public int getDarkerShadeColor(int c){
   float[] hsv = new float[3];
   int color = c;
   Color.colorToHSV(color, hsv);
   hsv[2] *= 0.80f; 
   color = Color.HSVToColor(hsv);
   return color;
}

Generally 20% darker color would be enough for distinguishing from original color. So, we reduced the luminosity to 80% of its previous value and created darker color in the above function.

The implementation for getting lighter color is also almost same. It is given below

public int getLighterShadeColor(int c){
   float[] hsv = new float[3];
   int color = c;
   Color.colorToHSV(color, hsv);
   hsv[2] *= 1.35f; 
   color = Color.HSVToColor(hsv);
   return color;
}

As you can see that both functions are almost same except the multiplier. If the multiplier is less than 1 then the function returns darker shade of the original color and if the multiplier is greater than 1 then the function returns lighter shade of the color. So by using this function, one can produce any shade of a color dynamically without the need hard code in xml files.

Resources:

Continue Reading

New Color Schemes in Engelsystem

Engelsystem is a well-built MVC application. It seems to have everything an event manager could want. During the Week 2 of my Summer of Code, I worked on creating new color schemes/themes for the system. Engelsystem initially had 4 color schemes:

  1. Engelsystem cccamp15
    01

  2. Engelsystem 32C3

    02

  3. Engelsystem Dark

    03

  4. Engelsystem Light

    04

Color wields enormous sway over our attitudes and emotions. When our eyes take in a color, they communicate with a region of the brain known as the hypothalamus, which in turn sends a cascade of signals to the pituitary gland, on to the endocrine system, and then to the thyroid glands. The thyroid glands signal the release of hormones, which cause fluctuation in mood, emotion, and resulting behavior.

Research from QuickSprout indicates that 90% of all product assessments have to do with color. “Color,” writes Neil Patel, is “85% of the reason you purchased a specific product.” It’s a no-brainer fact of any website that color affects conversions. Big time.

So, the bottom line is: use the right colors, and you win.

Color schemes lets the user to set the system looks (i.e how the system will appear) which the user likes. During the week 2 of my Summer of Code, I worked on implementing 2 new color schemes for the system:

  1. Engelsystem color scheme-1

    05

  2. Engelsystem color scheme-2

    06

In the later weeks, other developers and I would be working on creating more themes and enhancing them. Anyone who would like to work in the project are welcome. Developers can feel free to take up any issues they would like to work on just like any other open source projects.

Development: https://github.com/fossasia/engelsystem                                           Issues/Bugs:https://github.com/fossasia/engelsystem/issues

Continue Reading
Close Menu