Android

Sử Dụng CardView Trong Android

Trong phiên bản Android 5.0 (Android L, API 21) có giới thiệu một widget mới có tên là CardView. Về cơ bản thì CardView giống như FrameLayout như có bo trò bốn góc (round corner) và có hiệu ứng Shadow. Và CardView thường được sử dụng làm container cho các row trong ListView và ReyclerView.

Giới thiệu

Trong phiên bản Android 5.0 (Android L, API 21) có giới thiệu một widget mới có tên là CardView. Về cơ bản thì CardView giống như FrameLayout như có bo trò bốn góc (round corner) và có hiệu ứng Shadow. Và CardView thường được sử dụng làm container cho các row trong ListView và ReyclerView.

CardView trong Android

Mặc định trong Android SDK không có sẵn widget này giống như Button hay TextView mà chúng ta phải import dependences để Android Studio tự install widget này cho chúng ta. Và để làm được điều đó các bạn làm như sau.

Vào File > Project Structure… Và chọn module app, sau đó click vào Tab Dependencies.

carview_in_android_ss1

Tại đây các bạn nhấn vào button có dấu và chọn mục Libray Dependencies 

cardview_in_android_ss2

Sau đó nhấn OK để kết thúc.

Nếu các bạn import thư viện theo cách này thì Android Studio sẽ import thư viện mới nhất (ở trên là lib này sử dụng cho API 25 hay Android 7.0 Nougat).

Hoặc cách nhanh hơn là các bạn mở file build.gradle (Module app) và paste dòng dưới đây vào trong dependencies

Vậy là bây giờ chúng ta có thể sử dụng CardView giống như Button hay TextView

Ví dụ sử dụng RecyclerView với CardView

Để ví dụ cách sử dụng CardView mình sẽ làm một demo có sử dụng RecyclerView với CardView để hiển thị danh sách các bài hát Karaoke.

Cũng giống như CardView thì đối với RecyclerView chúng ta cũng phải cài đặt thư viện trong dependencies với dòng dưới đây

Và đây là toàn bộ file build.gradle của mình

Mình thực hiện lại ví dụ đã làm trong bài Sử dụng RecyclerView nhưng ở bài viết này mình sẽ thiết kế row có sử dụng CardView

Bước 1: Tạo model để chứa data

Class Song đại diện cho 1 bài hát gồm các thông tin:

  • mCode: Mã số bài hát
  • mTitle: Tên bài hát
  • mLyric: Lyric của bài hát.
  • mAstist: Tên ca sĩ

File Song.java

Bước 2: Thêm RecyclerView vào main_activity.xml

File main_activity.java

Bước 3: Tạo giao diện cho một row

Thay vì sử dụng các ViewGroup khác thì ở đây mình sử dụng CardView. Một số thuộc tính sử dụng với CardView mình sẽ nói ở phần dưới.

Bước 4: Tạo Custom Adapter và bind dữ liệu cho từng row trong Adapter

Bước 5: Setup RecyclerView trong MainActivity.java

Không giống như ListView chúng ta chỉ cần set Adapter cho ListView là đủ nhưng đối với RecyclerView chúng ta phải set 2 thành phần bắt buộc dưới đây:

+ set adapter cho RecyclerView sử dụng phương thức setAdapter

+ set layout manager để chỉ ra chúng ta muốn layout các item như thế nào (vertical, horizotal, grid, staggered grid) bằng cách sử dụng phương thức setLayoutManager.

Source file MainActivity.java

Chạy thử ứng dụng và xem kết quả

cardview_in_android_ss3

Chúng ta thấy sử dụng CardView trong thiết kế rất đẹp đúng không nào. Và tiếp theo mình sẽ đề cập đến các thuộc tính mà chúng ta thường sử dụng với CarView

Một số thuộc tính thường dùng với CardView

Nhìn qua đoạn mã thiết kế row ở trên

Có ba thuộc tính mà chúng ta quan tâm đó là

Xác định “mức độ bo trò” của CardView

Với CardView chúng không không thể set background qua thuộc tính background như những view bình thường khác mà phải set thông qua thuộc tính này

Thuộc tính này xác định “mức độ đổ bóng (shadow) cho cardView

Ngoài các set những thuộc tính này trong XML thì chúng ta cũng có thể set chúng trong Java Code như sau

8 thoughts on “Sử Dụng CardView Trong Android”

  1. Bạn ơi, bạn có thể hướng dẫn cho mình làm sao để ban đầu mình chỉ cho hiện tên bài hát, sau khi click vào item thì mới show Lyrics và tên ca sĩ được không?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.