如何从android中的下拉菜单材料设计中删除下划线

Question

根据我的 android UI 中的材料设计指南，我似乎无法摆脱 Exposed Dropdown Menu 的黑色下划线。

下拉列表如下所示：

我尝试将背景设置为空、透明或自定义形状。 app:boxBackgroundMode="none" 也不起作用。

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/spinner_age"
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_rounded_button"
        android:hint="Age">

        <AutoCompleteTextView
            android:id="@+id/age_dropdown"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"/>

</com.google.android.material.textfield.TextInputLayout>

理想情况下，下拉菜单看起来像一个没有下划线的按​​钮。我该如何摆脱它？

Answer 1

使背景=空

 <AutoCompleteTextView
        android:id="@+id/age_dropdown"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null"/>

Answer 2

只需添加此行即可删除下划线

  android:inputType="textNoSuggestions"

Answer 3

请更改您的这一行

android:background="@android:color/transparent" 

有

android:background="#00000000"

Answer 4

只需使用 standard style @style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu 和

您不需要使用自定义背景形状，只需使用 app:boxCornerRadius* 属性来定义圆形。

类似：

        <com.google.android.material.textfield.TextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
            app:boxCornerRadiusBottomEnd="32dp"
            app:boxCornerRadiusTopEnd="32dp"
            app:boxCornerRadiusBottomStart="32dp"
            app:boxCornerRadiusTopStart="32dp"
            app:boxStrokeColor="@color/myselector"
            ...>

              <AutoCompleteTextView
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:background="@null"
                  />


        </com.google.android.material.textfield.TextInputLayout>

要改变组件下线条的颜色，你必须改变app:boxStrokeColor属性。只需根据您的喜好自定义选择器：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:alpha="0" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
  <item android:alpha="0" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:alpha="0" android:color="?attr/colorOnSurface"/>
</selector>

这是结果：

注意文档中的这个note：

注意：当使用带有 不是TextInputEditText 的EditText 子元素的填充文本字段时，请确保将EditText 的android:background 设置为@null。这允许TextInputLayout 在EditText 上设置填充背景。

替代方案：
在新版本 1.1.0 中，您还可以将 shapeAppearanceOverlay 属性用于组件的 customize the shape。

只需使用：

        <com.google.android.material.textfield.TextInputLayout
            style="@style/MyFilledBox_ExposedDropdownMenu
            ...>

              <AutoCompleteTextView
                  android:background="@null"
                  ... />

        </com.google.android.material.textfield.TextInputLayout>

还有这种风格：

  <!-- Rounded -->
  <style name="MyFilledBox_ExposedDropdownMenu" parent="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MyApp.TextInputLayout.Rounded</item>
    <item name="boxStrokeColor">@color/myselector</item>
  </style>

  <style name="ShapeAppearanceOverlay.MyApp.TextInputLayout.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">32dp</item>
  </style>

Answer 5

设置boxStrokeWidth = 0dp会解决它