Được chỉnh sửa ngày 10/06/2019.

Chào mừng các bạn đã đến với bài học Android thứ 17, bài học về cách sử dụng Color. Đây là bài học trong chuỗi bài viết về lập trình ứng dụng Android bằng Java của Yellow Code Books.

Bài học hôm nay chúng ta sẽ thử tài vừa là một lập trình viên vừa là một nhà thiết kế, cùng nhau thảo luận về việc sử dụng và phối hợp các màu sắc, sao cho khéo léo nhất có thể, để tạo ra một ứng dụng đẹp lung linh mà không chói lóa.

Bạn cũng nên biết rằng, việc khó khăn nhất khi phát triển một ứng dụng, không phải là viết code đâu, mà chính là định nghĩa ra UI/UX của sản phẩm, hay nói cách khác là thiết kế sản phẩm, trong đó việc chọn lựa màu sắc là cực kỳ quan trọng. Bạn nên chọn lựa màu nào là màu chủ đạo, màu nào làm điểm nhấn, màu nào làm nền,… sao cho chúng hòa hợp, không bị quá chói, cũng không bị quá chìm. Nếu may mắn bạn có những người bạn biết thiết kế, hoặc bạn làm trong một công ty chuyên nghiệp có đội ngũ thiết kế UI/UX riêng, thì mọi thứ lại trở nên đơn giản. Nhưng nếu bạn là một nhà lập trình tự do, mọi sản phẩm đều do chính đôi tay của bạn làm ra từ a đến z, hoặc bạn là một freelancer làm cùng với đội ngũ thiết kế không được đông đảo và mạnh mẽ lắm. Thì bài học hôm nay sẽ giúp ích cho các bạn rất nhiều, chí ít là về phần màu sắc của sản phẩm.

Làm Quen Với Việc Hiển Thị Màu Sắc Trên Thiết Bị

Mục này mình dành để nói cho những bạn còn mù màu… à không, ý mình là các bạn mới làm quen với việc tổ chức màu sắc trong các thiết bị hiển thị hình ảnh ngày nay, và cách mà ngôn ngữ Android ứng dụng nó vào trong việc định nghĩa ra mã màu cho chúng ta sử dụng. Bạn nào hiểu rõ rồi thì cho qua nhé.

Làm Quen Hệ Màu RGB

Nếu như ngoài thực tế, khi bạn tham gia vào lớp học vẽ, bạn sẽ được làm quen với rất nhiều màu chuẩn khác nhau, pha trộn chúng lại theo một tỉ lệ nào đó bạn sẽ có được một số màu sắc mới, và nếu trộn tất cả các màu đó lại (trừ màu trắng) bạn sẽ có được một màu đen (hay đại loại vậy).

Còn trong các thiết bị hiển thị hình ảnh bây giờ, do đặc điểm là dùng ánh sáng để làm nổi bật các điểm ảnh. Mỗi điểm ảnh chứa đựng ba màu đặc trưng, đó là R (Red, Đỏ), G (Green, Xanh lá) và B (Blue, Xanh dương). Ba màu đặc trưng này được hệ thống máy tính điều khiển, từ việc tắt/sáng cho đến các cường độ sáng khác nhau. Cuối cùng thì tập hợp ánh sáng từ ba màu đặc trưng của điểm ảnh này lại sẽ cho ra các màu sắc mà chúng ta mong muốn ở các điểm ảnh đó.

Tuy nhiên bạn cũng không cần thiết phải hiểu nhiều về cấu tạo và cách thức hoạt động này của các điểm ảnh. Bạn chỉ cần biết rằng, dựa trên cấu trúc vật lý đó, mà chúng ta cũng vẫn sẽ điều khiển ba màu đặc trưng của điểm ảnh đã nói ở trên. Và vì vậy người ta còn gọi cách hiển thị màu theo mô hình này là kiểu màu RGB.

Và bởi cấu tạo của màu là các điểm sáng, nên khi trộn chúng vào nhau bạn sẽ có một quy tắc pha màu hết sức ngược với ngày xưa bạn từng học. Chẳng hạn như, Đỏ với Xanh lá lại cho ra màu Vàng. Còn nữa, nếu trộn hết cả ba màu đặc trưng của điểm ảnh này lại với một cường độ sáng lớn nhất, chúng ta sẽ thu được một màu trắng (bạn xem màu ở giao của cả ba hình tròn như sau).

