#PMChallenge - Blur personalization in user interface. UI visual effect view.

  1. AnoopGanesh
    Cupcake Feb 20, 2019

    AnoopGanesh , Feb 20, 2019 :
    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

  2. LegolasX
    Jelly Bean Feb 20, 2019

    LegolasX , Feb 20, 2019 :
    I don't know but some app developers say it uses more resources than normal.
    i like blur personally but if it does eat more processing and resources i am better off without it.

  3. mahyunk
    Froyo Feb 21, 2019

    mahyunk , Feb 21, 2019 :
    I like this idea but you might want to check the images in the post, they're broken.

    AnoopGanesh likes this.
  4. Shapeshift3r
    Eclair Feb 25, 2019

    Shapeshift3r , Feb 25, 2019 :
    Nice idea but not according to contest guidelines. I'd suggest you to answer challenge questions and format the thread accordingly

    Venky61 likes this.