如何在edittext android中添加上边的下划线

时间:2017-08-06 05:15:34

标签: android android-layout android-edittext

我想在edittext

中添加这种类型的下划线

example

XML

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/InputLayout">

    <android.support.v7.widget.AppCompatEditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Name" />

</android.support.design.widget.TextInputLayout>

风格

<style name="InputLayout" parent="TextAppearance.AppCompat">
    <item name="android:textSize">18sp</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textColorHint">@color/grey</item>
    <item name="colorAccent">@color/white</item>
    <item name="colorControlNormal">@color/white</item>
    <item name="colorControlActivated">@color/colorPrimary</item>
    <item name="android:background">@drawable/edit_draw</item>
</style>

但是当它聚焦时它会显示它自己的下划线以及背景可绘制的,并且你可以看到我使用的drawable也不能正常工作。

enter image description here

3 个答案:

答案 0 :(得分:1)

你必须从EditText里面的布局中删除背景,因为它有自己的。

<android.support.design.widget.TextInputEditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null"
        android:hint="Name"/>

答案 1 :(得分:1)

只需创建像edit_text_design.xml这样的xml文件并将其保存到drawable文件夹

Templates

然后在你的xml中使用它来编辑EditText,就像这样

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<!-- underline color -->
<item>
    <shape>
        <solid android:color="#41e3ec" />
    </shape>
</item>

<!-- main color -->
<item
    android:bottom="1.5dp"
    android:left="1.5dp"
    android:right="1.5dp">
    <shape>
        <solid android:color="#FFFFFF" />
    </shape>
</item>

<!-- draw another block to cut-off the left and right bars -->
<item android:bottom="5.0dp">
    <shape>
        <solid android:color="#FFFFFF" />
    </shape>
</item>

没有theam需要..

像这样输出 enter image description here

答案 2 :(得分:0)

添加此代码以改变状态行为以及Enamul Haque回答

创建一个drawable并为其指定Edittext

Edittext xml

<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/InputLayout">

        <android.support.v7.widget.AppCompatEditText
            android:padding="7dp"
            android:id="@+id/editText"
            android:background="@drawable/editext_states"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Name" />

    </android.support.design.widget.TextInputLayout>

可绘制

<selector
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
    android:state_pressed="true"
    android:drawable="@drawable/underline_blue"
    /> <!-- pressed -->
<item
    android:state_focused="true"
    android:drawable="@drawable/underline_red"
    /> <!-- focused -->
<item
    android:drawable="@drawable/underline_normal"
    /> <!-- default -->

创建三个drawable并根据需要更改它们的颜色,并用

替换这些drawable