Applying gradient over multiple views

Question

I have a table layout that looks like a numeric keypad with circular buttons (the buttons are textviews with round background). Now i want to apply gradient across the entire keypad. but i want the gradient to be visible only on the buttons. the space around the buttons should be white. Is there any way to achieve it through xml?

Answer 1

Update: Yes, I can think of a way to do that in xml. set the gradient on the background layout. Then create a nine patch drawable image with a transparent circle of the size you need with a white fill around it and a small nine patch defined around each edge (so the circle doesn't get stretched)

Set the TextView background to your nine patch and make sure the grid cells stretch to fit the entire table layout (so the white edgee merge together.

Original answer: I can't think of an easy way to do it and definitely not in xml. You will probably need to create a class that extends the Drawable class so you can override the onDraw method. You would need to create a RadialGradient (the Shader, not a Drawable) and then each button would create a paint with the shader set to your common shader.

Then when you draw each button you'd need to look at the y value for the button, translate the canvas by -y amount and then draw a circle (canvas.drawCircle(..) at y using your shader paint. That should put the circle in the same place on screen, with the color gradient mapped as if the gradient was drawn across the entire page, but only visible where the buttons .