Cuối cùng thì ngoài việc pha trộn ba màu chuẩn trên đây, chúng ta còn có thể tăng giảm cường độ sáng của từng màu, để rồi tạo ra rất rất nhiều màu sắc khác nhau cho ứng dụng.

Làm Quen Hệ Màu ARGB

Đây không phải là một hệ màu mới, mà chỉ là một dạng mở rộng hơn của RGB, nhưng khi này hệ thống cho phép chúng ta điều khiển được Độ trong suốt của RGB thông qua giá trị A, viết tắt cho chữ Alpha. Lát nữa đi vào chi tiết chúng ta sẽ xem xét cách định nghĩa một màu RGB hoặc ARGB này.

Biểu Diễn Màu Sắc Trong Android

Chúng ta khoan hãy nói đến cách khai báo và sử dụng màu sắc trong file resouce, mà hãy nói đến cách để biểu diễn màu sắc này trước nhé. Vì mình biết nhiều bạn còn bỡ ngỡ với cách sử dụng màu sắc lắm. Chúng ta cùng điểm qua các ý sau đây.

• Đầu tiên, để hệ thống biết bạn đang biểu diễn màu sắc, thì bạn phải gõ ký tự # vào trước.
• Sau đó, với kiểu màu là RGB hay ARGB thì số lượng ký tự đằng sau # sẽ tương ứng. Cụ thể, với mỗi loại A, R, G, hay B bạn dùng một giá trị Hexa để biểu diễn độ lớn, giá trị này được biểu diễn bằng hai ký tự, từ 00 đến FF, độ lớn này là cường độ sáng của mỗi màu đặc trưng (hoặc độ lớn của giá trị Alpha) trong một điểm ảnh. Trong đó 00 là tối nhất (nhỏ nhất) và FF là sáng nhất (lớn nhất). Như vậy theo sau ký tự # bạn sẽ phải biểu diễn bởi 6 hay 8 ký tự, tùy theo đó là RGB (sẽ được biểu diễn là #RRGGBB) hay ARGB (sẽ được biểu diễn là #AARRGGBB). Màu sắc cuối cùng của điểm ảnh sẽ là sự pha trộn của các thành phần A R G B này. Bạn hiểu rồi đúng không nào. Mình ví dụ một số mã màu sau.

Ngoài các ví dụ trên thì như mình nói, nếu ba màu R G B được tăng sáng hết cỡ trong một điểm ảnh sẽ tạo ra màu trắng, vậy thì nó là mã #FFFFFF. Ngược lại, nếu ba màu R G B được giảm tối hết cỡ trong một điểm ảnh sẽ tạo ra màu đen, đó là #000000.

Thêm: ngoài các cách biểu diễn 6 hay 8 ký tự ra, thì bạn có thể biểu diễn thành dạng rút ngắn với 3 hay 4 ký tự. Điều này xảy ra nếu như biểu diễn Hexa của tất cả các A, R, G, B đều là các cặp ký tự. Mình ví dụ với ba mã màu đầu tiên trên kia, bạn hoàn toàn có thể viết #F00, #0F0 hay #00F đều được nhé. Hoặc nếu với mã màu này #DD880055 có thể biểu diễn bằng #D805 được. Nhưng mã #DD881255 không thể biểu diễn bằng #D8125 được đâu nhé.

Giới Thiệu Color Resource

Chúng ta bắt đầu bước vào phần chính của bài học hôm nay. Chắc chắn bạn đã biết vai trò to lớn của loại resource này rồi, mình không nói chi cho dài dòng. Điều bạn quan tâm, đó là resource color được để trong thư mục res/values/ (hoặc res/values-xxx/ cho alternative resource), giống như việc tổ chức thư mục với resource string vậy. Nhưng file chứa đựng các mã màu trong Android lại chính là file colors.xml.

Nếu click đúp vào file colors.xml này để mở nó lên, bạn sẽ thấy thẻ gốc cho file (cũng như cho tất cả các file nào khác bên trong thư mục values/ mà bạn biết) là thẻ resources. Bên trong thẻ resources này là các thẻ color.

Sử Dụng Color Resource

Không giống như với resource string định nghĩa ra khá nhiều cách sử dụng khác nhau, nào là plain string, styled string, formatting string,… thì với resource dạng màu sắc này, bạn chỉ có một cách sử dụng mà thôi. Cách dùng mở rộng color-state-list chỉ là cách kết hợp nhiều màu sắc vào một hiệu ứng nào đó sẽ được mình nói riêng ở bài kế tiếp.

Khai Báo Màu Sắc

