Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> Android

Cách thay đổi màu sắc và font chữ của ListView Android

Giới thiệu

Ví dụ này minh họa cách tùy chỉnh màu nền, màu chữ, font chữ cho các mục (item) trong ListView Android bằng cách sử dụng Custom Adapter và layout item tùy chỉnh.

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

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

Mở Android Studio, chọn File → New Project.

Bước 2: Giao diện chính (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    android:background="#fbf9ea"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/lv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</RelativeLayout>

Bước 3: Tạo layout item tùy chỉnh (res/layout/list_item.xml)

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="https://schemas.android.com/apk/res/android"
    android:id="@+id/tvItem"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:textSize="18sp"
    android:textColor="#333333"
    android:background="@drawable/list_item_selector"
    android:fontFamily="sans-serif-medium" />

Bước 4: Selector trạng thái (res/drawable/list_item_selector.xml)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="#e0e0e0" />
    <item android:state_selected="true" android:drawable="#ffcc80" />
    <item android:drawable="@android:color/white" />
</selector>

Bước 5: Custom Adapter (src/CustomAdapter.java)

package com.app.sample;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import java.util.List;

public class CustomAdapter extends ArrayAdapter<String> {
    private final Context context;
    private final List<String> items;

    public CustomAdapter(@NonNull Context context, List<String> items) {
        super(context, R.layout.list_item, items);
        this.context = context;
        this.items = items;
    }

    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
        View view = convertView;
        if (view == null) {
            LayoutInflater inflater = LayoutInflater.from(context);
            view = inflater.inflate(R.layout.list_item, parent, false);
        }

        TextView tvItem = view.findViewById(R.id.tvItem);
        String item = items.get(position);
        tvItem.setText(item);

        // Tùy chỉnh màu/font theo vị trí hoặc dữ liệu
        if (position % 2 == 0) {
            tvItem.setTextColor(context.getResources().getColor(android.R.color.holo_blue_dark));
        } else {
            tvItem.setTextColor(context.getResources().getColor(android.R.color.holo_green_dark));
        }

        return view;
    }
}

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

package com.app.sample;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;
import java.util.Arrays;
import java.util.List;

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

        ListView listView = findViewById(R.id.lv);
        List<String> data = Arrays.asList("Mục 1", "Mục 2", "Mục 3", "Mục 4", "Mục 5", "Mục 6");

        CustomAdapter adapter = new CustomAdapter(this, data);
        listView.setAdapter(adapter);
    }
}

Bước 7: Manifest (Manifests/AndroidManifest.xml)

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.app.sample">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Chạy ứng dụng

Kết nối thiết bị, nhấn Run. ListView hiển thị các mục với màu chữ xen kẽ xanh/đỏ, font medium, nền selector khi nhấn.

Cách thay đổi màu sắc và font chữ của ListView Android

Lưu ý

  • Luôn dùng ViewHolder pattern (như trong code) để tối ưu hiệu năng.
  • Đối với danh sách phức tạp, lớn, nên dùng RecyclerView thay vì ListView.
  • Để dùng font tùy chỉnh (.ttf/.otf), đặt file trong res/font/ và set android:fontFamily="@font/ten_font" hoặc set Typeface bằng code.