Cách hiển thị danh sách hình ảnh và văn bản trong ListView Android (Custom ListView)

Custom ListView là gì?

ListView tùy chỉnh dùng **Custom Adapter** để hiển thị object phức tạp (hình ảnh + nhiều text). Adapter nhận SubjectData object.

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

Bước 1: Tạo project Android Studio

Bước 2: Layout activity_main.xml

<ListView
    android:id="@+id/list"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:divider="#000"
    android:dividerHeight="1dp"
    android:footerDividersEnabled="false"
    android:headerDividersEnabled="false" />

Bước 3: Model SubjectData.java

class SubjectData {
    String SubjectName;
    String Link;
    String Image;
    
    public SubjectData(String subjectName, String link, String image) {
        this.SubjectName = subjectName;
        this.Link = link;
        this.Image = image;
    }
}

Bước 4: CustomAdapter implements ListAdapter

class CustomAdapter implements ListAdapter {
    ArrayList arrayList;
    Context context;
    
    public CustomAdapter(Context context, ArrayList arrayList) {
        this.arrayList = arrayList;
        this.context = context;
    }
    
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        SubjectData subjectData = arrayList.get(position);
        
        if (convertView == null) {
            LayoutInflater inflater = LayoutInflater.from(context);
            convertView = inflater.inflate(R.layout.list_row, null);
            
            TextView title = convertView.findViewById(R.id.title);
            ImageView image = convertView.findViewById(R.id.list_image);
            
            title.setText(subjectData.SubjectName);
            
            // Load ảnh từ URL bằng Picasso
            Picasso.with(context)
                .load(subjectData.Image)
                .into(image);
        }
        return convertView;
    }
    
    // Các method bắt buộc khác của ListAdapter...
    @Override public int getCount() { return arrayList.size(); }
    @Override public Object getItem(int position) { return position; }
    @Override public long getItemId(int position) { return position; }
    // ... (areAllItemsEnabled, isEnabled, registerDataSetObserver, etc.)
}

Bước 5: Layout item list_row.xml

<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="16dp">
    
    <ImageView
        android:id="@+id/list_image"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:scaleType="centerCrop" />
    
    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:textSize="18sp" />
</LinearLayout>

Bước 6: MainActivity - Khởi tạo dữ liệu & Adapter

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        ListView list = findViewById(R.id.list);
        ArrayList arrayList = new ArrayList<>();
        arrayList.add(new SubjectData("JAVA", "https://www.tutorialspoint.com/java/", 
            "https://www.tutorialspoint.com/java/images/java-mini-logo.jpg"));
        arrayList.add(new SubjectData("Python", "https://www.tutorialspoint.com/python/", 
            "https://www.tutorialspoint.com/python/images/python-mini.jpg"));
        // ... thêm các subject khác
        
        CustomAdapter adapter = new CustomAdapter(this, arrayList);
        list.setAdapter(adapter);
    }
}

Bước 7: Thêm Picasso vào build.gradle

dependencies {
    implementation 'com.squareup.picasso:picasso:2.7.182'
}

Bước 8: Permission Internet trong Manifest

<uses-permission android:name="android.permission.INTERNET" />

Bước 9: Chạy thử

ListView hiển thị logo + tên môn học. Click item → mở link (cần thêm OnItemClickListener):

Khuyến nghị: Dùng RecyclerView thay thế

RecyclerView + ViewHolder pattern hiệu năng tốt hơn, bắt buộc từ Android Lollipop. ListView đã cũ.