Apply a gradient over multiple views

Question

I have a table layout that looks like a numeric keypad with circular buttons (the buttons are text views with a round background). Now I want to apply a gradient across the keyboard. but I want the gradient to appear only on the buttons. the area around the buttons should be white. Is there any way to achieve this through xml?

Answer 1

Update: Yes, I can come up with a way to do this in xml. set the gradient on the background layout. Then create an image with nine patches with a transparent circle of the desired size with a white filling around it and a small ninth patch defined around each edge (so that the circle does not stretch).

Set the TextView background to your ninth patch and make sure the grid cells are stretched to fit the entire table layout (so that the white edge of the merge merges.

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

Then, when you draw each button, you need to look at the y value of the button, translate the canvas by -y amount, and then draw a circle (canvas.drawCircle (..) in y using your shader paint. This should put the circle in one and the same the same place on the screen, with a color gradient displayed as if the gradient was drawn on the entire page, but displayed only where the buttons are located.

Answer 2

set the background color to white for the entire layout. And apply a gradient to each button:

Save gradiant_button.xml in res-> drawable folder

gradiant_button.xml

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_pressed="true"> <shape> <gradient android:startColor="#454545" android:endColor="#F0F0F0" android:angle="270"/> <stroke android:width="4dp" android:color="#B5F6EC"/> <corners android:radius="0dp" /> <padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" /> </shape> </item> <item android:state_focused="true"> <shape> <gradient android:startColor="#454545" android:endColor="#F0F0F0" android:angle="270"/> <stroke android:width="4dp" android:color="#B5F6EC"/> <corners android:radius="0dp" /> <padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" /> </shape> </item> <item android:state_enabled="false"> <shape> <gradient android:startColor="#454545" android:endColor="#F0F0F0" android:angle="270"/> <stroke android:width="4dp" android:color="#B5F6EC"/> <corners android:radius="0dp" /> <padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" /> </shape> </item> <item> <shape> <gradient android:startColor="#F0F0F0" android:endColor="#454545" android:angle="270"/> <stroke android:width="0dp" android:color="#000000"/> <corners android:radius="0dp" /> <padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" /> </shape> </item> </selector> 

See my git ref: https://github.com/iamsarker/android-apps/tree/master/CustomButton

And the xml button will be:

 <Button android:id="@+id/btn11" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="3" android:background="@drawable/gradiant_button" android:text="@string/btnText" />