Применение градиента над несколькими видами

Question

У меня есть таблица, которая выглядит как цифровая клавиатура с круговыми кнопками (кнопки представляют собой текстовые изображения с круглым фоном). Теперь я хочу применить градиент по всей клавиатуре. но я хочу, чтобы градиент отображался только на кнопках. пространство вокруг кнопок должно быть белым. Есть ли способ достичь этого через xml?

Answer 1

Обновление: Да, я могу придумать способ сделать это в xml. установите градиент на макете фона. Затем создайте изображение с девятью патчами с прозрачным кругом нужного размера с белым заполнением вокруг него и небольшим девятым патчем, определенным вокруг каждого края (так что круг не растягивается)

Установите для фона TextView значение ваш девятый патч и убедитесь, что ячейки сетки растягиваются, чтобы соответствовать всему расположению таблицы (так что белые края слияния объединяются.

Оригинальный ответ: Я не могу придумать простой способ сделать это и определенно не в xml. Вам, вероятно, понадобится создать класс, который расширяет класс Drawable, чтобы вы могли переопределить метод onDraw. Вам нужно будет создать RadialGradient (шейдер, а не Drawable), а затем каждая кнопка создаст краску с шейдером, установленным на вашем общий шейдер.

Затем, когда вы рисуете каждую кнопку, вам нужно посмотреть на значение y для кнопки, перевести холст на -y сумму и затем нарисовать круг (canvas.drawCircle (..) в y, используя вашу шейдерную краску , Это должно помещать круг в одно и то же место на экране, с градиентом цвета, отображаемым так, как если бы градиент был нарисован на всей странице, но отображался только там, где расположены кнопки.

Answer 2

установить цвет фона белый для всего макета. И применить градиент к каждому и каждой кнопке:

Сохрани gradiant_button.xml в ваше приложении res-> вытяжка папка

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> 

Смотрите мой GIT реф: https://github.com/iamsarker/android-apps/tree/master/CustomButton

И кнопка xml будет:

<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" />