Android实现带外边框的TextInputLayout与TextInputEditText，且提示文本显示在外边框上方

嘿，你完全不用折腾自定义控件！Material Components库本身就有现成的属性能实现你要的「提示文本始终显示在外边框上方」的效果，我给你整理了具体的实现步骤：

1. 调整TextInputLayout的样式 #

只需要在你现有的样式基础上，添加几个关键属性就能搞定：

• hintEnabled="true"：确保hint功能正常启用
• expandedHintEnabled="true"：强制提示文本始终显示在边框的上方（也就是"展开"状态的位置）
• hintAnimationEnabled="false"：关闭默认的浮动动画，避免提示在输入框内部和上方来回切换
• 可选：自定义hintTextAppearance来调整提示的大小、和边框的间距，让它更贴合你的设计

修改后的完整样式代码如下：

<style name="TextInputLayoutAppearance" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
    <item name="boxStrokeColor">@color/text_input_box_stroke_color</item>
    <item name="shapeAppearanceOverlay">@style/TextInputLayoutMaterialThemeRoundedShapeAppearanceOverlay</item>
    <item name="hintTextColor">@color/hint_color</item>
    <item name="android:textColorHint">@color/hint_text</item>
    <!-- 新增核心属性，实现提示固定在边框上方 -->
    <item name="hintEnabled">true</item>
    <item name="expandedHintEnabled">true</item>
    <item name="hintAnimationEnabled">false</item>
    <!-- 可选：自定义提示文本的样式，调整间距和大小 -->
    <item name="hintTextAppearance">@style/CustomHintTextAppearance</item>
</style>

<!-- 自定义提示文本样式（按需调整） -->
<style name="CustomHintTextAppearance" parent="TextAppearance.MaterialComponents.Hint">
    <item name="android:textSize">14sp</item>
    <item name="android:paddingBottom">8dp</item> <!-- 控制提示和边框的距离 -->
</style>

<style name="TextInputLayoutMaterialThemeRoundedShapeAppearanceOverlay" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">@dimen/_8sdp</item>
</style>

2. 布局中的配置 #

确保你的TextInputLayout设置了android:hint属性，这样提示文本才会正常显示：

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/TextInputLayoutAppearance"
    android:hint="你的提示文本内容">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text"/>

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

原理说明 #

• expandedHintEnabled会强制TextInputLayout一直使用"展开"状态的hint位置，也就是边框上方，不管输入框有没有内容。
• hintAnimationEnabled="false"关闭了默认的浮动动画，彻底避免提示文本在输入框内部和上方切换的情况。
• 这种方案完全基于Material Components的原生属性，不需要自定义控件，不仅维护简单，还能和其他Material组件保持风格统一。

如果之后你需要更灵活的提示位置控制（比如偏离边框上方的默认位置），也可以在TextInputLayout上方加一个独立的TextView来显示提示，同时把TextInputLayout的hintEnabled设为false，不过上面的原生方案已经能满足大多数场景啦。

内容的提问来源于stack exchange，提问作者Bipin Vayalu