材质按钮的禁用颜色状态

时间:2019-04-06 04:12:51

标签: android android-layout colors material-design android-button

“材料规格”显示的按钮状态为灰色,处于禁用状态。

https://www.material.io/design/components/buttons.html#toggle-button

我正在使用Android材质组件中的MaterialButton: https://www.material.io/develop/android/components/material-button/

但是,将按钮设置为禁用时,按钮的颜色/色调不会改变。

<com.google.android.material.button.MaterialButton
    android:id="@+id/disabled_material_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:enabled="false"
    android:text="@string/button_label_disabled"/>

默认情况下,是否没有在Material Android组件中实现?材料组件是否定义了禁用的按钮状态列表?

4 个答案:

答案 0 :(得分:11)

使用默认样式Widget.MaterialComponents.Button时,用作default selectorbackgroundTint可以处理禁用状态,而无需进行任何更改:

它是默认选择器:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorPrimary" android:state_enabled="true"/>
  <item android:alpha="0.12" android:color="?attr/colorOnSurface"/>
</selector>

只需使用:

    <com.google.android.material.button.MaterialButton
        android:enabled="false"
        ..>

enter image description here

如果要更改禁用的颜色,可以使用自定义选择器

    <com.google.android.material.button.MaterialButton
        app:backgroundTint="@color/my_selector"
        ..>

或者您可以覆盖默认选择器中使用的颜色:

    <com.google.android.material.button.MaterialButton
        android:theme="@style/button_overlay"
        ..>

具有:

    <style name="button_overlay">
       <item name="colorOnSurface">@color/my_color</item>
    </style>

答案 1 :(得分:4)

  1. 在res文件夹中创建一个新的 Android资源目录。将其命名为“颜色”(请参见附件)。
  2. 创建一个名称为“ button_disabled”的色彩资源文件(请参见附件图像)。
  3. 将以下代码放入button_disabled.xml
<?xml version="1.0" encoding="utf-8"?>
        <selector xmlns:android="http://schemas.android.com/apk/res/android">
            <item android:state_enabled="false" android:color="#FD7E14" android:alpha="0.45"   />
            <item android:color="#FD7E14" />
        </selector>
  1. 找到您的values / styles.xml并添加以下代码
<style name="AppMaterialButton" parent="Widget.MaterialComponents.Button.UnelevatedButton">  <item name="android:backgroundTint">@color/button_disabled</item> </style>
  1. 转到您的layout / activity_filename.xml文件并添加它 android:enabled="false"到您的按钮小部件。
<com.google.android.material.button.MaterialButton
       android:enabled="false"
       android:id="@+id/button_Join"
       style="@style/AppMaterialButton"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:text="next" 
       app:cornerRadius="0dp" />

Android Resource Directory

Create a Color Resource File

答案 2 :(得分:0)

您应该使用ThemeOverlay并分别应用有色样式

    <style name="AccentButton" parent="ThemeOverlay.AppCompat.Dark">
         <!-- customize colorButtonNormal for the disable color -->
         <!-- customize colorAccent for the enabled color -->
    </style>

    <Button
        android:id="@+id/login_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/fragment_login_login_button"
        android:theme="@style/AccentButton"
        style="@style/Widget.AppCompat.Button.Colored"/>

答案 3 :(得分:0)

  1. /res/color目录中创建文件夹res
  2. 在此处添加一个新的颜色资源文件,其名称类似于 color_states_materialbutton.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false"
        android:color="@color/colorDisabled"  />
    <item android:color="@color/colorEnabled" />
</selector>
  1. styles.xml 中创建样式,以Widget.MaterialComponents.Button样式之一作为其父样式,并将颜色状态列表作为backgrountTint标签:
<style name="MaterialButtonStyle" parent="Widget.MaterialComponents.Button.UnelevatedButton">
        <item name="backgroundTint">@color/color_states_materialbutton</item>
</style>
  1. 在布局的MaterialButton上设置样式:
<com.google.android.material.button.MaterialButton
    style="@style/MaterialButtonStyle"
    android:id="@+id/disabled_material_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:enabled="false"
    android:text="@string/button_label_disabled"/>