Mỗi một màu sắc được khai báo trong một thẻ color (1), và được đặt một cái tên theo sau thuộc tính name (2). Mã màu (3) được thiết lập sau ký tự # (một lần nữa mình nhắc là bạn nên nhớ phải có ký tự này nhé), cách thiết lập mã màu đã được mình trình bày ở mục trên rồi. Ngoài ra thì editor của Android Studio còn có chức năng hiển thị màu thật (4), giúp chúng ta kiểm chứng xem đã khai báo đúng màu, hay đúng mã màu mong muốn hay chưa, bạn thử click vào một trong các màu thật này xem, sẽ có một chút bất ngờ mà Android Studio mang lại. Tuyệt vời đúng không bạn.

Truy Xuất Đến Màu Sắc

Cũng như với plain string, bạn có hai cách truy xuất đến các màu sắc đã định nghĩa trong file colors.xml, đó là truy xuất từ file XML và từ Java code.

Truy Xuất Từ file XML

Từ bất kỳ file XML nào, nếu bạn muốn dùng đến resource color này, chẳng hạn như set màu chữ cho TextView, set màu nền cho Button,… thì bạn hãy gọi đến color đã định nghĩa thông qua @color/tên_color.

Chúng ta hãy làm bài thực hành sau về việc khởi tạo và truy xuất đến màu sắc từ XML, đó là file Theme. Sau này sẽ có rất nhiều trường hợp khác phải sử dụng đến màu sắc, khi đó bạn cứ tham khảo bài học hôm nay nhé.

Thực Hành Truy Xuất Đến Màu Sắc Từ File XML

Tốt rồi. Giờ chúng ta chính thức đến với bài thực hành. Đầu tiên bạn hãy mở file styles.xml mà chúng ta từng thực hành ở bài 14 lên. Khi này bạn đang định nghĩa các màu sắc sai chỗ. Bạn xem.

Resource string phải để trong strings.xml, thì resource color bạn cũng phải để trong colors.xml. Do đó nên một styles.xml có định nghĩa màu sắc như vậy là chưa đúng nhé. Vậy chúng ta sẽ chỉnh lại cho TourNote.

Giờ thì bạn hãy mở file colors.xml, và sửa lại các màu bên trong file này cho đúng (hiện tại các màu sắc ở đây được định nghĩa tự động ban đầu theo theme Material, và ở bài thực hành ở bài học số 14 chúng ta đã định nghĩa lại bộ màu này ở Theme như hình trên, bây giờ chúng ta chỉ cần thay đổi lại cho colors.xml cho đúng mà thôi, mình nói dài dòng tí để đảm bảo chúng ta hiểu ý nhau).

Và file colors.xml sau khi chỉnh sửa sẽ như sau.

Cuối cùng, chúng ta quay lại styles.xml để truy xuất đến các màu sắc này. Và file styles.xml sẽ như sau.

Mọi thứ ở bài thực hành hôm nay sẽ không làm cho TourNote khác đi chút giao diện nào. Chỉ là giúp cho code được chuyên nghiệp hơn thôi.

Truy Xuất Từ Java Code

Với Java Code, cũng có rất nhiều trường hợp sử dụng đến màu sắc, như set màu chữ, màu nền các kiểu. Nhưng dù cho bất kỳ lúc nào bạn cần đến việc sử dụng màu sắc này, bạn phải gọi hàm getColor(), bạn truyền vào hàm này màu đã định nghĩa R.color.tên_color, sau đó hàm sẽ trả về một color kiểu int, color kiểu int này sẽ được dùng trong một số hàm cần đến màu sắc, chẳng hạn như setTextColor(), setBackgroundColor(),…

Resources res = getResources();
int color = res.getColor(R.color.colorPrimary);

TextView textView = findViewById(R.id.activity_main_tv_empty);
textView.setTextColor(color);

Chọn Lựa Màu Sắc Trong Android

Mục này mình mạn phép đi ra khỏi khuôn khổ của một lập trình viên Andoid, bởi vì nó không còn là kiến thức lập trình nữa, nó nói về cách thức phối màu để tạo nên một giao diện hợp lý cho ứng dụng. Như mình đã nói, nếu bạn đã có người lo phần phối màu cho ứng dụng thì mọi thứ đều ok, nhưng nếu bạn bị rơi vào tình huống buộc phải làm một ứng dụng từ a đến z, từ khâu thiết kế đến khi xuất xưởng sản phẩm, thì khổ đời bạn rồi. Nếu lựa chọn màu sắc không khéo, ứng dụng của bạn trông như một rạp xiếc với vô vàn màu sắc, hoặc nếu không thì có thể sẽ rơi vào tình trạng buồn tẻ với các màu nhạt. Như với hai em này.

