返回

TextInputLayout图标变灰?3招解决Android Material输入框Drawable不可见问题

Android

TextInputLayout 中 Drawable 不可见的排查

TextInputLayout 是 Android Material 组件中常用的输入框组件。往其中添加 Drawable 图标时,经常会遇到图标颜色变灰、不够清晰的问题。本篇旨在分析问题根源,并给出多种解决方案。

问题分析

默认情况下,TextInputLayout 会应用 Material Design 的主题颜色。当把 app:endIconDrawable 设置为自定义图标时,图标会继承 TextInputLayout 的颜色属性。如果主题颜色和图标颜色接近,就容易出现图标显示不清或灰色的情况,这影响了用户界面的可读性。

app:boxBackgroundMode="none" 的作用是取消 TextInputLayout 周围的边框和背景样式,跟图标颜色无关,无法解决图标显示的问题。

解决方案一:设置 Drawable 的颜色滤镜

为 Drawable 设置颜色滤镜是一种直接控制图标颜色的方法。使用setColorFilter方法,传入一个目标颜色和一个 PorterDuff.Mode。常见的 PorterDuff.ModeSRC_IN,它将源图颜色与目标颜色进行合成,实现变色的效果。

代码示例:

    TextInputLayout textInputLayout = findViewById(R.id.descriptionLayout);
    ImageView endIcon = textInputLayout.findViewById(com.google.android.material.R.id.text_input_end_icon);

    Drawable microphoneDrawable =  getResources().getDrawable(R.drawable.ic_microphone);
    int desiredColor = ContextCompat.getColor(this, R.color.your_desired_color);
    microphoneDrawable.setColorFilter(desiredColor, PorterDuff.Mode.SRC_IN);

    if(endIcon != null){
       endIcon.setImageDrawable(microphoneDrawable);
    }

操作步骤:

  1. 获取 TextInputLayoutendIcon ImageView。
  2. 获取原始的 microphoneDrawable 并创建一个副本。
  3. 使用 setColorFilter 方法给 microphoneDrawable 设置新的颜色,desiredColor是你想要的颜色。R.color.your_desired_color需要替换为你定义的颜色值,确保主题颜色与图标有明显反差。
  4. 将处理过的 microphoneDrawable 设置到 endIcon

这个方案的优势是能精准控制图标的颜色。

解决方案二:使用着色资源

可以使用 Android 提供的着色功能。先在资源文件中定义着色规则,然后在 TextInputLayout 中引用这个资源,无需在代码中进行额外的颜色设置。这更方便管理,并且避免了直接修改 drawable 的引用带来的问题。

代码示例:

  1. 创建一个名为 icon_microphone_tint.xml 的可绘制资源, 放在 res/drawable 文件夹中

      <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:tint="@color/your_desired_color"
         android:height="24dp"
         android:width="24dp"
          android:viewportWidth="24"
           android:viewportHeight="24">
        <path
         android:fillColor="@android:color/black"
         android:pathData="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.49 6-3.31 6-6.72h-1.7z"/>
      </vector>
    

    @color/your_desired_color 替换为你想要的颜色值。 需要注意使用vector 图标,以便设置tint颜色。

  2. TextInputLayoutendIconDrawable 中引用此着色资源

  <com.google.android.material.textfield.TextInputLayout
          ...
        app:endIconDrawable="@drawable/icon_microphone_tint"
          ...
  </com.google.android.material.textfield.TextInputLayout>

操作步骤:

  1. 创建 icon_microphone_tint.xml 着色资源,指定需要的颜色。
  2. 在布局文件中直接使用 app:endIconDrawable="@drawable/icon_microphone_tint" 即可。
    这种方案的优势是方便管理并且具有更好的性能,系统只会创建一份着色资源。

解决方案三:使用彩色图片作为 Drawable

可以尝试将原来的黑白图片替换为带有颜色的图片,或者选择一个原本就与主题色差异较大的彩色图片。这样可以直接避免颜色冲突问题,简单直接。需要注意的是,色彩明亮或鲜艳的彩色图标会更吸引用户目光,但也可能过于突兀。 选择时请仔细考虑整个UI风格的一致性。

操作步骤:

  1. 找到一个你想要显示的颜色的麦克风图标,并替换你的 drawable ic_microphone 图标资源文件
  2. 直接使用。无需额外的配置,图标会显示本身的颜色

这种方法适合对颜色有精确要求的场景,但要谨慎选择图标颜色,确保它能跟 UI 设计保持协调。

安全建议

在解决 TextInputLayout 中 Drawable 图标显示问题时,一些额外安全建议如下:

  1. 避免使用硬编码的颜色值 。优先在 colors.xml 文件中定义颜色值,然后在代码或资源文件中引用它们。
  2. 不要在多个地方重复定义颜色或资源 ,统一资源,便于后期维护和更新。
  3. 对图像资源进行优化 ,使用 SVG 或者 WebP 等高效的格式。这样既保证图像质量,又减小了 APK 包的大小。
  4. 仔细测试不同主题下的图标颜色表现 ,确保在浅色主题和深色主题下都具有良好的可见度。

总之,要灵活运用各种手段,既能解决问题,又能让 UI 更易于使用,更有吸引力。希望上述解决方案能够帮你有效解决 TextInputLayoutDrawable 显示不清晰的问题。