Implementing Color-Changing Features in an App: Difficulties and Gains

A smartphone screen is a mysterious element. In each smartphone, the screen transmits images in its own way. This article describes the complex process of implementing dynamic features in app development- more precisely, the color-changing function.

Modern Smartphones’ Color Features

Image transmission accuracy is an important parameter for people who use a smartphone not only as a means to consume content but also as a means to create this content. Photographers, designers, mobile application developers, and other experts must be sure that the image on the smartphone screen gives them the most “honest” picture.

For instance, we often publish photos taken on a smartphone on Instagram, pre-processing them in special applications. Upon completion of the processing, there comes an important point: how will the same photo look on the screens of smartphones for thousands of people?

For example, when creating a photo on an iPhone, you can be sure that you’ll pass on to all iPhone users exactly what you wanted to show in this photo. But the same image will look different on the screen of Samsung or LG phones. Sometimes, radically different. Often, the change is not for the better.

Some kind of averaged version of the image can be found in some modules for app development, such as sRGB image mode.

The Basics of RGB

sRGB is the color space within the RGB color space, within which any image can be built from a combination of the three colors Red, Green, and Blue. These terms are often met in the Adobe RGB documentation, which is used in the professional graphics industry. sRGB is a necessary minimum on smartphone screens to display the image accurately.

People who create content, videos, or photos, perform all actions on professional equipment and later upload this information to the network. Consumers can trust the settings and calibration of your screen. Still, with a high degree of probability the picture that users will see on the screen will not correspond to reality and the author’s idea.

The problem is that over time, smartphone users are not used to looking at the “right” picture and deceive themselves with various variations of the images that manufacturers provide. That is why it is not a fact that you can use the sRGB profile in everyday life — the eye will ask for more colors and contrasts.

Is There Anything Better than sRGB?

Yes, there is. For example, the DCI-P3 profile. It came to the mobile devices industry quite recently. This profile is implemented in the LG G5, iPhone 7, and 7+. It was also employed in the iPad Pro and the new Macbook. DCI-P3 is used in digital cinemas; this color space covers most of the natural color spectrum. If you work with graphics and images and aim to follow mobile app development trends, we recommend using this module.

Color Management Implementation

To realize dynamic color features, you have to refresh the Hardware Composer 2 operator to comprehend the coloring forms and employ them in your app development. In particular, the HWC2 module has to render the Display-P3 and sRGB color modes via HWCDisplay::GetColorModes.

Then, allow the required OpenGL supporter to convert OpenGL to HAL. Necessary OpenGL additives comprise:

1. EGL_EXT_pixel_format_float — enables applications to generate EGLSurfaces with 16-bit display color elements.
2. EGL_KHR_gl_colorspace — enables building EGLSurfaces presented in sRGB by OpenGL settings that maintain that capacity.

Custom Setting

You can also modify the coloring features by allowing maintenance for various patterns like DCI-P3, AdobeRGB, Rec709, and Rec2020. Other custom settings are:

• Color change maintenance in the layout pipeline: Allows maintenance of various color transformations in the toolkit.
• Autonomous color conversion on many layers: Preferably, completely produced by the layout generator (in other cases, Android should layout the GPU).

Implement Color Features in iOS App

There are several feasible ways to overcome the challenges in app development such as color-changing features in iOS. One option to do this is via Theme-specific ViewController. Using viewWillAppear you can set the colors, fonts, images, etc. to the user interface components by finding out what theme was picked in the last turn. The preference for themes can be saved in UserDefaults. However, there is a more solid way of introducing this functionality — Protocol oriented theming.

The two essential elements for achieving this are UIAppearance and Protocols. They allow implementing any color you want. As stated in the official documentation, UIAppearance is a set of techniques that provides entrance to display proxies for a class. This is a contract that delivers a proxy that transmits any form to instances of a special class.

As soon as the configuration is accepted, it is employed as the class is attached to the hierarchies of windows and may be utilized to all instances of the class or classes held in a particular hierarchical composition.

UILabel.appearance().textColor = .red

UINavigationBar.appearance().barStyle = blackTranslucent

This is how the code line needed to apply the chosen theme looks like:

struct ThemeManager {

static func apply(_ theme: Theme, application: UIApplication){ // 1

let appTheme = theme.appTheme

// 2

updateLabel(using: appTheme.assets.labelAssets)

// 3

appTheme.extension?()

// 4

application.keyWindow?.reload()

}

}

To modify the theme, change one line of code and you’ll see the result.

ThemeManager.apply(.red)

Final Word

The application development industry offers a wide range of color setting choices in your code. You only need to choose the most appropriate one. If you need help with mobile app development, SwagSoft is at your service! We are one of the top companies in Singapore with a dedicated team of the app and VR/AR development professionals. We love to perform complex tasks, always up to date with current trends and we are ready to realize your bravest ideas.