Cách thay đổi màu gạch chân EditText trên Android

Giới thiệu

Mặc định EditText có gạch chân dưới cùng. Từ API 21 (Lollipop), có thể thay đổi màu gạch chân này dễ dàng bằng thuộc tính backgroundTint hoặc backgroundTintList.

Ví dụ minh họa

Bước 1: Tạo project

Android Studio → File → New Project.

Bước 2: Layout (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:id="@+id/parent"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:gravity="center"
    android:orientation="vertical">
    <EditText
        android:id="@+id/editText"
        android:hint="Bottom line color change"
        android:layout_width="wrap_content"
        android:backgroundTint="@android:color/holo_green_light"
        android:layout_height="wrap_content" />
</LinearLayout>

Giải thích: Thuộc tính android:backgroundTint="@android:color/holo_green_light" thay đổi màu gạch chân (và background tint) thành xanh lá.

Bước 3: Code (src/MainActivity.java)

package com.example.andy.myapplication;

import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Kết quả

EditText hiển thị với gạch chân màu xanh lá (holo_green_light) thay vì màu mặc định.

Các cách thay đổi màu gạch chân

1. XML - backgroundTint (API 21+)

<EditText
    android:backgroundTint="@color/custom_color" />

<EditText
    android:backgroundTint="#FF0000" />

2. XML - backgroundTintList (StateList - màu theo trạng thái)

<EditText
    android:backgroundTint="@drawable/edittext_tint_selector" />

res/color/edittext_tint_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:color="@color/colorPrimary" android:state_focused="true" />
    <item android:color="@color/colorAccent" android:state_pressed="true" />
    <item android:color="@color/gray" android:state_enabled="false" />
    <item android:color="@color/gray_light" /> <!-- Default -->
</selector>

3. Java/Kotlin code

// Đơn giản
editText.setBackgroundTintList(ColorStateList.valueOf(Color.GREEN));

// StateList
ColorStateList csl = ContextCompat.getColorStateList(this, R.color.edittext_tint_selector);
editText.setBackgroundTintList(csl);

// Hoặc dùng Theme
editText.setBackgroundTintList(ContextCompat.getColorStateList(this, R.color.design_text_input)); // Material

4. TextInputLayout (Material Design - Khuyến nghị)

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:boxStrokeColor="@color/selector_stroke"
    app:boxStrokeWidth="2dp"
    app:boxStrokeWidthFocused="3dp">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Email" />
</com.google.android.material.textfield.TextInputLayout>

res/color/selector_stroke.xml

<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:color="@color/colorPrimary" android:state_focused="true" />
    <item android:color="@color/colorPrimary" android:state_hovered="true" />
    <item android:color="@color/error" android:state_error="true" />
    <item android:color="@color/gray_light" />
</selector>

So sánh các cách

Lưu ý

• Cần compileSdkVersion 21+ cho backgroundTint
• AppCompatEditText tự động hỗ trợ backgroundTint về API 7+
• TextInputLayout cung cấp: floating label, error text, character counter, password toggle
• Màu gạch chân = màu underline = màu box stroke (Material)