Как установить градиентный фон в кнопке материала из компонентов материала?

Question

Я пытался установить градиентный фон в кнопке "Материал" из "Компоненты материала для Android", но он не работает. Итак, возможно ли установить градиентный фон в кнопке материала? Если так, как это достигается?

Answer 1

Из документации дляMaterialButton:

Не используйте android:background приписывать. MaterialButton управляет собственным фоном для рисования, а установка нового фона означает MaterialButton больше не может гарантировать, что новые атрибуты будут работать правильно. Если фон по умолчанию изменен, MaterialButton не может гарантировать четкое поведение.

Единственный поддерживаемый способ изменить фон кнопки - установить значение цвета на app:backgroundTint приписывать. К сожалению, градиенты здесь также не поддерживаются; Вы можете использовать только простое значение цвета или ColorStateList,

Таким образом, не поддерживается способ использовать градиентный фон с MaterialButton.

Answer 2

Начиная с версии 1.2.0-alpha06 вы можете использовать android:background атрибут в MaterialButton.

<MaterialButton
    app:backgroundTint="@null"
    android:background="@drawable/button_gradient"
    ... />

В противном случае, если вы не можете использовать 1.2.0-alpha06 или выше, вам придется использовать AppCompatButton составная часть.

Просто несколько советов о MaterialButton.

• В настоящее время backgroundTintпо-прежнему является стилем MaterialButton по умолчанию.
  Если вы используете пользовательскийandroid:background, вы должны обнулить backgroundTint (либо app:backgroundTint="@null" или app:backgroundTint="@empty"), чтобы пользовательский фон не получился тонированным.
• используя обычай android:background по умолчанию MaterialShapeDrawableне используется. Некоторые функции, такие как обводка, внешний вид формы, рябь, не заданы (поскольку они связаны сMaterialShapeDrawable) . Вы должны предоставить им свой собственный фон.

Answer 3

Make use of androidx.appcompat.widget.AppCompatButton if you are using Material Theme to be able to apply background gradients, because Material Button doesn't offer support to it yet.

For background gradient, create 3 new resources in drawable folder:

selector_btn.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- disabled state -->
    <item android:drawable="@drawable/btn_gradient_inactive" android:state_enabled="false" />
    <item android:drawable="@drawable/btn_gradient_active" />
</selector>

btn_gradient_inactive.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#01579B"
        android:endColor="#1A237E"
        android:angle="0" />
    <corners android:radius="5dp"/> </shape>

btn_gradient_active.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#2196F3"
        android:endColor="#3F51B5"
        android:angle="0" />
    <corners android:radius="5dp"/>
</shape>

In your styles.xml:

<style name="BtnStyle" parent="Widget.AppCompat.Button.Borderless">
    <item name="android:layout_marginStart">35dp</item>
    <item name="android:layout_marginEnd">35dp</item>
    <item name="android:background">@drawable/selector_btn_gradient</item>
    <item name="android:textColor">@color/selector_text_color</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:textSize">14sp</item>
</style>

In your layout.xml file:

<androidx.appcompat.widget.AppCompatButton
    android:id="@+id/my_btn_id"
    style="@style/BtnStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Answer 4

Я нашел это решение.

<com.google.android.material.button.MaterialButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@drawable/selector_gradient_example"
      app:backgroundTint="@null" />

selector_gradient_example

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/banana_yellow">
    <item android:state_enabled="true">
        <ripple android:color="@color/banana_yellow">
            <item>
                <shape android:shape="rectangle">
                    <gradient android:angle="135" android:endColor="@color/banana_yellow" android:startColor="@color/main_yellow" />
                </shape>
            </item>
        </ripple>
    </item>
    <item android:state_enabled="false">
        <shape android:shape="rectangle">
            <gradient android:angle="315" android:endColor="#ede0be" android:startColor="#e0bf7e" />
        </shape>
    </item>
</selector>

Answer 5

У меня сработало удаление атрибута backgroundTint в xml.

Answer 6

btn_gradient.xml

    <?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#469FED"
        android:angle="90"
        android:endColor="#2AC88D"/>
    <corners android:radius="4dp"/>
</shape>

и используйте это вместо кнопки:

    <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:clickable="true"
                android:focusable="true"
                android:background="@drawable/btn_gradient">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:minHeight="40dp"
                    android:background="?attr/selectableItemBackground"
                    android:padding="5dp"
                    android:text="send" />
 </RelativeLayout>