Cách thêm viền bên trái cho TextView trong Android bằng XML

Mục tiêu

Tạo hiệu ứng viền dọc bên trái cho TextView chỉ sử dụng XML drawable, không cần code Java/Kotlin phức tạp.

Các bước thực hiện

Bước 1: Tạo dự án mới

Android Studio → File → New Project → chọn Empty Activity.

Bước 2: Tạo file drawable cho viền trái

Tạo file res/drawable/left_border.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="https://schemas.android.com/apk/res/android">
    <!-- Viền màu vàng (màu viền) -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FFEB3B" />
        </shape>
    </item>
    <!-- Phần nội dung trắng, đẩy lùi 4dp từ trái -->
    <item android:left="4dp">
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />
        </shape>
    </item>
</layer-list>

Giải thích: Layer-list vẽ 2 hình chữ nhật chồng lên nhau. Hình dưới cùng màu vàng (màu viền), hình trên cùng màu trắng bị dịch chuyển 4dp từ trái, để lộ ra viền vàng rộng 4dp ở bên trái.

Bước 3: Áp dụng vào layout (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/left_border"
        android:padding="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Hello World! Viền trái 4dp"
            android:textSize="24sp" />

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Đặt background của LinearLayout (container) là drawable vừa tạo. TextView bên trong sẽ hiển thị với viền trái tự động.

Bước 4: MainActivity.java (rất đơn giản)

package com.example.leftbordertextview;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Kết quả

Chạy ứng dụng, TextView sẽ có một đường viền dọc màu vàng bên trái, rộng 4dp.

TextView với viền trái được tạo hoàn toàn bằng XML drawable.

Mở rộng

• Thay đổi android:left để điều chỉnh độ dày viền
• Thay màu #FFEB3B thành màu bất kỳ
• Thêm android:right, android:top, android:bottom cho viền các cạnh khác
• Sử dụng stroke thay vì solid cho viền nét đứt