Add Gradient Blur Feature to Haze Library

itsbppradhan commented 2 months ago

Hello,

I am a Class 10 student and I have been developing Android apps for over 3-4 years. Currently, I am working on a project to design a custom Android rom. I am interested in enhancing the visual design and user experience by incorporating advanced blur effects. I believe that adding a gradient blur haze feature to the Haze library would significantly contribute to achieving this goal.

I am enthusiastic about contributing to this library and would love to collaborate with you on this feature. I am willing to make a pull request if possible, though I have limited time due to my studies. Your guidance and support in this endeavor would be greatly appreciated.

Feature Requirements:

Gradient Direction: Apply a blur that is very intense at the top and gradually reduces as it moves towards the bottom. Allow for customizing direction of the gradient, such as from top to bottom, bottom to top, left to right, and right to left. Diagonal gradients could be implemented later if possible.
Blur Intensity Control: Provide a way to control the starting and ending intensity of the blur.
Consistency and Fade Control: Allow the blur to consistently continue for a few dp, then immediately or gradually fade out over a small amount of dp.
Interactive UI: Implement an easy-to-use interface for applying and adjusting the gradient blur haze.

Benefits:

Enhances the visual design of applications by providing a smooth transition effect.
Improves user experience by creating a visually appealing effect as content scrolls up and fades out at the top.
Mimics the high-quality blur effects seen in iOS, specifically in the search feature and app library menu.

Example use case

I have made a prototype of a blurred app bar where content on reaching the top gradually fades out as it scrolls up more. This feature would enable such effects seamlessly, enhancing the UI/UX of applications using Haze.

Link to my project: https://github.com/itsbppradhan/blurbar

Thank you for considering my request.

Best regards, @itsbppradhan

chrisbanes commented 2 months ago

Interesting request! I’m less worried about implementing the effect, but more what the API would look like.

Just like your demo, the easiest way is probably to quantize the gradient into steps, and then merge the RenderEffects together.

Just need to think what the API would look like

chrisbanes commented 2 months ago

In fact, I’ve thought of a better way. The API would be a simple mask: Brush?, and we can then draw it to a bitmap and use a blend mode effect to apply it.

Devs can provide a Brush.verticalGradient or whatever they want.

itsbppradhan commented 2 months ago

Hmm... sounds nice...

P. s. I do reply but it can be late as I don't check my phone frequently except at night

Edit1: Will it work the same for fallback logic?

itsbppradhan commented 2 months ago

Though it may be a bit off-topic, it has been a while since I touched the RenderEffect library. Now, while summoning the RenderEffect library, it throws a type mismatch error between android.graphics.RenderEffect and androidx.ui.compose.graphics.RenderEffect.

If I import androidx.ui.compose.graphics.RenderEffect, there are no methods to call inside. :'(

This issue is occurring on both API 34 and API 31.

Any advice or insights on resolving this would be greatly appreciated.

Thank you!

i wanted to try this piece of code even though it might probably break

fun Modifier.gradientBlurEffect(): Modifier {
    return this.graphicsLayer {
        renderEffect = RenderEffect.createRuntimeShaderEffect("""
            uniform shader content;
            uniform float progress;
            vec4 main(vec2 coord) {
                float radius = mix(10.0, 0.0, coord.y / progress);
                vec4 color = vec4(0);
                if (radius > 0.0) {
                    color = content.eval(coord);
                }
                return color;
            }
        """, RuntimeShader).apply {
            setShaderContent("content", this@graphicsLayer)
            setFloat("progress", size.height)
        }
    }
}

6xingyv commented 1 month ago

I think current gardient blur mask doesn't using the progressive blur radius, leading to a appearence less wonderful

chrisbanes commented 1 month ago

What do you mean by 'progressive'?

You can build a Brush to be based on a curve. There some sample code here: https://github.com/chrisbanes/haze/blob/main/sample/shared/src/commonMain/kotlin/dev/chrisbanes/haze/sample/Gradient.kt

6xingyv commented 1 month ago

I mean, instead of apply alpha mask, increase the blur radius gradually like that. So we can create a more delicate blur effect

chrisbanes commented 1 month ago

You've just shown exactly what the mask feature is for. The color stops you use in the Brush gradient is up to you.

If you only want to have a gradient over the last 10%, you can do that by computing those colors.

6xingyv commented 1 month ago

No, there are slightly difference between alpha mask and REAL GARDIENT BLUR(a blur effect with the blur radius increasing in a direction) In REAL GARDIENT BLUR, all we can see is the border melt in blurred bg. But in alpha mask, we can still see the distinctive border behind the blurred result

chrisbanes commented 1 month ago

CAN YOU CHECK YOUR TONE.

I understand the difference between overlapping blurs and alpha masks. The mask we've added is a quick and cheap way to get 90% of the effect.

I have no plans right now to explore overlapping blurring.

6xingyv commented 1 month ago

Sorry for the impolite tone, I'm not a English native speaker and didn't understand the upper case and bold title could be impolite until I asked ChatGPT.

chrisbanes / haze