Make an imageview blurred towards the vertical edges in Android

user_18571653 0
Viewed 262

I would like to design a layout containing an imageview and a background view with two special effect. First is where the main imageview gets transformed with faded towards the vertical edges and second is a background imageview with a blurred effect like the image

here

The result that i am able to achieve

here

I saw this post for my first effect and currently using it, but it does not work when I change my phone into dark mode so I am not getting a perfect solution.

And the second special blur effect that i am able to achieve is far way different from what i want to achieve. The required blur effect has some hardness of the different shades of color and mine one is quite smooth. For my blur effect I am using the below code and I am using the library Fresco for my image.

ImageRequest request = ImageRequestBuilder.newBuilderWithSource(Uri.parse(imageUrl))
            .setPostprocessor(new IterativeBoxBlurPostProcessor(60)).build();

PipelineDraweeController controller = (PipelineDraweeController) Fresco.newDraweeControllerBuilder()
            .setImageRequest(request)
            .setOldController(backgroundImage.getController())
            .build();
backgroundImage.setController(controller);

Can anyone please suggest me any good solution or any good library for it or some code sample that can help me to achieve what I want.

imageview android-layout android java
1 Answers

The point to note here is the blurred background is an extension of the image itself. So if the left side of the screen has a purple hue the blurred region at the top left will be purple as well.

YOu can use a library like Blurry where it blurs the contents of the screen and then set that as a background. You can control the amount of blur you want.

Once you get the blurred image set it as the background of the container layout and set the picture in front

eg:

val bitmap = Blurry.with(this)
  .radius(10) // make it more if you want the lue to be more
  .sampling(8)
  .capture(findViewById(R.id.right_bottom)).get() // get the view you want to blur
imageView.setImageDrawable(BitmapDrawable(resources, bitmap)) // set the value to the background
user_135330280
Related