Android 如何在 TextInputLayout 上显示边框

Question

在我的应用程序中，我想使用 TextInputLayout 并为此视图设置边框。
比如这张图：Image

我写下面的代码：

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/loginFrag_phoneInputLayout"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/_15mdp"
    android:layout_marginLeft="@dimen/_15mdp"
    android:layout_marginTop="@dimen/_15mdp"
    android:layout_marginEnd="@dimen/_15mdp"
    android:layout_marginRight="@dimen/_15mdp"
    android:hint="@string/insertYourPhoneNumber"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/loginFrag_title">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/signInFrag_phoneEdt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:gravity="right|center_vertical"
        android:inputType="phone"
        android:maxLength="11"
        android:maxLines="1"
        android:paddingLeft="@dimen/_10mdp"
        android:paddingRight="@dimen/_10mdp"
        android:singleLine="true"
        android:textColorHint="@color/colorLightGray"
        android:textSize="@dimen/_10mdp"
        app:drawableRightCompat="@drawable/ic_phone" />

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

我添加了这一行：

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

但是当更新 material 设计库到 v1.3 时不显示任何边框！

'com.google.android.material:material:1.3.0'

但在 v1.2 或 v1.1 显示边框没有任何问题！

为什么 v1.3 中不显示边框？
我该如何解决？

Answer 1

我也在使用 v 1.3.0 并使用以下代码获得正确的边框：

 <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/loginFrag_phoneInputLayout"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp"
        android:hint="Phone Number"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:startIconDrawable="@drawable/ic_action_phone"
        >

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/signInFrag_phoneEdt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="phone"
            android:maxLength="11"
            android:maxLines="1"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:singleLine="true"/>

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

Answer 2

您必须删除 TextInputEditText 中的背景android:background="@android:color/transparent"。

也不要在 TextInputEditText 中使用 app:drawableRightCompat="@drawable/...."，而是使用：

    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:endIconDrawable="@drawable/..."
        app:endIconMode="custom"

Android 如何在 TextInputLayout 上显示边框

How to show border on TextInputLayout in Android

xml

android

android-layout

material-design

android-textinputlayout