Bạn cũng đã nhìn thấy bộ giao diện TourNote ở bài trước rồi đó. Để chọn lựa được một bộ màu sắc như vậy, mình cũng phải mất khá nhiều thời gian với nó. Và sau đây là một vài kinh nghiệm của mình trong việc chọn lựa màu sắc, có thể kinh nghiệm này chưa thật sự xuất sắc vì mình cũng không phải là một designer, tuy nhiên mình tự tin rằng nó đủ tốt để có thể giúp bạn thiết kế ra các sản phẩm cho riêng bạn, hoặc cho nhóm khởi nghiệp của bạn.

Đầu tiên bạn có thể xem qua tất cả các gợi ý về phối màu, cũng như có một bảng với 500 màu đã được Google nghiên cứu và tổng hợp lại để bạn có thể tham khảo những khi cần thiết. Ở đây.

Cũng từ các gợi ý ở trang web trên, mình tóm tắt một số ý chính khi bạn bắt tay vào thiết kế ứng dụng. Trước hết, bạn phải chọn một màu sắc chủ đạo cho ứng dụng, màu này có thể là màu của thương hiệu sản phẩm, hoặc không thì là màu mà bạn thích nằm trong bảng màu ở link trên. Từ một màu chủ đạo, bạn có thể tham khảo bảng màu để tìm ra các màu nhạt hơn và đậm hơn (cũng thuộc tông màu chủ đạo đó) để phối cho nhiều thành phần khác nhau trong ứng dụng. Như các màu xanh lá ở ví dụ sau.

Nếu bạn thích sự đơn giản, thì màu chủ đạo cũng đủ để xây dựng một sản phẩm. Tuy nhiên mình thích chọn thêm một màu nữa, người ta gọi là màu thứ cấp. Màu này thường không xuất hiện nhiều trong ứng dụng, vì nó là thứ cấp mà, nó có vai trò làm điểm nhấn giúp giao diện đỡ buồn tẻ hơn. Màu thứ cấp thường dùng cho các Button, EditText, con nháy nhập liệu, Progress bar, các đường link, hay các dòng text cần sự nổi bật. Do có đặc điểm trên nên màu thứ cấp thường sẽ là màu chõi lại với màu chủ đạo. Nếu như màu chủ đạo là tông màu lạnh, thì màu thứ cấp sẽ là tông màu nóng, và ngược lại. Kiểu như, trong âm có dương, trong dương có âm vậy. Bạn có thể xem ví dụ sau, màu tím là màu chủ đạo, trong khi màu xanh lá là màu thứ cấp.

Ngoài hai màu trên, bạn còn phải chọn ra các màu xám dùng cho các mục đích trung tính, như màu nền của một số cửa sổ. Rồi bạn lại phải chọn ra màu cho text nữa, thông thường là màu xám đậm. Ở link mà mình gửi bạn bên trên có nói rõ cách chọn màu cho text, nó có gợi ý rằng là nếu màu nền tối thì màu text nên là xám sáng, còn màu nền sáng thì màu text nên là xám tối. Bạn có thể điều chỉnh giá trị Alpha cho mỗi màu đã chọn, để có được một hiệu ứng bóng bẩy hơn cho người dùng.

Ý cuối cùng trong việc thiết kế. Đó là, khi bạn đã chọn ra các màu sắc ưng ý, bạn có thể dùng công cụ ở link này để kiểm tra lại một cách trực quan hơn, hoặc để có những tinh chỉnh cần thiết trước khi bắt tay vào code.

Chúng ta vừa xem qua cách sử dụng color trong Android. Và bài học hôm nay ngoài việc giúp bạn biết cách sử dụng loại resource thú vị này, nó còn giúp bạn biết cách thiết kế ra một ứng dụng với màu sắc hòa hợp hơn. Tuy nhiên, resource color vẫn còn một ứng dụng khá hay nữa và mình sẽ dành bài học hôm sau để nói về nó.

Download Source Code Mẫu

Bạn có thể download source code mẫu của bài này ở đây.

Bài Kế Tiếp

Chúng ta sẽ nói đến cách sử dụng dạng resource có tên là dimen. Một ứng dụng còn lại của color đó là color-state-list mình sẽ nói đến chung với drawable-state-list.