Niko
Niko

Reputation: 8153

Android masking background with round gradient shape

I need to implement following component, but not sure where to start.

I have two fragments stacked. Top fragment has gradient background and other content as well. Fragment below that has also own content and you should be able to see below content.

Following picture demonstrates the situation and the white round should be movable, so user can see below content on certain position.

enter image description here

Upvotes: 3

Views: 2485

Answers (1)

andr
andr

Reputation: 16054

I recommend the solution from Romain Guy. As far as I know this is the simplest (and possibly most efficient method since he recommended it). The solution is based on Shaders.

You can find code, description, whole project, sample video and screenshots here: http://www.curious-creature.org/2012/12/13/android-recipe-2-fun-with-shaders/

You would start your customization by adjusting the mask PNG file. Then you'd probably supply a shader parameter for the fragments which they would utilize when drawing. Finally you'd set the proper shader for each of the fragments after every pointer movement event.

I know it's just a sketch of the solution, but the whole project code provided in the link above should get you going really fast.

Upvotes: 3

Related Questions