How can I set up a popup window in an Android Cordova application to have a blurred background? The content behind it will not be known in advance, and may contain both images and other components from multiple sources. It will not necessarily only appear over a single image. The effect I'm looking for will look something like this:
Things I've investigated so far:
The approaches described in the answers to Background blur with CSS, which tend to rely on having the background already available as an image (e.g. here's a modification of the accepted answer that shows that only the background image gets blurred, and that any text placed on top of the background is lost by the effect), or use the CSS property backdrop-filter which isn't currently implemented on Android's web view component.
Using html2canvas and similar approaches to generate an image then blurring the image. This sort-of works, but is too slow to use on complex layouts on low end phones, resulting in an unacceptably long delay before the popup appears.
Is there another approach that can make this work?
If you use crosswalk-plugin for android, add --enable-experimental-web-platform-features to XWALK_COMMANDLINE, then you can use backdrop-filter, but It still have some bug. you can test this feature in you chrome, open chrome://flags and open enable-experimental-web-platform-features.
Did you try svg filter?
Maybe this can help you https://www.w3schools.com/graphics/svg_fegaussianblur.asp :)
Related
I'm building app with one main activity which UI looks like TV remote. I need to show interactive response to the user when he interacts with UI through taps.
UI is created with Illustrator. I was searching for some SVG solutions but only found animation and morph libraries. Turns out I need to reload part of the UI, because reloading everything on every tap seems heavy on performance.
What good solutions there are for this problem? Load SVG in parts and put it together with css? I'm even considering moving to native Android if there's no way, because my app depends on some phone hardware control. By the way, I'll also be moving design to Adobe XD for prototype creation, so maybe there's something to go in line to make life easier.
So here's a way I solved this:
Give names to illustrator layers to be exported (even hidden layers should be shown to be exported)
Export selected artboard as SVG with internal CSS and select 'layer names' for Object IDs
Open SVG in editor and adjust initial styling as needed (gradient, stroke, hide layers to be switched etc).
Use SVGR to convert SVG into React component
Set component position
Pass props to React component to change styling at runtime and interact with user
I am building an android app. I am new to this, I found out an interesting activity UI development, But I don't know how to describe that property properly in android terms-(I SINCERELY APOLOGIZE FOR THAT ).I am adding a video, Please consider it.Free Flowing multi-directional Smooth scrollable android overlay UI (Please turn on the subtitles on)
How to have that kind of UI overlay suppose I want to display a large image or file with multiple clickable buttons on it[I have already tried various Image loading libraries to load big size images and to make that Multidirectional scrollable].But that's not the exact thing which I want (like you can see the above mentioned reference).
So how can I execute that?
Thank you In advance for considering your time.
I'm attempting to create an activity which allows a user to mask out part of an image. The way I'm trying to achieve this (yes trying, because it still isn't working for me, please see my other SO questions), is by painting a color over the base image using the canvas. I saw an app this morning which basically does exactly what I need and I thought I'd ask here if anyone knows how the app is doing the hard work and if there is a good tutorial or documentation somewhere for this concept?
Basically you press part of the image and it automatically masks out to the edges of the object in the image, you press again to add more, and press to remove.
the app is called "AThumb Cut" and hope its ok to link to it here https://play.google.com/store/apps/details?id=com.instacut2
This is an amazing application indeed. They work like Magi tool in PhotoShop. Try this tutorial it tells you how to do it in Java.
What I mean to say while you're just getting started with the development and say you add a slider theres a predefined skin for that and you can place it somewhere on the screen, but in some apps there are things like a knob in a place of slider which you can rotate to do the same stuff what the slider does . How do they do that, does it require openGL or something I am not asking for a complete tutorial or something just curious on what stuff goes into building such thing
Mostly, if something is not provided out of the box, you will have to build your own control.
For example, you mention a Knob. That isn't available in the Android SDK. Such a control could prove to be useful.
Here is a tutorial to build such a custom Control: http://go-lambda.blogspot.in/2012/02/rotary-knob-widget-on-android.html
This is an image of the final result from the tutorial linked above:
Here is an example of a custom slider / seek bar: http://permadi.com/blog/2011/11/android-sdk-custom-slider-bar-seekbar/
This should give you a rough idea on how to go about creating your own custom views.
And finally, what I personally find the best possible resource for keeping track of almost all good Custom Views is here: http://www.androidviews.net/
The androidviews.net website has shut down. Android Arsenal is a new website that lists several third party Android libraries.
i've saved my icon as a png-32, with transparency checked and tried saving for web but the black background is still there. i've also saved as a nornmal png and still no good. i fixed this about 6 months ago but for the life of me i can't remember now.
any help would be great thanks
The actual technique will depend somewhat on the application you're using, but it's very easy to do in Gimp (free). You simply add a transparent layer, select the background and then delete it. Here's a link that explains the process: http://www.fabiovisentin.com/tutorial/GIMP_transparent_image/gimp_how_to_make_transparent_image.asp.
If you're using a different tool, such as Photoshop, the exact process will of course be slightly different. Hope this helps.