如何从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

请更改您的这一行

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

和

android:background="#00000000"

Answer 2

使背景 = 空

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

Answer 3

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

  android:inputType="textNoSuggestions"

Answer 4

只需使用标准样式@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>

这是结果：

注意文档中的这个注释：

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

选择：
在新版本 1.1.0 中，您还可以使用shapeAppearanceOverlay属性来自定义组件的形状。

只需使用：

        <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可以解决它