Ever since the design of Oxygen OS dramatically changed in OOS 9.0.0, blurs have to play an important part in app design. When used appropriately, blurs can significantly improve the usability and appearance of your apps.
Let’s take a look at how Oxygen OS can use blurs at a system level. One of the most notable examples is in notification drawer and on lockscreen. The blurred background preserves the context of the action – notification drawer is not its own app, but a panel shown above the active app.
well we can use this effect in Notification Center of a lockscreen as well, but rather than blurring the entire background, each Notification Center extension or notification should have its own blurred background. Besides simply looking beautiful, this blur helps each element stand out just the right amount.
P.s *just an example of notification center on lockscreen.
How Blurs Work
All blurs start with an image. To achieve a blur, you apply a blurring algorithm to each pixel in the image; the resulting image then contains an evenly blurred version of the original image. Blurring algorithms vary in style and complexity, but in this section we’ll examine a common algorithm known as Gaussian blur.
Blurring algorithms generally examine each pixel of an image and use the surrounding pixels to calculate new color values for that pixel. For example, consider the following theoretical image grid:
Each cell in the above grid represents an individual pixel, and each pixel has a value between 1 and 10. Consider the case where the algorithm is evaluating the center pixel. The algorithm averages the values of the surrounding pixels and inserts this averaged value into the center pixel, resulting in the following new pixel grid:
we then repeat this process for every pixel in the original image.
The sample algorithm above only examined one pixel in each direction to create the new averaged value. You can expand this blur radius even further to increase the amount of blurring in your image, as demonstrated in the image below:
Note: Generally, the greater the blur radius, the greater the processing power required to process the image. Oxygen OS should offload most image processing activities to the GPU to keep the main thread free.
Blur Design Strategies
Humans have a tendency to pay attention to elements that are in-focus and ignore those that aren’t. Believe it or not, this is a natural consequence of how our eyes work. Focusing on an object as it moves closer or further away from the eye is known as accomodation; it’s what helps you perceive the depth and distance of objects around you.
Clear Facts on Blurs and Final words
Executing blurs in a tasteful – and efficient – manner takes a bit of finesse.
hope Oneplus will bring this feature in upcoming oxygen updates.
Thank you.
Last edited: Feb 21, 2019
