Giới Thiệu Về Android & Môi Trường Phát Triển Phần Mềm

Xin chào các bạn. Bạn đang ở đây và đang đọc các dòng mở đầu cho các bài viết về lập trình Android của mình, chứng tỏ bạn đang quan tâm đến lĩnh vực lập trình cho các thiết bị Android này. Dù cho bạn có đang là một người mới muốn làm quen và thử sức với lập trình Android, hay bạn là người đã có kinh nghiệm nhất định về Android và đang muốn tham khảo thêm các thông tin và ý kiến từ những lập trình viên khác, thì việc bạn chú ý đến các bài viết này, theo mình nghĩ, đều là các quyết định sáng suốt.

Với chuỗi bài viết về lập trình Android này, mình sẽ cố gắng mang đến cho các bạn các thông tin cơ bản và cơ sở nhất, cùng những xây dựng từng bước, giúp các bạn mới làm quen với Android có thể dễ dàng tiếp cận và thực hiện mong ước xây dựng một ứng dụng Android hoàn chỉnh của các bạn. Đồng thời mình sẽ tìm hiểu các bài viết từ các nguồn khác để nói rộng hơn một chút về Android cho các bạn đã hiểu về lĩnh vực này có cơ hội cùng chia sẻ kiến thức.

Tuy cố gắng trong việc xây dựng một bộ kiến thức ổn về Android là vậy, nhưng thực sự với tốc độ phát triển và sự nâng cấp nhiệt tình từ chính Google dành cho hệ điều hành của họ, cũng khiến mình nhiều phen “hụt hơi”, “chới với” (trong việc viết và cập nhật trên blog). Do đó nếu bạn có đang đọc các bài viết trong chuỗi bài này của mình mà thấy kiến thức đã cũ, thì vui lòng giúp mình để lại comment ở mỗi bài viết, đồng thời cũng hãy chủ động tìm kiếm thông tin mới mẻ hơn từ các trang web khác hoặc trang “chính chủ” Google nhé, dĩ nhiên mình luôn để link đến trang web gốc ở các mục liên quan rồi.

Hãy bắt đầu nào. Trước tiên, để có thể yêu thích lập trình Android, thì mình mời bạn tìm hiểu về Android trước.

Giới Thiệu Android

Vâng, Android là một hệ điều hành, và hệ điều hành này là một hệ điều hành mã nguồn mở.

Ban đầu hệ điều hành này được xây dựng hướng đến việc sử dụng trên các điện thoại di động thông minh, sau này nó tiếp tục được phát triển để sử dụng rộng rãi trên các máy tính bảng, TV, thiết bị đeo được, xe hơi,…

Liệt kê ra như vậy để bạn thấy rằng, tiếp cận vào lập trình Android không chỉ gói gọn trong một lĩnh vực là viết ứng dụng cho các điện thoại thông minh, mà bạn còn có cơ hội mở rộng hơn kiến thức bản thân cho các nền tảng khác, như TV chẳng hạn. Hơn nữa với việc đây là hệ điều hành mã nguồn mở, bạn có thể còn phát triển được các ứng dụng chạy trên rất nhiều thiết bị phần cứng của nhiều hãng sản xuất khác nhau. Về cơ bản tất cả các hệ điều hành liên quan này đều dựa trên nền tảng Android, nhưng mỗi nhà sản xuất lại đưa vào những cập nhật riêng, mang đến các diện mạo khác nhau đôi chút hoặc rất nhiều tùy từng nhà sản xuất (sự đa dạng này vừa là lợi thế nhưng cũng gây ra các vấn đề tương thích khá hóc búa cho các lập trình viên chúng ta, nhưng không sao, hãy cùng nhau trải nghiệm thôi).

Tại Sao Lại Chọn Lập Trình Android?

Sau khi nhìn “sơ” qua Android là gì, chúng ta đến một bước lựa chọn nữa khi tìm hiểu sâu hơn về Android dưới con mắt của một lập trình viên.

Dễ Tiếp Cận

Có thể nói trở thành một lập trình Android là một quyết định khá dễ dàng, chỉ cần bạn thích và… bùm, bắt tay vào thôi.

Có được điều này thứ nhất phải kể đến Trang thiết bị. Chắc chắn để lập trình thì bạn phải trang bị máy tính rồi, nhưng máy tính nào thì lập trình được Android? Thì có thể nói là, hầu như bạn chẳng cần quá bận tâm về nó. Dù máy tính bạn có chạy được Windows, Mac, Linux hay thậm chí Chrome OS, bạn đều thoải mái bắt đầu với Android. Còn về một điện thoại di động thông minh để kiểm thử ứng dụng ư? Điều đó cũng không quá khó khi mà các điện thoại Android trên thị trường hiện nay đa số đều có giá khá “mềm”, bạn rất dễ để tìm mua một chiếc nếu chưa có thiết bị này trong tay.

Thêm nữa, các lập trình viên Android được Google trang bị cho một công cụ lập trình có tên Android Studio, bạn sẽ được làm quen công cụ này sau. Công cụ lập trình này phải nói là khá mạnh mẽ, và như mình nói ở trên, tương thích được với nhiều loại hệ điều hành, khiến chúng ta vừa dễ cài đặt, dễ tiếp cận, lại yên tâm code vì rõ ràng ở những bước đầu tiên này chúng ta đã cảm nhận được sự trang bị đầy đủ từ Google như nào rồi ha.

Điều tiếp theo dẫn đến lập trình Android trở nên dễ tiếp cận, đó là Ngôn ngữ lập trình. Nếu bạn đã biết Java, điều đó thật tuyệt, bạn sẽ chỉ cần học thêm về cách thức tương tác với hệ điều hành thông qua Java. Nhưng nếu như bạn chưa từng biết đến Java, thì việc học Java cũng không quá khó khăn, đặc biệt nếu bạn đã từng biết đến một ngôn ngữ lập trình Hướng đối tượng nào khác như C++ hay C# (bạn có thể tìm hiểu về Java qua các bài viết của mình ở đây). Hoặc một lựa chọn tuyệt vời hơn, đó là bạn tìm hiểu luôn Kotlin, một ngôn ngữ khá hiện đại và mạnh mẽ. Tóm lại nếu bạn biết Java hay Kotlin đều có thể bắt tay vào lập trình Android ngay được rồi.

Tính Tương Thích

Mục này cũng có thể hiểu với nhiều ý.

Thứ nhất, có thể thấy sự tương thích nằm ở Hệ điều hành. Android là một hệ điều hành mở, lại là một hệ điều hành nổi tiếng số một trên thế giới hiện nay. Việc Android được ứng dụng trên nhiều lĩnh vực khác nhau mang đến cho bạn có cơ hội suy nghĩ đến việc phát triển một ứng dụng trên thiết bị điện thoại thông minh, lại có thể nhanh chóng mở rộng ra để chạy trên các thể loại thiết bị khác, như TV hay các thiết bị giải trí khác.

Sự tương thích cũng nằm ở Ngôn ngữ lập trình cho hệ điều hành này. Không cần phải nói đến việc ngôn ngữ Java được sử dụng rộng rãi cho các lĩnh vực khác nhau như thế nào vì ai cũng biết, điều này cho thấy nếu bạn từng lập trình Android bằng Java, bạn cũng có thể nhanh chóng ứng dụng logic hay nền tảng của ứng dụng này cho các lĩnh vực khác cũng dùng ngôn ngữ Java. Hay nếu bạn biết Kotlin, bạn cũng dễ dàng phát triển ra các ứng dụng cho iOS hay các ứng dụng Web khác cũng bằng ngôn ngữ Kotlin này.

Ứng Dụng Của Bạn Được Đưa Lên Google Play

Chắc hẳn bạn cũng biết cái “chợ” cho các ứng dụng Android này. Nó được gọi là Google Play, hay Google Play store. Không cần phải là một lập trình viên, bạn vẫn thường xuyên sử dụng nó, và bạn cũng nhận ra rằng Google Play là một nơi chứa vô số các ứng dụng khác nhau.

Đúng vậy, mình đã từng nghe Google Play đã cán mốc 2,6 triệu ứng dụng được đưa lên đây. Và bạn hãy tưởng tượng mà xem, trong số 2,6 triệu ứng dụng này, cũng có vài ứng dụng của bạn trên đó thì sao. Khi đó, có khi có đến hàng trăm, hoặc hàng ngàn, hoặc hơn nữa, người dùng trên khắp thế giới đang sử dụng ứng dụng của bạn hàng ngày thì sao. Nghĩ thôi đã thấy thích rồi.

Ngoài việc dễ dàng tải ứng dụng xuống, thì việc đưa ứng dụng lên Google Play cũng khá dễ dàng. Bạn chỉ cần bỏ ra $25 cho một lần duy nhất trong đời để mua tài khoản trên đây, rồi sau đó thoải mái phát triển các ứng dụng của riêng bạn và xuất bản.

Thêm nữa, bên cạnh có nhiều người dùng trên thế giới biết đến và sử dụng ứng dụng của bạn, bạn còn có khả năng kiếm thêm tiền nhờ vào việc tận dụng hiển thị quảng cáo trong ứng dụng, hoặc xây dựng các chức năng có trả phí, hoặc xây dựng các ứng dụng cần người dùng phải mua mới dùng được. Thật tuyệt đúng không nào.

Chưa hết, khi bạn đã quyết định đưa ứng dụng lên Google Play thì chỉ mất vài giờ để ứng dụng của bạn đến với người dùng trên toàn thế giới (con số này so với Apple App Store là vài ngày, thậm chí có khi đến cả tuần). Việc đưa các bản cập nhật hay sửa lỗi lên Google Play chính vì vậy cũng khá là nhanh chóng và dễ thở hơn nhiều.

Môi Trường Phát Triển Phần Mềm

Chúng ta đã hiểu về Android qua tìm hiểu các ý trên đây rồi. Nhưng bài hôm nay sẽ không dừng lại sớm vậy, hãy cùng xem thêm chút nữa về cái gọi là Môi trường phát triển phần mềm là gì nhé.

Môi trường phát triển phẩm mềm là một môi trường mà ở đó nhà Phát Triển Phần Mềm có được những công cụ cần thiết nhất để viết ra một ứng dụng hoàn chỉnh. Vì bài học liên quan đến Android, do đó chúng ta sẽ tập trung vào tìm hiểu Môi trường phát triển phần mềm Android (Android Development Environment) sẽ bao gồm những công cụ cần thiết gì tiếp theo đây.

Hệ Điều Hành (Operating System)

Như mình có nói trên kia, ứng dụng Android có thể được lập trình trên hầu hết các nền tảng hệ điều hành phổ biến nhất hiện nay như Windows, Mac, Linux hay thậm chí Chrome OS.

Java Development Kit (JDK)

Bộ Công Cụ Phát Triển Cho Java, chắc chắn rồi, vì ứng dụng Android được viết dựa trên ngôn ngữ Java mà, do đó chúng ta cần phải có bộ JDK này để các công cụ khác có thể dùng nó để biên dịch ra mã Java, rồi từ Java sẽ biên dịch tiếp thành các mã máy. Ngay cả như nếu bạn dùng Kotlin để lập trình Android, thì bạn vẫn cần đến bộ JDK này, vì Kotlin vẫn tận dụng máy ảo JVM bên trong JDK mà thôi.

Android Software Development Kit (Android SDK)

Tương tự như JDK, Android SDK là Bộ Công Cụ Phát Triển Cho Android. SDK này sẽ cung cấp cho chúng ta một bộ các thư viện và công cụ cần thiết để chúng ta có thể build, kiểm tra và debug cho các ứng dụng Android mà chúng ta sắp lập trình đây.

Android Studio

Cuối cùng chúng ta phải cần công cụ này, như đã nói ở trên, đây là công cụ mà chúng ta sẽ tương tác trực tiếp và dài lâu. Android Studio cung cấp cho chúng ta một giao diện trực quan để chúng ta có thể viết code, chỉnh sửa, biên dịch, debug, quản lý bộ nhớ,… tất cả mọi thứ cần thiết để chúng ta có thể tạo nên một phần mềm trên đó.

Kết Luận

Chúng ta vừa có cái nhìn sơ lược nhất về việc xây dựng ứng dụng trên hệ điều hành Android này. Hi vọng các thông tin căn bản này giúp tạo cho bạn một kiến thức và một động lực nhất định để xây dựng ước mơ lập trình trên nền tảng di động của chính bạn.

Cài Đặt Các Công Cụ Phát Triển Cho Android

Chúng ta bắt đầu bắt tay vào xây dựng một môi trường lập trình Android qua các bước sau đây.

Cài Đặt JDK

Như mình đã nói ở bài trước, JDK chính là chữ viết tắt của Java Development Kit – Bộ Công Cụ Phát Triển Cho Java. Nó cũng là một công cụ trong Bộ Công Cụ Phát Triển Cho Android. Vì JDK giúp chúng ta có thể biên dịch sang mã Java, rồi từ Java sẽ biên dịch tiếp thành các mã máy, và thực thi chúng trên nền máy ảo JVM. Và nếu bạn nào đang lập trình Android với Kotlin chứ không phải Java, thì bạn vẫn phải download và cài đặt bộ công cụ này trước tiên.

Để cài đặt JDK bạn hãy vào trang của Oracle để download file cài đặt theo đường link này (hoặc bạn có thể search Google với từ khóa “JDK Download”). Khi mở link bạn sẽ được dẫn đến trang download JDK của Oracle như sau.

Chú ý

Có thể giao diện và chức năng ở trang download JDK của Oracle có sự khác nhau giữa máy tính của bạn và screenshot của mình do Oracle luôn nâng cấp và chỉnh sửa giao diện của họ. Đồng thời phiên bản JDK cũng có thể khác với hướng dẫn ở thời điểm này của mình do thư viện này cũng được nâng cấp thường xuyên.
Nếu có bất cứ khó khăn nào khiến bạn không thể hoàn thành việc download và cài đặt JDK thì hãy để lại lời nhắn cho mình ở cuối bài viết hoặc chat với Facebook fan page nhé.

Bạn hãy lựa chọn version của JDK (thường thì bạn cứ chọn version mới nhất) và gói cài đặt phù hợp với hệ điều hành của máy tính bạn đang dùng (với macOS hay Windows mình khuyên bạn nên download gói Installer). Như với máy mình thì mình sẽ chọn như sau.

Sau khi download JDK về thì bạn tiến hành cài đặt như bình thường nhé, khi cài đặt xong bạn có thể qua bước tiếp theo.

Cài Đặt Android Studio

Nếu bạn nào để ý chút, là sau khi cài đặt JDK, hiển nhiên chúng ta cũng cần phải cài Android SDK, như bài trước cũng có nhắc đến, nó chính xác là một Bộ Công Cụ Phát Triển Cho Android. Nhưng thực ra bạn hãy yên tâm, với bước này, ngay sau khi cài đặt Android Studio thành công, công cụ này cũng sẽ giúp chúng ta cài đặt và quản lý Android SDK một cách tự động. Android Studio quả là tuyệt vời mà chúng ta sẽ cùng tìm hiểu thêm các chức năng khác của nó ở các bài học tiếp theo nữa.

Nhiệm vụ bây giờ của chúng ta là vào link này để download Android Studio. Phiên bản Android Studio ở thời điểm mà bài viết này được chỉnh sửa có tên Electric Eel.

Chú ý

Cũng như JDK. Có thể giao diện, chức năng và phiên bản Android Studio ở trang download có sự khác nhau giữa máy tính của bạn và screenshot của mình do Goole cũng thường xuyên nâng cấp và chỉnh sửa giao diện của trang Web cũng như của ứng dụng Android Studio này.
Nếu có bất cứ khó khăn nào khiến bạn không thể hoàn thành việc download và cài đặt Android Studio thì hãy để lại lời nhắn cho mình ở cuối bài viết hoặc chat với Facebook fan page nhé

Khi vào đến trang download trên, hãy tìm nút Download và tiến hành cài đặt Android Studio về máy nhé.

Chú ý

Bạn cũng nên để ý đến cấu hình máy tính tối thiểu để có thể cài đặt và sử dụng Android Studio, mình xin liệt kê lại cho bạn nắm như sau.

• Nếu là Windows thì phải là các phiên bản 8/10/11 64-bit (hoặc các phiên bản mới hơn sau này).
• Nếu là macOS thì phải từ phiên bản 10.14 trở lên, chip Intel hay Apple đều được.
• Nếu là Chrome OS thì thiết bị phải chạy với chip Intel i5 trở lên.
• Nếu là các hệ thống Linux khác thì phải từ phiên bản 2.31 trở lên của thư viện GNU C (glibc).
• Máy phải trang bị tối thiểu 8GB RAM.
• Đĩa cứng phải còn trống khoảng 8GB.
• Độ phân giải màn hình không quá bắt buộc nhưng tốt nhất cũng nên tối thiểu 1280 x 800.

Sau khi cài xong bạn mở ứng dụng Android Studio lên.

Lần đầu tiên mở Android Studio, có thể bạn sẽ được hỏi như hình bên dưới với 2 tùy chọn.

• Tùy chọn 1: “I want to import…”. Nếu bạn đã từng cài Android Studio trước đó rồi, thì tùy chọn này sẽ mặc định được chọn, vì bạn sẽ có cơ hội dùng lại tất cả các cài đặt của bản trước.
• Tùy chọn 2: “I do not have…”. Có nghĩa là đây là lần đầu máy tính của bạn cài đặt Android Studio. Nó sẽ chọn sẵn tùy chọn này cho bạn.

Bạn cứ chọn lựa, nhưng chúng cũng không quan trọng lắm. Dù tùy chọn nào được chọn, bạn cũng có thể nhấn OK để đi tiếp.

Bây giờ bạn đến màn hình Welcome, hãy nhấn Next.

Tiếp theo bạn sẽ phải chọn loại gói cài đặt nào, chúng ta cứ để như mặc định gói Standard. Sau đó bạn lại nhấn Next.

Bước kế tiếp là bước chọn Theme. Với dân lập trình, thường thì mình thấy họ rất thích Theme Dracula. Hay còn gọi là dark mode. Với Theme này thì mọi thứ sẽ tối thui ngoại trừ code của bạn phát sáng lên để bạn dễ dàng tập trung vào code hơn, đồng thời cũng giảm tình trạng mỏi mắt khi code lâu nữa đấy. Và từ giờ trở đi mình cũng sẽ dùng theme Dracula này.

Đến màn hình cuối cùng, hãy nhấn Finish để bắt đầu cài đặt.

Có thể mất từ 5 đến 10 phút tùy cấu hình máy cho việc cài đặt. Sau khi tiến trình cài đặt hoàn tất, bạn sẽ đến màn hình sau.

Đến bước này thì mình xin chúc mừng bạn, bạn đã tạo được cho mình một môi trường để lập trình Android rồi đó. Bạn có thấy dễ không nào. Nếu bạn nào còn vướng mắc gì đó thì nhớ để lại bình luận bên dưới để mình có thể hỗ trợ nhé.

Tạo Mới Project & Làm Quen Với Android Studio

Tạo Mới Project

Bạn thân mến, trước hết mình xin nói sơ qua điều này một tí. Để cho các bài giảng được mạch lạc và logic với nhau, mình xin giới thiệu với bạn một project lớn mà với nó, mình và các bạn sẽ cùng nhau đi xuyên suốt qua các bài giảng trong chương trình. Project của chúng ta có tên là TourNote. Mình sẽ nói rõ về project này ở bài kế tiếp, còn bây giờ, đừng chần chừ nữa, hãy cùng mình tạo project TourNote bằng Android Studio qua các bước sau đây nhé.

Đầu tiên nếu chưa mở Android Studio thì bạn hãy mở lên. Sau khi đã mở Android Studio xong, nếu bạn đang ở màn hình Welcome như dưới đây, thì hãy đảm bảo danh sách bên trái như hình dưới đang chọn là Projects, sau đó chọn tùy chọn New Project ở thành phần bên phải.

Còn nếu bạn đang ở màn hình chính của Android Studio thì hãy nhấn vào menu File > New > New Project… như hình dưới đây.

https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2023/02/Screenshot-2023-02-20-at-11.31-1.png?resize=300%2C233&ssl=1 300w, https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2023/02/Screenshot-2023-02-20-at-11.31-1.png?resize=1024%2C797&ssl=1 1024w, https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2023/02/Screenshot-2023-02-20-at-11.31-1.png?resize=768%2C597&ssl=1 768w, https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2023/02/Screenshot-2023-02-20-at-11.31-1.png?resize=1536%2C1195&ssl=1 1536w, https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2023/02/Screenshot-2023-02-20-at-11.31-1.png?resize=1099%2C855&ssl=1 1099w" data-lazy-loaded="1" sizes="(max-width: 1000px) 100vw, 1000px" loading="eager" style="box-sizing: border-box; height: auto; max-width: 100%; border-style: none; margin: 0px; vertical-align: bottom;">

Bắt đầu từ cửa sổ New Project xuất hiện tiếp theo như hình bên dưới. Bạn sẽ được đưa đến các câu hỏi liên quan đến project bạn sắp tạo ra. Vì như mục này của bài trước có nói rằng ngoài việc bạn có thể lập trình ra các ứng dụng trên điện thoại, thì Android còn có thể chạy trên TV, Wearable, Xe hơi… các kiểu. Và bạn hoàn toàn có thể sử dụng Android Studio để viết các ứng dụng ở các nơi mà Android có mặt này. Chính vì vậy việc trả lời các câu hỏi từ những bước đầu tiên này khá là quan trọng.

Ở bước đầu tiên này bạn sẽ lựa chọn một Template, ở bên dưới mình sẽ giải thích chút về Template sau. Còn bước này bạn hãy đảm bảo tùy chọn Phone and Tablet ở danh sách bên trái được chọn như hình sau.

Bạn có thể thắc mắc rằng ngoài Phone and Tablet thì các tùy chọn khác bên trái khác là gì, mình xin giải thích một lượt như sau.

• Phone and Tablet: chọn mục này nếu bạn muốn viết ứng dụng chạy trên điện thoại và máy tính bảng. Và bạn đã hiểu tại sao TourNote của chúng ta lại chọn tùy chọn này.
• Wear OS: chọn vào đây nếu bạn muốn viết ứng dụng chạy trên các thiết bị đeo được, chẳng hạn như đồng hồ thông minh (smart watch) hay các thiết bị kiểm tra sức khỏe khác.
• Android TV: chắc chắn là viết ứng dụng chạy trên smart TV rồi.
• Automotive: viết ứng dụng chạy được trên thiết bị nghe nhìn của xe hơi.

Ở phiên bản cũ hơn của Android Studio mình còn thấy có tùy chọn Android Things nữa nhưng phiên bản Android Studio Electric Eel đã không còn thấy. Tùy chọn này giúp bạn có thể tạo ra các project chạy được trên các thiết bị IoT (viết tắt của Internet of Things). Tiếng Việt gọi là Vạn vật kết nối. Các thiết bị IoT đều có thể kết nối và chia sẻ dữ liệu qua lại với nhau. Các project ở tùy chọn này thuộc một lĩnh vực khá mới mẻ mà thú thật mình cũng chưa có dịp tìm hiểu kỹ.

Quay lại với tab Phone and Tablet của chúng ta. bạn có thể nhìn thấy khá nhiều các màn hình mẫu trong tab này, như giới thiệu trên kia, người ta gọi đây là các Template. Bạn sẽ phải chọn cho mình một Template trong số đó. Với mỗi lựa chọn Template này, source code được tạo ra ban đầu từ Android Studio sẽ khác nhau. Các source code tự sinh ra này đảm bảo rằng nếu bạn vừa tạo xong project và thực thi ứng dụng lên thiết bị ngay và luôn, thì giao diện của ứng dụng sẽ đúng như Template mà bạn đã chọn đó. Tuy nhiên, là người mới bắt đầu, hoặc không muốn phiền nhiễu về các source code dựng sẵn, thì bạn nên tìm và chọn Template Empty Activity. Template này chỉ đơn giản tạo sẵn một TextView bên trong project để hiển thị sẵn một câu chào lên màn hình khi bạn thực thi ứng dụng ở bước tiếp theo mà thôi. Nếu bạn đã tìm ra và chọn xong Template Empty Activity rồi thì hãy nhấn nút Next để qua bước tiếp theo.

Bước này muốn bạn khai báo một số thông tin về project. Bạn hãy điền vào các thông tin như hình. Mình sẽ giải thích một chút các thông tin này ở bên dưới hình.

• Name: là tên của ứng dụng, tên này sẽ xuất hiện ở màn hình chính của thiết bị Android khi người dùng cài đặt ứng dụng của bạn lên đó. Các bạn có thể nhìn vào hình nhỏ bên cạnh sẽ thấy tên của các ứng dụng xuất hiện phía dưới icon của ứng dụng đó. Các bạn có thể viết hoa tên ứng dụng, hay để khoảng trắng tùy thích, nhưng nhớ là đừng quá dài hay quá ngắn, làm sao cho xúc tích và dễ nhớ.
• Package name: là tên package của ứng dụng (nếu bạn nào từng biết qua Java thì khái niệm package trong Android là tương đương với Java. Nếu bạn muốn tìm hiểu về package của Java thì có thể đọc link này nhé). Ngoài ra thì với Android, package còn là định danh cho từng ứng dụng nữa. Package nên là duy nhất và đặc thù nhất của một ứng dụng, sẽ không thể có hai ứng dụng với cùng một package được cài lên cùng một thiết bị. Vậy đặt tên package như thế nào? Thường thì người ta sẽ đảo ngược tên miền của công ty lại và thêm vào tên của project để tạo thành một package. Như ví dụ bạn thấy, mình có trang web yellowcode.com chẳng hạn, project là TourNote, thì package sẽ lấy là com.yellowcode.tournote, đảm bảo không trùng đúng không các bạn. Còn như bạn là cá nhân, không có trang web cũng chẳng có công ty gì cả, thì có thể lấy tên bạn để tạo package, chẳng hạn như, com.duymanh.tournote, hay com.honghoahoi.tournote tùy thích.
• Save location: là đường dẫn đến thư mục chứa project của bạn, bạn có thể để mặc định hoặc tạo đường dẫn đến nơi tùy thích trong ổ cứng của bạn.
• Language: ngôn ngữ mà bạn dùng để viết ứng dụng của bạn. Với TourNote ở các bài học Android này mình sẽ cố gắng diễn đạt ở cả 2 ngôn ngữ Java và Kotlin. Tuy nhiên bạn hãy xác định và chọn cho bạn một ngôn ngữ cụ thể.
• Minimum SDK: mục này báo cho hệ thống biết ứng dụng được tạo ra sẽ hỗ trợ ngược tối đa đến hệ điều hành cũ nhất nào. Nên nhớ là việc ứng dụng càng hỗ trợ hệ điều hành cũ hơn thì bạn càng phải giải quyết các bài toán tương thích ngược hơn và do đó bạn sẽ càng mất thời gian và đau đầu hơn trong việc phát triển các ứng dụng. Các bạn có thể nhấn vào Help me choose để xem thống kê về số lượng người sử dụng các version của hệ điều hành để có sự chọn lựa tốt nhất cho bước này. Nhưng theo mình, trừ khi có đòi hỏi đặc biệt nào đó, nếu không bạn cứ để mặc định ở tùy chọn này.
• Cuối cùng bạn sẽ thấy có thêm một checkbox Use legacy android.support libraries: tùy chọn này gây nhiều hoang mang cho những ai mới chập chững bước vào Android. Ban có thể để trống checkbox này và không cần tìm hiểu gì thêm. Nhưng nếu bạn có thắc mắc thì mình cũng diễn đạt sơ thế này. Ở các thế hệ hệ điều hành Android xưa, để giúp các lập trình viên mang các chức năng và các thư viện mới mẻ được giới thiệu ở các hệ điều hành mới ra, hỗ trợ ngược lại cho các ứng dụng chạy trên các hệ điều hành cũ hơn, Android thường đóng gói các thư viện hỗ trợ này vào một gói có tên android.support.*. Kể từ Android 9.0 (API level 28) trở đi Google có trình làng một gói thư viện hỗ trợ khác có tên là AndroidX, gói hỗ trợ này là một phần trong dự án Jetpack. AndroidX này thay thế hoàn toàn android.support.* đã không còn được xây dựng bởi Google nữa. Và dĩ nhiên từ đó về sau chúng ta chỉ nên biết duy nhất một gói AndroidX mà thôi.

Sau khi bạn đã điền tất cả các thông tin đã nói ở trên rồi thì hãy nhấn Finish để kết thúc các tùy chọn. Chúc mừng bạn, Project của bạn đã được tạo thành công rồi đó.

Tổng Quan Về Project

Giao Diện Chung

Giờ đây sau khi tạo mới một project, bạn đang đứng trong giao diện chính của Android Studio, nhìn một cách tổng quan giao diện này được chia làm các phần chính sau.

1. Toolbar: thanh công cụ. Nơi đây bạn có được các nút điều khiển chính, chẳng hạn như các nút Mở project (Open), Lưu project (Save All),…. Hoặc đặc thù hơn với lập trình có các nút Khởi chạy ứng dụng (Run), Debug ứng dụng (Debug),…. Hoặc các quản lý cấp cao như các nút Chạy chương trình quản lý Android SDK (SDK Manager), Chạy chương trình quản lý máy thật và máy ảo (Device Manager),….
2. Navigation bar: thanh điều hướng. Giúp bạn theo dõi file nào đang được mở, đường dẫn file đó trong project của bạn như thế nào.
3. Editor window: cửa sổ soạn thảo, là nơi bạn chỉnh sửa các dòng code. Đặc biệt hơn ở cửa sổ này đó là, tùy vào loại source code, cửa sổ này sẽ xuất hiện khác nhau với từng loại để bạn có thể xem và chỉnh sửa source code dễ dàng. Chẳng hạn như khi bạn mở một file java/kotlin code, sẽ khác với khi bạn mở một file XML, và khác với khi bạn mở một file ảnh,… Chúng ta sẽ từ từ làm quen cửa sổ này sau.
4. Tool window bar: các điều khiển cho các công cụ khác. Các công cụ khác chính là các công cụ cho bạn can thiệp vào các công cụ quản lý của hệ thống. Chẳng hạn như Quản lý log (Logcat), Quản lý quá trình debug (Debug), Quản lý kết quả tìm kiếm (Find), Xem cây thư mục của project (Project),…. Tuy nhiên dàn nút trên đây chỉ là cho phép bạn tắt mở các công cụ tương ứng mà thôi. Và sự xuất hiện của mỗi Tool window cũng tùy vào ngữ cảnh mà bạn tương tác. Ví dụ ở hình trên bạn không thấy các Tool window Debug hay Find đâu cả, nhưng khi bạn tìm kiếm hay bắt đầu vào quá trình debug bạn sẽ thấy chúng. Cuối cùng thì nếu nhấn vào mỗi loại công cụ được liệt kê ở đây sẽ được mở ra ở dạng cửa sổ cụ thể như mục số 5.
5. Tool window: chính là các cửa sổ được điều khiển tắt mở từ thanh số 4 mà mình có nói đến trên đây.
6. Status bar: thanh trạng thái, hiển thị trạng thái của project và của chính trình biên dịch Android Studio này. Bạn sẽ thấy thông báo ứng dụng đang được thực thi, có thành công không, có lỗi gì không,…

Máy Ảo, Máy Thật & Khởi Chạy Ứng Dụng

Máy Ảo

Máy ảo (Emulator) là một phần mềm giả lập, nó được tạo ra với cấu hình và hoạt động giống như máy thật nhất có thể. Câu hỏi là nếu bạn đã có trong tay một máy thật Android lúc này rồi thì sao? Câu trả lời là: không gì tốt bằng. Nhưng không phải vì vậy mà bạn lại không tạo cho riêng mình một máy ảo. Vì sao? Có hai lý do chính. Lý do thứ nhất, đó là không phải lúc nào bạn cũng dùng máy thật để chạy đi chạy lại ứng dụng mà bạn đang làm dở dang chưa ổn định, điều này có thể làm hư cái máy thật của bạn. Lý do thứ hai, số lượng máy thật của bạn sẽ chỉ có một hoặc rất ít, thì việc bạn có thêm một hay nhiều máy ảo giả lập các cấu hình phần cứng khác mà các máy thật của bạn chưa có, giúp bạn kiểm tra kỹ hơn sự tương thích của ứng dụng trên nhiều phần cứng và màn hình khác nhau trước khi “xuất xưởng”.

Ngày xưa khi nhắc đến máy ảo Android, bạn thường có nhiều cân nhắc chọn lựa giữa các nhà cung cấp máy ảo khác nhau. Nhưng kể từ nâng cấp đáng giá từ Google khiến cho các máy ảo của họ tích hợp các Google service (như Google Play, Google Maps,…) thì chúng ta hoàn toàn có thể tin tưởng và chọn dùng duy nhất một loại máy ảo do chính Google cung cấp. Máy ảo này lại có sẵn khi bạn cài đặt Android Studio. Và Google đặt còn đặt cho nó cái tên không gì có thể khó đoán hơn, đó là AVD (viết tắt của từ Android Virtual Device).

Giới thiệu AVD

Như nói ở trên, AVD là một máy ảo Android được hỗ trợ chính thức từ Google. Vì là bản “chính chủ” nên máy ảo này sẽ có tính ổn định cao. Chẳng hạn như nó sẽ tiêu tốn bộ nhớ của máy tính ít hơn các máy ảo khác. Nó còn hỗ trợ giả lập tất cả các loại thiết bị, từ điện thoại, máy tính bảng, thiết bị đeo được, và kể cả Android TV nữa đấy. Ngoài ra nó còn cho phép chúng ta tùy chỉnh các giả lập, như camera, GPS, kiểu màn hình gập, cảm biến chuyển động,…

Cài Đặt AVD

Đầu tiên, đảm bảo bạn đã mở Android Studio lên rồi. Từ màn hình chính của Android Studio, có hai cách để khởi động AVD, bạn có thể đi từ menu Tools > Device Manager, hoặc tìm kiếm icon  trên thanh công cụ (toolbar).

Thanh quản lý thiết bị (Device Manager) sẽ được mở ra ở một tool window như sau.

Bạn có thể thấy cửa sổ trên có 2 tab, Virtual và Physical. Vì đây là thanh quản lý thiết bị chung, nên nó cũng giúp quản lý cả các thiết bị ảo (Virtual) hay thật (Physical). Mục này chúng ta tập trung nói về máy ảo, do đó bạn hãy đảm bảo tab Virtual được chọn như hình trên.

Có thể ở máy bạn đã có sẵn các máy ảo được tạo ra trong quá trình cài đặt Android Studio rồi. Nhưng cho dù có hay chưa có máy ảo nào thì mình cũng mời bạn cùng đi qua các bước tạo mới một máy ảo nhé. Đầu tiên bạn hãy tìm và nhấn vào nút Create device, bạn sẽ được dẫn tới một cửa sổ cho bạn chọn các thiết bị giả lập.

Chú ý

Hình ảnh của mình và ở máy tính của bạn trong bài học hôm nay có thể có sự khác nhau. Đó là do mình vẫn còn dùng hình cũ khi thấy rằng vẫn có thể dùng được, để giảm thời gian chỉnh sửa lại nội dung bài. Tuy nhiên sự khác biệt này không ảnh hưởng đến trải nghiệm của bạn trên giao diện ứng dụng mới của bạn đâu nhé.

Mình sẽ điểm sơ qua các thành phần của cử sổ này, để giúp bạn có một chọn lựa máy ảo hợp lý (nếu bạn lỡ tạo lầm một máy ảo không ưng ý cũng không sao, bạn cứ tạo và chạy lên thử, nếu không thích hoàn toàn có thể gỡ bỏ và tạo lại máy ảo khác một cách nhanh chóng).

• Khung bên trái (Category): khung này cho phép bạn chọn loại máy ảo như điện thoại (Phone), máy tính bảng (Tablet), thiết bị đeo được (Wear OS), hay TV, thiết bị trên ô tô (Automotive). Với ứng dụng TourNote, chúng ta sẽ trải nghiệm ứng dụng trên điện thoại trước, do đó bạn hãy chọn Phone như hình trên.
• Khung lớn ở giữa: chính là các thiết bị giả lập tương ứng với từng loại thiết bị bên trái, có vài thiết bị được tạo ra dựa vào thiết bị thật đang được kinh doanh phổ biến trên thị trường, như các dòng Pixel, Nexus hay Galaxy (hiển thị ở cột Name). Cột Play Store cho biết máy ảo này có hỗ trợ ứng dụng Google Play hay không, nếu có, một icon  sẽ xuất hiện, mình khuyến khích các bạn nên chọn các loại máy ảo có xuất hiện icon này. Cột Size cho biết kích cỡ màn hình mà máy ảo giả lập, kích cỡ này tính theo đơn vị inch như ngoài thực tế. Cột Resolution là độ phân giải của màn hình, độ phân giải này được tính theo đơn vị pixel, chính là điểm ảnh theo các chiều ngang & dọc. Density cho biết mật độ điểm ảnh của màn hình, căn cứ vào kích cỡ màn hình (size) và độ phân giải (resolution) mà ta có tỷ lệ tương ứng như mdpi, hdpi, xhdpi, xxhdpi, 420dpi, …. Thông số density này bạn sẽ được làm quen ở các bài học sau, chẳng hạn như bài học về dimen này.
• Khung bên phải: như một tóm tắt trực quan cho chọn lựa của bạn ở các khung khác.

Như hình trên, chúng ta sẽ chọn con máy ảo là điện thoại Nexus 5X, có sẵn Google Play, màn hình 5.2″, độ phân giải 1080×1920, có density là 420dpi. Sau khi bạn đã chọn máy ảo, bạn hãy nhấn Next và xem màn hình kế tiếp.

Đến bước như hình trên đây chính là bước mà bạn sẽ cài hệ điều hành Android vào cho con Nexus 5X ảo mà bạn đã chọn. Lưu ý là bạn phải đảm bảo tab Recommended đang được chọn, đây chính là tab mà hệ thống sẽ gợi ý gói hệ điều hành Android tốt nhất cho bạn. Có khá nhiều loại hệ điều hành, nhưng để dễ dàng kiểm thử xem ứng dụng của bạn trông như thế nào trên các giao diện hệ điều hành mới thì bạn nên chọn loại mới nhất, cho đến thời điểm hiện tại, hệ điều hành mới nhất đáng để trải nghiệm chính là Tiramisu(API Level 33).

À nếu bạn chưa cài đặt gói hệ điều hành mong muốn từ trước, thì nó sẽ xuất hiện nút để bạn download bên cạnh tên hệ điều hành như hình trên (hoặc icon mũi tên hướng xuống với phiên bản Android Studio mới hơn). Đồng thời nút Next ở bước này bị mờ đi, khi đó phải down gói hệ điều hành mà bạn cần về trước. Sau khi nhấn vào nút download thì cửa sổ download và install hệ điều hành sẽ xuất hiện như hình sau.

Sau khi download xong, bạn sẽ thấy chọn lựa của chúng ta không còn nút download kế bên nữa, và chúng ta hoàn toàn có thể nhấn nút Next để qua bước cuối cùng.

Bước tiếp theo như hình dưới, sẽ là bước cho bạn vài tùy chỉnh cuối cùng trước khi hoàn thành. Bạn có thể đổi tên máy ảo (ở mục AVD Name), tỷ lệ scale, hiển thị màn hình theo chế độ mặc định là đứng/ngang, dung lượng Ram và bộ nhớ dành cho máy ảo này, camera cho máy ảo,…. Nhưng tốt nhất bạn nên để mặc định và nhấn Finish.

Sau khi kết thúc quá trình cài đặt bạn sẽ nhìn thấy máy ảo mà bạn vừa tạo sẽ hiển thị trong danh sách máy ảo của tool window Device Manager mà bạn đã mở trước đó. Ở tool window này, bạn cũng có thể tạo thêm nhiều máy ảo khác, hoặc sử chữa hay xóa bất kỳ máy ảo nào đang tồn tại.

Trường hợp bạn muốn khởi chạy máy ảo lên, hãy nhấn vào nút có hình tam giác. Máy ảo sẽ khởi động lên ở một tool window khác có tên là Running Devices. Cửa sổ này hiển thị tất cả các thiết bị, cả ảo lẫn thật, đang được kết nối với máy tính của bạn mà Android Studio có thể nhận ra.

Chú ý

Có một vài ghi chú đối với việc sử dụng AVD mà mình muốn bạn tham khảo, dành cho người mới làm quen với máy ảo Android.

• Tuy máy ảo được hiển thị trong một tool window của một project. Bạn có cảm tưởng như máy ảo này chỉ dành riêng cho một project, khi tạo project mới hay khi chuyển qua project khác bạn phải khởi chạy lại máy ảo. Không phải nhé, đây là máy ảo chung của Android Studio, bạn hoàn toàn có thể chuyển đổi từ project này sang project khác nhưng khi mở Running Devices ra thì nó sẽ giống nhau ở các project.
• Nếu bạn muốn máy ảo hiển thị tách ra khỏi Android Studio như một ứng dụng riêng thay vì chạy trong Running Devices, bạn có thể vào menu của Android Studio File > Settings… (với máy Mac là Android Studio > Settings…), sau đó chọn Tools > Emulator ở danh sách bên trái cửa sổ. Ở các chọn lựa bên phải cửa sổ bạn hãy tìm và bỏ chọn Launch in a tool window. Sau đó thoát và khởi động lại máy ảo bạn sẽ thấy sự khác biệt (đọc ý dưới đây để biết cách thoát máy ảo).
• Khi thoát Android Studio thì máy ảo cũng sẽ thoát, nó giống như là bạn tắt nguồn điện thoại đi vậy. Nhưng khi khởi chạy lại máy ảo thì việc máy ảo có khởi động lại từ đầu hay mở lại chính màn hình mà bạn vừa “tắt nguồn” sẽ tùy thuộc vào tùy chỉnh Cold boot hay Quick boot mà khi tạo máy ảo bạn đã chọn (mặc định nó sẽ chọn Quick boot cho bạn, tức là nó sẽ mở lại màn hình bạn đang thao tác trước khi thoát máy ảo, bạn hoàn toàn có thể thay đổi chọn lựa này khi Edit máy ảo).
• Nếu muốn thoát máy ảo trong khi đang mở Android Studio thì bạn có thể nhấn vào dấu X ở tab của máy ảo đang chọn trong cửa sổ Running Devices.

Sau khi khởi động xong, màn hình máy ảo sẽ trông như hình dưới đây. Bạn nên mở ứng dụng Google Play (Play Store) có sẵn trong máy ảo lên và đăng nhập vào tài khoản Gmail của bạn.

Thực Thi Ứng Dụng Lên AVD

Đảm bảo Android Studio đang mở. Đảm bảo máy ảo AVD vẫn đang mở. Nếu bạn đang ở màn hình Welcome của Android Studio như hình dưới thì chọn vào project TourNote ở danh sách bên phải để vào màn hình chính của Android Studio. Nếu không thấy danh sách ứng dụng nào cả ở cửa sổ này thì bạn có thể chọn Open và tìm đến đường dẫn chứa project TourNote mà bạn đã tạo ở bài trước.

https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2023/03/Screenshot-2023-03-22-at-14.59.20.png?resize=300%2C222&ssl=1 300w, https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2023/03/Screenshot-2023-03-22-at-14.59.20.png?resize=1024%2C758&ssl=1 1024w, https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2023/03/Screenshot-2023-03-22-at-14.59.20.png?resize=768%2C568&ssl=1 768w, https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2023/03/Screenshot-2023-03-22-at-14.59.20.png?resize=1536%2C1137&ssl=1 1536w, https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2023/03/Screenshot-2023-03-22-at-14.59.20.png?resize=2048%2C1515&ssl=1 2048w, https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2023/03/Screenshot-2023-03-22-at-14.59.20.png?resize=1140%2C844&ssl=1 1140w" data-lazy-loaded="1" sizes="(max-width: 1000px) 100vw, 1000px" loading="eager" style="box-sizing: border-box; height: auto; max-width: 100%; border-style: none; margin: 0px; vertical-align: bottom;">

Khi màn hình chính của Android Studio được mở, bạn hãy đảm bảo tên của máy ảo bạn muốn thực thi ứng dụng lên đó đang được chọn như hình dưới đây. Sau đó bạn có thể nhấn vào nút Run   ở kế bên tên máy ảo trên thanh công cụ (toolbar).

Sau khi Run thì bạn hãy mở lại tool window Running Devices ra và đợi một phút. Xin chúc mừng, bạn đã thành công với việc khởi chạy ứng dụng đầu tiên của mình lên thiết bị (ảo)!!!

Máy Thật

Với máy thật thì dễ dàng hơn nhiều, bạn sẽ không tốn công chọn lựa và cài đặt, việc duy nhất lúc này là bạn cần mở chế độ Developer options mà thôi.

Khi bạn mua máy về, thì khi vào Settings của máy, bạn sẽ không thấy Developer options ở đâu. Đơn giản vì hệ thống đã giấu tùy chọn này, chỉ những nhà phát triển (developer) mới biết cách cho nó hiện ra. Để hiện ta tùy chọn này bạn làm như sau, mở ứng dụng Settings, tìm đến mục About phone (một số máy bạn phải vào tiếp mục Software info). Khi đó bạn sẽ thấy mục Build number như hình sau.

Nếu bạn dùng ngôn ngữ tiếng Việt cho điện thoại thì tìm theo Cài đặt > Giới thiệu điện thoại > Số hiệu bản dựng (hoặc đại loại vậy tùy theo bản dịch của từng nhà sản xuất, mình không chắc có khớp với máy của mình hay không).

Lúc này bạn hãy nhấn nhanh nhiều lần lên Build number (hay Số hiệu bản dựng), cho đến khi bạn thấy thông báo dạng toast (một thông báo nhỏ ở phía dưới màn hình) với nội dung Developer mode has been turned on hoặc You are now a developer! thì đã thành công. Khi này quay lại màn hình Settings bạn đã thấy mục Developer options như hình dưới đây.

Sau đó bạn hãy vào Developer options, và check chọn USB debugging như hình này.

Từ giờ trở đi khi bạn cắm thiết bị thật Android vào máy tính thông qua dây cáp, bạn sẽ thấy thay vì tên máy ảo xuất hiện, nơi đây sẽ là máy thật của bạn.

Bạn chỉ cần nhấn nút Run  giống như bạn khởi chạy với máy ảo ở trên. Đến đây bạn hoàn toàn có thể thấy ứng dụng của mình hiển thị trên máy thật.

Tuy nhiên nếu bạn gặp trục trặc như hai tình huống dưới đây thì bạn phải làm tiếp vài bước nhỏ nữa, còn các bạn nào đã chạy ứng dụng được lên máy thật rồi thì không cần đọc hai ý dưới này nhé.

1. Tôi không thấy tên thiết bị xuất hiện ở toolbar như hình trên. Có thể bạn đang lập trình Android trên Windows và Windows của bạn không có sẵn driver cho thiết bị Android này rồi, bạn đọc bài này để install driver nhé https://developer.android.com/studio/run/oem-usb.html.

2. Tôi không dùng Windows. Hoặc. Tôi đã thử tìm và cài đặt driver cho Windows rồi nhưng vẫn không thấy tên thiết bị xuất hiện. Điều này xảy ra với thiết bị Android lần đầu tiên kết nối với máy tính của bạn, bạn hãy nhìn lại màn hình thiết bị Android xem nếu có xuất hiện hộp thoại sau thì hãy check chọn vào Always allow from this computer rồi nhấn OK như hình dưới nhé, khi đó tên của thiết bị sẽ xuất hiện thôi.

Kết Luận

Bạn vừa trải qua một bài học dài về cách thiết lập máy ảo và khởi chạy ứng dụng trên máy ảo và máy thật. Từ giờ bạn đã có thể thoải mái chạy thử ứng dụng để xem kết quả như thế nào rồi nhé. Các bạn có thể chọn cho mình một máy ảo hoặc máy thật để kiểm thử, nhưng các bài học từ đây về sau mình sẽ dùng AVD để chạy ứng dụng và dùng để chụp màn hình ứng dụng cho các bạn cùng xem.

Hướng Dẫn Cài Đặt Google Play Cho Máy Ảo Genymotion

Tại Sao Phải Cài Google Apps Cho Genymotion?

Bởi vì bắt đầu từ bài 4 chúng ta đã làm quen với máy ảo Genymotion rồi. Chắc chắn bạn đã thử sử dụng và đang hài lòng với máy ảo này đúng không nào.

Nhưng chúng ta vẫn cần nâng cấp Google Apps cho máy ảo này, nhằm mục đích cạnh tranh với máy ảo AVD vốn dĩ đã hỗ trợ nhiều hơn các giả lập của Google APIs, ngoài ra thì việc nâng cấp này còn chuẩn bị cho các bài học kế tiếp sau này, để bạn có cái mà demo chạy thử, như các bài học liên quan tới maps chẳng hạn.

Bạn cũng nên biết là bài hôm nay do mình tổng hợp lại trên mạng, và các link cài đặt mình cũng lấy từ các trang đó, do đó sẽ có lúc các link này bị lỗi thời không truy cập được. Vậy nếu có trục trặc gì với link, hoặc bạn có link nào khác hay hơn thì cứ để lại cho mình bình luận bên dưới bài hôm nay nhé.

Mình cũng có một video demo cho cách cài đặt Google Play với hệ điều hành Android 7.0. Video này mình để ở cuối bài học hôm nay, các bạn xem video sẽ dễ hiểu hơn nhiều.

Các Bước Cài Google Apps Cho Genymotion

Download Những Gói Cần Thiết

Trước tiên thì bạn phải download hai gói sau đây, cứ down về thôi, bước tiếp theo chúng ta mới sử dụng đến các gói này.

1. ARM Translation v1.1 (link download)

2. Chọn một trong các gói sau. Đây chính là gói Google Apps, bạn chú ý chọn cho đúng gói của phiên bản hệ điều hành của máy ảo Android mà bạn đã tạo bởi Genymotion nhé.

– Google Apps cho hệ điều hành Android 7.0.
Lưu ý là với đường link này, bạn phải chọn các option trước khi download. Bạn nên chọn Platform x86, Android 7.0, và Variant stock. Chi tiết cách cài đặt cho Android 7.0 này được mình mô tả kỹ ở video bên dưới bài học nhé.

– Google Apps cho hệ điều hành Android 6.0.

– Google Apps cho hệ điều hành Android 5.1.

– Google Apps cho hệ điều hành Android 5.0.

– Google Apps cho hệ điều hành Android 4.4.

– Google Apps cho hệ điều hành Android 4.3.

– Google Apps cho hệ điều hành Android 4.2.

– Google Apps cho hệ điều hành Android 4.1.

Khởi Chạy Máy Ảo Genymotion Và Bắt Đầu Cài Đặt Google Apps

Lưu ý là ở bước này nếu bạn vẫn chưa có máy ảo Genymotion thì có thể xem cách đăng ký và cài đặt máy ảo

Giờ đây với máy ảo đang mở, bạn hãy kéo và thả file .zip đã download ở bước đầu tiên (Genymotion-ARM-Translation_v1.1.zip) vào màn hình của máy ảo. Kéo và thả… nhẹ nhàng và duyên dáng như hình vẽ của mình dưới đây.

Sau khi thả file vào máy ảo xong, thì có một dialog như sau xuất hiện, bạn nhớ nhấn OK để máy ảo tiến hành cài đặt.

Gói ARM này cài đặt rất nhanh, bạn sẽ nhanh chóng nhìn thấy kết quả thành công ở dialog tiếp theo như sau. Khi này bạn nhấn OK để đóng hộp thoại này lại.

Tiếp theo người ta khuyên bạn nên tắt máy ảo Genymotion và khởi động lại. Đợi đến khi máy ảo khởi động xong thì bạn kéo/thả tiếo file .zip mà bạn download lần thứ hai vào máy ảo, cách kéo/thả cũng y như bước trên vậy.

Cũng như lần trước, một dialog xuất hiện và bạn lại nhấn OK để máy ảo tiếp tục cài đặt.

Lần này bạn đợi hơi lâu một tí do gói cài đặt này lớn. Sau khi cài đặt hoàn tất bạn lại nhận được một dialog thông báo cuối cùng và bạn cứ nhấn OK.

Lần này người ta cũng khuyên bạn nên khởi động lại máy ảo. Bạn cứ vâng lời đi, đâu tốn nhiều thời gian đâu đúng không nào. 🙂

Màn hình trên đây là khi bạn khởi động lại máy ảo, có thể sẽ phải đợi hơi lâu. Sau khi chờ đợi việc update thành công thì bạn có thể thấy ứng dụng Google Play xuất hiện. Hãy đăng nhập vào Google Play ngay và cài đặt các app cần thiết cho máy ảo nhé, như Maps, Gmail,… chẳng hạn.

Thỉnh thoảng bạn sẽ gặp thông báo lỗi ở những lần dầu cài đặt này (như mình có chụp lại ở màn hình dưới đây). Khi đó bạn đừng lo lắng, hãy vào lại Google Play kiểm tra và cập nhật mới cho tất cả các ứng dụng trong danh sách ứng dụng (như video bên dưới bài học). Hoặc bạn có thể mở từng ứng dụng của Google có sẵn trên máy ảo như Google Play Service và chọn Update (như hình).

Nhìn chung thì việc cài đặt Google Apps cho Genymotion là một việc làm không nằm trong hỗ trợ chính của nhà sản xuất, chính vì vậy sẽ không hoàn toàn suôn sẻ cho các bạn mới thử lần đầu. Nhưng bạn cũng biết là mình cũng đã thử cả tỷ lần rồi (hơi nổ tí) và xác suất thành công là 100% nên bạn cứ yên tâm mày mò, vọc đi vọc lại nhé.

Chúc các bạn thành công.

Video Minh Họa Cài Đặt Google Apps Cho Máy Ảo Android 7.0

Cảm ơn bạn đã đọc các bài viết của Yellow Code Books. Bạn hãy đánh giá 5 sao nếu thấy thích bài viết, hãy comment bên dưới nếu có thắc mắc, hãy để lại địa chỉ email của bạn để nhận được thông báo mới nhất khi có bài viết mới, và nhớ chia sẻ các bài viết của Yellow Code Books đến nhiều người khác nữa nhé.

Dạo Quanh Một Chút Về Ứng Dụng Android

Tóm Tắt Quá Trình Tạo Một Ứng Dụng Android

Chúng ta đều đã biết các ứng dụng Android được viết trên ngôn ngữ lập trình Java hoặc Kotlin (mặc dù tới bài này chúng ta vẫn chưa đụng đến đoạn code Java hay Kotlin nào). Có khi bạn còn phải kết hợp cả ngôn ngữ C++ nữa, nhưng bạn đừng quá lo lắng, bạn chỉ cần biết hoặc Java hoặc Kotlin là đủ xây dựng ứng dụng Android rồi.

Sau khi viết ra một ứng dụng hoàn chỉnh bằng ngôn ngữ lập trình thông qua Android Studio, công cụ này sẽ dùng Android SDK để biên dịch mã code đó, kết hợp với vài dữ liệu khác, và đóng gói các resource kèm theo để tạo thành một file cài đặt, đó là file APK (viết tắt của từ Android Package).

Về sau Android có hỗ trợ một định dạng mới để chứa tất cả các thứ được biên dịch trên đây để mang đi “xuất xưởng”, và được gọi với cái tên Android App Bundle (viết tắt là AAB). Tuy nhiên AAB lại không phải là một file cài đặt cuối như APK. Nó chỉ chứa đầy đủ các nội dung cần thiết để rồi khi bạn đưa file này lên Google Play, chính Google Play sẽ quyết định thiết bị cài đặt ứng dụng của bạn cần những gì, nó sẽ tạo ra một APK cuối cùng để có thể cài đặt riêng và phù hợp nhất trên thiết bị đó.

Nếu bạn chọn biên dịch ra APK, thành phẩm cuối cùng bạn có là một file .apk. Nếu bạn chọn biên dịch ra AAB, bạn sẽ nhận được file .aab. File .apk hay .aab này chứa tất cả các thông tin cần thiết để có thể mang đi cài đặt lên các thiết bị khác (chỉ có .apk mới làm được chuyện này thôi), hoặc dùng để xuất bản lên Google Play.

Quá trình tóm tắt để tạo ra một ứng dụng Android như vậy, phần chi tiết hơn thì mình sẽ nói sau khi bạn “lành nghề” hơn với lập trình ứng dụng cho hệ điều hành này.

Vậy ngôn ngữ lập trình, các dữ liệu khác, hay các resource kèm theo được nhắc đến ở trên là gì? Chúng kết hợp lại với nhau như thế nào để Android SDK có thể hiểu và biên dịch ra file .apk hay .aab? Chúng ta sẽ hiểu phần nào ở mục sau đây (còn hiểu sâu hơn thì cần theo dõi tiếp bài sau để tiến hành xây dựng một ứng dụng nhé).

Các Thành Phần Của Một Ứng Dụng

Để dễ hình dung, mình sẽ ví dụ cho bạn thấy rằng việc xây dựng ứng dụng Android cũng giống như việc sản xuất ra một chiếc Ô tô vậy. Ô tô hay ứng dụng đều có những thành phần cơ bản không thể thiếu. Chẳng hạn nhé, ô tô cần phải có động cơ; Ô tô cần phải có bộ khung hay các trang trí khác để tạo thành bộ “giao diện”; Ô tô cần phải có hệ thống điện – điện tử để giải trí hay giám sát; Ô tô cần phải có hệ thống thu phát tín hiệu,… tất cả các thành phần đó tạo thành một thành phẩm ô tô. Một điều lưu ý là thành phẩm ô tô đó có thể có tất cả các thành phần cơ bản, khi đó tính năng của xe sẽ tốt và giá thành thì rất cao. Hoặc cũng có những ô tô chỉ cần một vài thành phần thôi cũng đáp ứng nhu cầu của bộ phận khách hàng nào đó.

Quay lại nói về một ứng dụng, chúng ta cũng có khái niệm các thành phần cơ bản của ứng dụng, cũng có khái niệm ứng dụng có hết tất cả các thành phần, hoặc chỉ cần một hay một vài thành phần là đủ. Tuy nhiên để có thể gọi là một ứng dụng Android thì nó phải có ít nhất một trong các thành phần sau. Chúng ta cùng điểm qua các thành phần đó của ứng dụng.

Activities

Bạn sử dụng Activity để tạo nên một giao diện màn hình. Đây là nơi mà người dùng sẽ nhìn thấy và bắt đầu tương tác với ứng dụng. Mình giả sử bạn đang muốn xây dựng một ứng dụng email, vậy bạn phải suy nghĩ ra các màn hình liên quan cho nó, bạn cần có một màn hình để hiển thị danh sách các email mới nhất. Và cũng cần một màn hình để hiển thị nội dung email. Và một màn hình khác giúp người dùng soạn thảo email mới. Và một màn hình khác…. Và…. Tất cả các “và” như vậy tạo thành một ứng dụng với nhiều màn hình, mỗi màn hình là một Activity. Mỗi Activity như vậy tuy độc lập nhưng lại có thể kết nối với nhau tạo thành một trải nghiệm của người dùng trong ứng dụng email của bạn.

Bạn đã hiểu sơ về khái niệm thành phần đầu tiên của một ứng dụng Android rồi đúng không nào. Chúng ta sẽ được học kỹ hơn về Activity ở bài tiếp theo, học cách làm sao để quản lý chu kỳ sống của một Activity, hay cách thức từ Activity này chuyển qua Activity khác, hay đóng một Activity,…

Services

Khác với Activity được dùng để hiển thị giao diện lên màn hình cho người dùng, Service lại được dùng cho các tác vụ chạy nền, tức là các tác vụ mà người dùng không hề trông thấy. Chẳng hạn như với một ứng dụng nghe nhạc, Activity sẽ hiển thị giao diện các bài nhạc cho người dùng chọn để chơi, còn khi người dùng đã chọn một bài thì thực chất công việc chơi nhạc là của Service. Bằng chứng là khi bạn chuyển qua ứng dụng khác, hay tắt màn hình điện thoại, tuy người dùng không còn nhìn thấy các Activity (các màn hình của ứng dụng) nữa nhưng Service vẫn đang hoạt động ở nền và luôn chơi bản nhạc đó, hay tự chuyển qua bản nhạc khác một cách tự động.

Content Providers

Một Content Providers sẽ lo việc chia sẻ dữ liệu của một ứng dụng. Dù cho ứng dụng của bạn có lưu dữ liệu ở file hệ thống, hay ở cơ sở dữ liệu SQLite, hay ở trên Web, hay bất cứ đâu mà nó có thể truy xuất được. Thì với Content Provider, ứng dụng khác cũng hoàn toàn có thể truy xuất vào dữ liệu của bạn, chỉnh sửa nó (nếu Content Provider cho phép). Một ví dụ điển hình là ứng dụng Quản Lý Danh Bạ của Android, ứng dụng này chứa đựng thông tin số điện thoại và các thông tin khác trên Danh Bạ người dùng, tuy vậy ứng dụng của bạn với khai báo các permission (các quyền cho phép) cần thiết vẫn có thể đọc hay chỉnh sửa thông tin đó.

Broadcast Receivers

Một Broadcast Receivers là một thành phần có khả năng thu nhận các thông báo của hệ thống. Bạn hãy tưởng tượng Broadcast Receiver giống như một cột ăng-ten thu sóng, và nguồn phát sóng chính là từ hệ thống. Hệ thống sẽ phát các tín hiệu như là, màn hình tắt, pin yếu, hay là vừa chụp một hình ảnh,… Tùy vào bạn dựng lên cột ăng-ten muốn lắng nghe loại sóng nào. Broadcast Receiver cũng giống như Service ở chỗ không hiển thị giao diện cho người dùng. Nhưng Broadcast Receiver có thể tạo một thông báo trên thanh Notification của thiết bị.

Một khía cạnh độc đáo khác của Android là việc cho phép một ứng dụng nào đó có thể khởi động một thành phần của một ứng dụng nào đó khác. Một minh chứng cho khía cạnh này là, ví dụ bạn đang xây dựng một ứng dụng mà trong đó có chức năng chụp ảnh dựa trên máy ảnh của thiết bị, thì thay vì bạn phải mày mò xây dựng chức năng này, ứng dụng của bạn hoàn toàn có thể gọi một dứng dụng có sẵn chức năng chụp ảnh để giúp bạn làm việc đó một cách dễ dàng nhanh chóng, bằng cách gọi thẳng đến Activity của ứng dụng chụp ảnh đó, ứng dụng chụp ảnh sẽ điều khiển máy ảnh, chụp ảnh và lưu ảnh lại, ứng dụng của bạn chỉ cần lấy ảnh vừa lưu lại mang ra sử dụng, điều này diễn ra một cách nhịp nhàng và người dùng hoàn toàn bị đánh lừa rằng chỉ có ứng dụng của bạn đang làm tất cả mọi chuyện.

Kích Hoạt Các Thành Phần

Chúng ta vừa dạo qua các thành phần giúp tạo nên một ứng dụng Android ở trên. Giờ chúng ta nói đến việc làm sao để kích hoạt, hay làm cách nào để các thành phần đó hoạt động.

Vậy thì bạn nên nhớ là (hoặc ghi chú lại sau này mình nhắc lại sẽ nhớ rõ), ba trong bốn thành phần kể trên bao gồm Activity, Service và Broadcast Receiver được kích hoạt bởi một thông điệp bất đồng bộ (asynchronous message) có tên là Intent.

Trong một ứng dụng thì Intent như là thành phần trung gian kết dính các thành phần khác với nhau, chẳng hạn từ một Activity này bạn có thể kích hoạt một Activity khác, hoặc kích hoạt một Service hoạt động. Intent cũng giúp làm trung gian để từ một ứng dụng có thể kích hoạt thành phần của ứng dụng khác, như ví dụ về việc mở một ứng dụng có chức năng chụp ảnh trên đây.

Về phía phân loại Intent thì có hai dạng là tường minh và ngầm hiểu. Vậy thôi, bạn sẽ được biết cách sử dụng Intent một cách cụ thể ở các bài học sau.

File Manifest

Wow, chúng ta đã xem qua một ứng dụng Android có các thành phần gì, chúng ta cũng đã xem qua cách để kích hoạt các thành phần đó. Điều quan trọng cuối cùng trong một ứng dụng Android, đó là để sử dụng các thành phần mà chúng ta mong muốn, trước khi kích hoạt chúng, chúng ta cần phải “khai báo” chúng. Tất cả các khai báo đó đều được để trong một file, đó là file Manifest.

Ngoài việc giúp khai báo các thành phần sẽ được sử dụng trong ứng dụng, file Manifest còn là nơi bạn khai báo các mục đích khác như:

• Đăng ký các user permission, tạm hiểu là các quyền hạn mà ứng dụng xin phép người dùng để sử dụng các tính năng của hệ thống, như là quyền được truy cập internet, được đọc danh bạ (contacts), được ghi file ra thẻ nhớ ngoài,…
• Chỉ định Minimum Required SDK, là chỉ định thông số hệ điều hành thấp nhất của Android mà ứng dụng của bạn hỗ trợ, ngoài việc khai báo giá trị này trong file Manifest, chúng ta còn có thể khai báo trong file build.gradle mà mình sẽ nói ở các bài sau.
• Chỉ định các tính năng phần cứng và phần mềm mà ứng dụng của ta muốn sử dụng đến, như camera, bluetooth, hay ngay cả tính năng multitouch.
• Khai báo các thư viện bên ngoài (bên ngoài ở đây có thể hiểu là các thư viện không có sẵn trong các API Framework của Android) mà ứng dụng của bạn có sử dụng đến, như thư viện Google Maps, Google Play,… Và phần này cũng có thể được khai báo trong file build.gradle mà chúng ta cũng sẽ tìm hiểu sau.

Các Resource

Một ứng dụng Android không thể nào thiếu các resource. Bạn có thể hiểu các thành phần được nói trên đây là các source code, nó chứa đựng các logic cho ứng dụng được dựng lên bởi một ngôn ngữ lập trình nào đó. File Manifest như là một file cấu hình của ứng dụng. Thì các resource chính là các loại file còn lại bổ trợ thêm cho ứng dụng của bạn, chúng bao gồm các file hình ảnh, âm thanh, video, các file text, màu sắc,… hay thậm chí một file giao diện XML. Bạn sẽ có cơ hội được tìm hiểu sâu hơn về các resource bên trong một ứng dụng Android, và cách thức làm việc với file giao diện XML sau này.

Kết Luận

Mình nghĩ bài học thứ 5 nên kết thúc ở đây, với bài học này bạn có một cái nhìn tổng quát về cấu tạo của một ứng dụng. Bạn sẽ học cách sử dụng từng thành được nói ở trên, cách sử dụng Intent để kích hoạt các thành phần này, hay cách sử dụng file Manifest cũng như file build.gradle để khai báo các nhu cầu cần thiết cho ứng dụng của bạn ở các bài tiếp theo.

Dạo Qua Ứng Dụng TourNote & Thực Hành Debug Ứng Dụng

Chào mừng các bạn quay trở lại với bài học số 6 trong chương trình học Android 

Hẳn các bạn đã có một chuỗi dài chờ đợi diện mạo của ứng dụng mà chúng ta sắp sửa xây dựng – Ứng dụng TourNote – Bài hôm nay sẽ “vén màn” bí mật đó, và từ đây về sau chúng ta cùng từng bước xây ứng dụng này trong suốt các bài thực hành nhé.

Dạo Qua Ứng Dụng TourNote

Như bạn có thể thấy, ứng dụng TourNote của bạn, đúng rồi ứng dụng này sẽ là của bạn, nếu bạn cùng với mình đi đến cuối các bài giảng của chương trình Android này, ứng dụng của chúng ta sẽ có giao diện hiện đại theo chuẩn Material Design của Android.

Có một điều thú vị là trong khi thông tin về TourNote đang chuẩn bị trình làng cho mọi người ở bài hôm nay, thì Google cũng vừa tung ra một ứng dụng liên quan đến du lịch, đó là Google Trip. Có thể nói là trùng ý tưởng!!! Để thêm phần thú vị nữa thì bạn có thể xem TourNote là một bản thu nhỏ của Google Trip đi, mình cũng không chắc chúng sẽ giống nhau bao nhiêu phần trăm, nhưng có vẻ chúng giống nhau ở ý tưởng giúp ghi chú lại những gì bạn đã trải qua và sẽ được bạn thực hiện trong chuyến du lịch nào đó trong tương lai. Bạn vẫn có thể học hỏi Google Trip để bổ sung thêm cho TourNote của mình được hoàn hảo hơn cả các bài thực hành này của mình.

Có thể nói thêm là TourNote sẽ như một quyển sổ tay, giúp người dùng của bạn sưu tầm các địa chỉ ăn uống, du lịch, tham quan,… Đặc biệt hơn, bạn sẽ tận dụng dịch vụ map của Google để lưu vị trí, gợi nhắc người dùng khi ở gần vị trí nào đó,…

Trước mắt, không như Google Trip, ứng dụng TourNote sẽ được xây dựng dưới dạng offline, tức mọi thứ sẽ được lưu trữ trên thiết bị Android của bạn (hoặc máy ảo). Điều này cũng có nghĩa là nếu bạn xóa app, hay xóa data của thiết bị, thì mọi dữ liệu sẽ bị mất :(. Bạn có tùy chọn share các note của mình lên các công cụ online khác như Facebook, Twitter, hay gửi cho bạn bè qua email,… để lưu giữ lại. Mình hi vọng là ứng dụng sẽ có khả năng lưu trữ online ở mục nâng cao cuối chương trình.

Hiện tại như hình trên, mình có thiết kế sẵn 3 màn hình chính. Bao gồm màn hình Home (màn hình đầu tiên) chứa các chủ đề (là các tab ở trên màn hình) và danh sách các note theo từng chủ đề đó. Màn hình thứ hai là khi người dùng nhấn vào nút   , khi đó sẽ có các tùy chọn cho người dùng thêm/sửa Chủ Đề hay Ghi Chú. Cuối cùng là màn hình Thêm Ghi Chú. Các màn hình còn lại sẽ xuất hiện từ từ khi chúng ta đi vào chi tiết bài thực hành.

Trước khi đi vào xây dựng ứng dụng, bạn nhất thiết phải biết debug ứng dụng cái đã. Để biết debug ứng dụng là gì thì mời bạn xem qua phần dưới đây nhé.

Thực Hành Debug Ứng Dụng

Debug Là Gì?

Debug là một khái niệm trong lập trình, nó bao gồm 2 hành động, đó là Tìm Kiếm Lỗi và Sửa Lỗi. Thông thường khi có bất kỳ Lỗi nào phát sinh xảy đến cho ứng dụng của bạn – Tất nhiên Lỗi không thể do chủ ý của một người lập trình giỏi giang như bạn được, mà Lỗi xuất hiện bất ngờ và rất khó lường – Khi đó việc Tìm Kiếm xem Lỗi xảy ra do đâu là rất quan trọng. Sau khi tìm thấy Lỗi, bạn phải sửa được Lỗi đó. Kết hợp cả 2 quá trình Tìm Kiếm – Sửa Lỗi lại chúng ta tạo ra khái niệm Debug.

Vậy có tất cả các cách debug gì mà Môi Trường Lập Trình Android hỗ trợ cho chúng ta? Hãy cùng nhau tìm hiểu các cách sau.

Debug Bằng Cách Ghi Log

Log sẽ được hiển thị ở tab logcat trong cửa sổ Android Monitor. Nếu các bạn còn nhớ Bài 3, phần Tổng Quan Về Project có nhắc đến Tool windows (các cửa sổ công cụ), thì hôm nay chúng ta làm quen với Android Monitor – một trong các cửa sổ công cụ đó.

Trước khi đi vào cách thức debug với log, chúng ta làm quen với logcat một chút. Như bạn thấy ở trên, logcat chứa các dòng log liên quan đến hệ thống, và cả những dòng log từ phía ứng dụng của bạn nữa, là do chủ động bạn show ra hay được xây dựng sẵn từ các thư viện cấp thấp hơn. Logcat hiển thị log tức thời theo thời gian thực (realtime), và còn được lưu giữ lại nữa, nên chúng ta hoàn toàn có thể tận dụng loagcat để debug một ứng dụng.

Ẩn Hiện Android Monitor

Logcat được hiển thị trong cửa sổ Android Monitor, nhưng nếu bạn không thấy cửa sổ này đâu cả, thì hãy tìm và nhấn vào  ở dưới cùng của cửa sổ chính.

Nhấn vào  một lần nữa để ẩn cửa sổ này đi.

Hoặc bạn cũng có thể vào menu View > Tool Windows > Android Monitor để ẩn/hiện cửa sổ này.

Cách Ghi Log

Khi muốn ghi log, bạn hãy chọn một trong các hàm sau đây, việc phân biệt log theo các hàm ngoài mục đích log của bạn sẽ được xuất hiện đúng màu chủ đạo để dễ tìm trong một rừng log, thì bạn còn có thể lọc (filter) các log theo từng dạng mà chúng ta sẽ nhắc đến ở dưới. Nên nhớ là nếu bạn ghi log này ở đâu trong code, thì khi hệ thống thực thi đến dòng code đó, log của bạn sẽ xuất hiện ngay lập tức ở cửa sổ logcat. Các hàm ghi log được liệt kê như sau.

Để in ra log dạng lỗi (error)

Để in ra log dạng cảnh báo (warning)

Để in ra log kiểu cung cấp thông tin (information)

Để in ra log cho các nhu cầu debug

Và log cho các nhu cầu khác (verbose)

Mặc dù mình không tìm thấy bất kỳ sự ràng buộc nào cho việc lựa chọn các dạng ghi log trên đây, tất cả là nằm ở bạn, nhưng có một số lời khuyên, chẳng hạn như bạn đừng nên show ra các log dạng verbose hay debug khi tung ứng dụng ra thị trường, nó chỉ được dùng cho mục đích kiểm tra trong quá trình xây dựng ứng dụng mà thôi. Trong khi đó các log dạng error, warning hay information thì hoàn toàn được phép xuất xưởng.

Như bạn thấy ở trên, hàm log nào cũng có 2 tham số truyền vào, tham số thứ nhất cho phép bạn đặt một nhãn gọi là tag, tag dùng để gom nhóm hay phân biệt các loại log với nhau; Tham số thứ hai là nội dung của log mà bạn muốn in ra. Chú ý tag sẽ được dùng đi dùng lại nhiều lần nên tốt nhất nên khai báo chúng là một biến static để tiện cho việc dùng lại.

Debug Qua Việc Phân Tích Stack Trace

Nói đến debug ứng dụng thì không thể không nhắc đến Stack Trace. Stack Trace là một tập hợp các dòng log đặc biệt, các dòng log này cũng được xuất hiện trong cửa sổ logcat như bao dòng log khác. Nhưng Stack Trace chỉ xuất hiện khi ứng dụng của bạn bị crash – Một trạng thái dừng đột ngột của ứng dụng vì bất cứ một lỗi nào đó xảy ra mà hệ điều hành không có khả năng cứu vãn, khi đó hệ điều hành tự động đóng ứng dụng của bạn lại và để lại một hộp thoại thông báo rằng ứng dụng đã bị dừng.

Stack Trace khi xuất hiện giống như sau.

Bạn có thể thấy Stack Trace hiển thị danh sách các hàm có liên đới đến crash, đi kèm theo đó là tên file và dòng nào trong file đó gây ra crash. Bạn có thể nhấn vào bất cứ dòng nào có tô xanh, khi đó bạn được dẫn đến đúng file và dòng lỗi đó.

Nhấn vào Up the stack trace  hay Down the stack trace  để di chuyển nhanh lên/xuống các Stack Trace trong logcat.

Debug Bằng Công Cụ

Ngoài việc xem log như trên, Android Studio còn hỗ trợ các bạn một công cụ debug hiệu quả nữa. Với công cụ này bạn có thể tạo ra các breakpoint (điểm dừng) trên source code. Khi ứng dụng của bạn chạy đến nơi có brakpoint, nó sẽ bị chặn lại, và công cụ debug của Android Studio sẽ giúp bạn xem các biến, các giá trị ngay tại thời điểm đó, thậm chí bạn có thể chụp hình, hay quay phim lại màn hình ứng dụng của bạn. Và cho đến khi bạn chưa cho phép, thì Android Studio vẫn dừng mãi ở breakpoint đó đến khi nào bạn nhấn nút đi tiếp. Trong một project bạn có thể đặt bao nhiêu breakpoint tùy thích. Và breakpoint chỉ hoạt động trong chế độ chạy debug mà thôi, các cách thực thi ứng dụng ở chế độ debug được liệt kê dưới đây.

Có 2 cách để thực thi ứng dụng ở chế độ debug.

1. Nếu ứng dụng của bạn đang chạy, nhấn vào nút  trên thanh công cụ sẽ giúp ứng dụng của bạn chuyển ngay sang chế độ debug, giữ nguyên màn hình và các chức năng đang chạy, mà không cần phải khởi động lại.
2. Nếu ứng dụng đang tắt, bạn hãy nhấn vào nút  để ứng dụng được chạy lên, tương tự như khi chạy với chế độ bình thường nhưng lại sẵn sàng để debug.

Bạn vừa xem qua tất cả những cách debug lỗi, bạn hãy thực hành tất cả các cách này nhé, vì mình cũng đang dùng chúng và thực sự đó là những cách hiệu quả giúp chúng ta nhanh chóng tìm ra lỗi phát sinh ở đâu trong rừng code.

Tạo Giao Diện Người Dùng

Bài hôm nay chúng ta sẽ nói về Giao Diện Người Dùng  (Graphical User Interface – GUI), một thành phần quan trọng trong ứng dụng của các bạn. Nhắc lại một chút rằng, ở bài 5 chúng ta có nói qua các Thành Phần Của Ứng Dụng (Application Component), nhưng có bạn nào thắc mắc rằng giao diện sẽ được xây dựng như thế nào dựa trên các Thành Phần này không? Nếu bạn để ý kỹ bài học, thì mình có nói rằng trong 4 Thành Phần đó (Activities, Services, Content Providers và Broadcast Receiver) thì chỉ có duy nhất Activities là hiển thị giao diện cho người dùng. Vậy bài này các bạn sẽ được biết cách thức xây dựng giao diện cho một Activity. Activity là gì thì chúng ta sẽ tìm hiểu sau, điều các bạn cần quan tâm bây giờ là bạn cần hiểu Activity chính là cái màn hình mà bạn thực thi ứng dụng lên từ bài học số 4, màn hình in ra mỗi một dòng chữ “Hello World”. Và giao diện của nó gắn liền với một class có tên MainActivity.java.

Trước khi chính thức đi vào thực hành xây dựng giao diện, chúng ta nói qua một số khái niệm sau, chúng là những viên gạch cơ bản đầu tiên để xây dựng nên một “công trình” giao diện hoàn chỉnh, chúng hoành tráng hay nghèo nàn, kiên cố hay xiêu vẹo là ở những viên gạch cơ bản này đấy.

Khái Niệm Widget

Bạn ít khi nghe nói đến Widget trong giao tiếp thông thường, nhất là khi trao đổi tiếng Việt giữa các lập trình viên với nhau. Nhưng trong ngôn ngữ lập trình, Widget có khái niệm rõ ràng và được sử dụng trong các tài liệu tiếng Anh đấy nhé.

Vậy thì, Widget là một thành phần của Giao Diện Người Dùng, Widget giúp hiển thị các thông tin được sắp xếp, và có thể chỉnh sửa được tới người dùng. Mỗi Widget sẽ mang một kiểu thông tin nhất định, tập hợp chúng lại với nhau chúng ta tạo nên một Giao Diện Người Dùng. @@

Đọc các dòng trên có thể khiến bạn bị lùng bùng lỗ tai, nhưng thực ra Widget rất dễ hiểu, nó chính là cái Textbox, cái Label, cái Button,… trên ứng dụng của bạn mà thôi. Để dễ hiểu hơn bạn hãy nhìn vào hình ảnh rất đẹp của một ứng dụng sau. ^^

Bạn có thể thấy:

– Một số text, như Thêm Ghi Chú, Chủ Đề
– Một số chỗ để người dùng nhập text của họ vào, như Tiêu Đề, Miêu Tả, Ghi Chú
– Một số check box, như Ăn Uống, Tham Quan, Mua Sắm
– Một số nút, như nút +, nút x
– Một số nơi để hiển thị hình ảnh
– …

Tất cả những thành phần được liệt kê ở trên đều là các Widget cả đấy, chúng được sắp đặt ở các vị trí cụ thể trên màn hình, mỗi Widget đảm nhận các vai trò khác nhau đến với sự tương tác với người dùng. Bạn thấy có dễ hiểu hơn không nào. Chúng ta sẽ làm quen với từng Widget ở bài học sau nhé, còn bây giờ hãy qua khái niệm kế tiếp.

Khái Niệm View

Bạn đã hiểu Widget là gì rồi, giờ ta sẽ tìm hiểu về khái niệm View. View thực chất là nguồn gốc để tạo nên các Widget được nói đến ở trên.

View được hiểu như là các cấu tạo giống nhau, hay nói cách khác nó là các khuôn mẫu cơ bản để làm nền tảng tạo nên Widget. Nó tương tự như khái niệm về lập trình trong OOP ấy, trong đó View là class còn các Widget là các object được tạo ra từ class (View) đó. Do đó trong khi ở View chỉ có các thuộc tính chung nhất, thì Widget là các thể hiện khác nhau của View. Mỗi Widget chứa đựng các thuộc tính đặc thù của nó mà các Widget khác không có. Chẳng hạn Button sẽ có các thuộc tính khác với Label, Checkbox sẽ khác Radio Button,...

Khái Niệm ViewGroup

ViewGroup cũng gần như là View, nhưng đặc biệt hơn một chút, đó là, ViewGroup được tạo ra để chứa đựng các View hay các ViewGroup khác. Nếu như View là nguồn gốc để tạo ra các Widget, thì ViewGroup lại là nguồn gốc để tạo ra các Layout. Các layout mà chúng ta sẽ sớm làm quen, như ConstraintLayout, LinearLayout, RelativeLayout, FrameLayout, GridLayout,… Mỗi layout như một Thùng Chứa (Container) để chứa đựng các View hay các ViewGroup khác bên trong mình, các thành phần bên trong này được sắp xếp theo một quy tắc nhất định tùy theo từng loại ViewGroup.

Kết Hợp View Và ViewGroup Để Tạo Nên Giao Diện

Với khái niệm View và ViewGroup ở trên, các bạn có thể thấy rằng mối quan hệ của hai thành phần này giúp tạo thành một giao diện người dùng có bản chất là một cây phân cấp. Cây phân cấp này bao gồm các View và ViewGroup, chúng được sắp xếp hay lồng vào nhau theo những quy tắc nhất định. Như hình minh họa dưới đây.

Chỉnh Sửa Giao Diện Cho TourNote

Woohooo!!! Lý thuyết ở trên nặng đầu quá, nếu bạn chưa hiểu gì cả thì cũng không sao. Giờ chúng ta nên làm quen với thực hành tạo giao diện. Có một điều chúng ta phải thống nhất với nhau trước khi đi vào chi tiết thực hành, đó là việc xây dựng giao diện cho ứng dụng Android sẽ làm bằng cách kết hợp cả hai phương pháp, là “kéo thả”, và code. Kéo thả có nghĩa là bạn có được công cụ cần thiết để chỉ việc kéo các widget có sẵn vào màn hình thiết kế, việc kéo thả này sẽ làm phát sinh code XML. Còn code có nghĩa là bạn phải biết cách nhìn vào các dòng chữ được sắp xếp theo chuẩn XML sau các thao tác kéo thả của bạn. Việc kéo thả giao diện thì rất trực quan rồi, lát nữa đến bài thực hành bạn sẽ thấy nó dễ đến mức nào. Còn việc nhìn vào code XML là vì nhiều khi công cụ kéo thả không giúp bạn có thể đạt được mong muốn cuối cùng của giao diện, hoặc có bất kỳ lỗi nào đối với công cụ này mà bạn hoàn toàn không có khả năng sửa chữa nó bằng các phương pháp kéo thả, ngoại trừ nhìn vào code. Ngoài ra, khi nhìn vào code, các bạn còn có thể thấy sự kết hợp các View và ViewGroup như cây phân cấp ở trên đã trình bày, giúp bạn có sự hình dung rõ ràng nhất về việc giao diện của bạn tạo ra nó được xây dựng dựa trên cơ sở gì.

Đầu tiên, để đảm bảo chắc chắn code của bạn sẽ thực thi lên được (vì bài trước bạn đã code một dòng làm cho ứng dụng bị crash để trải nghiệm), thì bạn nên xóa các dòng đã code từ bài trước đó đi nhé, bảo đảm class MainActivity.java “sạch” giống như sau.

Giờ bạn hãy tìm đến file activity_main.xml và click đúp để mở file này lên, đây chính là giao diện của class ActivityMain.java. Nhắc lại là nếu không biết mở class này ở đâu, bạn hãy tìm trong cửa sổ Project ở bên trái màn hình. File activity_main.xml sẽ xuất hiện ở cửa sổ Project như một trong hai hình sau, tùy vào cách thức hiển thị là Android hay Project.

https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2016/09/hinh1.png?resize=300%2C182&ssl=1 300w, https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2016/09/hinh1.png?resize=768%2C467&ssl=1 768w" data-lazy-loaded="1" sizes="(max-width: 796px) 100vw, 796px" loading="eager" style="box-sizing: border-box; height: auto; max-width: 100%; border-style: none; margin: 0px auto; clear: both; text-align: center;">

Cửa sổ của file activity_main.xml được mở lên sẽ rất khác với lúc bạn mở ActivityMain.java hôm trước. Vì mình cũng đã có nói đến ở Bài 3, rằng cửa sổ editor này rất đặc biệt, nó sẽ hiển thị nội dung theo đúng loại file đã mở, trong trường hợp này bạn đang mở file giao diện XML nên Android Studio sẽ hiển thị theo kiểu thiết kế giao diện như sau.

https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2016/09/hinh2.png?resize=300%2C161&ssl=1 300w, https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2016/09/hinh2.png?resize=768%2C412&ssl=1 768w, https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2016/09/hinh2.png?resize=1024%2C549&ssl=1 1024w" data-lazy-loaded="1" sizes="(max-width: 1000px) 100vw, 1000px" loading="eager" style="box-sizing: border-box; height: auto; max-width: 100%; border-style: none; margin: 0px auto; clear: both; text-align: center;">

Giao diện ở cửa sổ này có thể khác với giao diện ở máy bạn một chút tùy vào version của Android Studio. Các bạn có thể chú ý ở phía dưới cửa sổ này có 2 tab: Design và Text (như hình dưới).

https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2016/09/hinh3.png?resize=300%2C137&ssl=1 300w" data-lazy-loaded="1" sizes="(max-width: 412px) 100vw, 412px" loading="eager" style="box-sizing: border-box; height: auto; max-width: 100%; border-style: none; margin: 0px auto; clear: both; text-align: center;">

Mặc định cửa sổ này hiển thị chế độ Design, tức là các bạn có thể kéo-thả giao diện, hệ thống sẽ sinh ra code XML một cách tự động cho bạn. Để hiểu hơn về cửa sổ Design này, và cách kéo thả sao cho ra một giao diện Android, thì bạn có thể xem trước loạt bài riêng về ContraintLayout này của mình nhé.

Và như mình nói, chúng ta phải học cách làm quen việc kéo thả giao diện, và cả cách code XML cho giao diện Android nữa. Nên bạn hãy đừng ngần ngại, hãy thử nhấn vài tab Text xem sao.

https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2016/09/hinh4.png?resize=300%2C161&ssl=1 300w, https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2016/09/hinh4.png?resize=768%2C412&ssl=1 768w, https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2016/09/hinh4.png?resize=1024%2C549&ssl=1 1024w" data-lazy-loaded="1" sizes="(max-width: 1000px) 100vw, 1000px" loading="eager" style="box-sizing: border-box; height: auto; max-width: 100%; border-style: none; margin: 0px auto; clear: both; text-align: center;">

Một lát nữa đây chúng ta sẽ thực hành với việc kéo thả giao diện. Nhưng trước khi thực hành chuyện đó, chúng ta nên xem qua một chút cấu tạo của XML ở bước này, để khi kết thúc việc kéo thả, chúng ta sẽ cùng nhau so sánh lại một lần nữa sự thay đổi ở XML nhé.

Giải Thích Một Chút Giao Diện XML

Bạn hãy chú ý dòng đầu tiên.

Bạn nên biết rằng đây không phải khái niệm của Android, nên bạn không cần quan tâm cũng được. Đây là định nghĩa của XML mà thôi, nó thông báo rằng cấu trúc bạn đang dùng là XML version 1.0, và text được mã hóa theo định dạng utf-8.

Đoạn kế tiếp.

Đoạn này cho thấy rằng giao diện đang được khai báo với thẻ gốc là ConstraintLayout. Lưu ý là nếu bạn nào chưa rành về XML được tổ chức như thế nào, thì có thể tìm hiểu thêm trên mạng. Rất nhiều bài viết mô tả rất chi tiết về cấu trúc XML đấy nhé, đơn cử như bài viết này đây.

Quay lại đoạn XML trên đây. Như bài học có nói, ConstraintLayout là một ViewGroup, do đó bên trong nó có thể chứa các View hoặc ViewGroup khác. Như trường hợp trên, TextView chính là View, thành phần này nằm bên trong ViewGroup ConstraintLayout. Ngoài ra, sở dĩ bạn thấy ConstraintLayout được viết hơi bị dài dòng, android.support.constraint.ConstraintLayout là vì hệ thống nêu đích danh nơi chứa ConstraintLayout này thôi, bạn đừng quan tâm cũng đừng chỉnh sửa gì hết nhé.

Các thuộc tính bên trong thẻ ConstraintLayout hay các thẻ khác xuất hiện trong giao diện hôm nay sẽ được mình trình bày riêng ở bài học khác. Hôm nay bạn hiểu sơ như thế này thôi.

Thực Hành Chỉnh Sửa Giao Diện Cho TourNote

Bây giờ chúng ta sẽ chính thức chỉnh sửa giao diện cho TourNote nhé. Vẫn ở màn hình của main_activity.xml, bạn hãy chọn lại tab Design.

Sau đó đảm bảo chữ “Hello World!” đang được chọn ở màn hình trực quan thiết kế trong cửa sổ này. Bạn có thể tham khảo hình sau.

Chữ “Hello World!” mà bạn đang chọn đó là một TextView. TextView là gì ư? Đây là một widget giúp chúng ta hiển thị các text đến với người dùng. Text mà TextView này đang hiển thị chính là “Hello World!” đó. Giờ chúng ta sẽ thay đổi text này. Từng Widget cụ thể cũng sẽ được mình nói ở các bài học riêng lẻ luôn nhé. Với TextView đang được chọn, nhìn vào bên phải cửa sổ editor bạn thấy có một cửa sổ nhỏ có tên Attributes. Cửa sổ Attributes sẽ giúp bạn thay đổi các thuộc tính của các View hay ViewGroup mà bạn đang chọn.

Nhìn xuống phía dưới Attributes, bạn sẽ thấy một field có tên là text. Trong field text này có đang hiển thị sẵn text “Hello World”. Hãy thay thế text này thành text “Bạn chưa có ghi chú nào cho mình, hãy tạo mới ghi chú từ hôm nay”. Như hình sau.

Khi bạn sửa chữa nội dung cho TextView ở cửa sổ Attributes, bạn thấy trực quan màn của ứng dụng cũng thay đổi theo ở bên phải Attributes này, thật thuận tiện đúng không nào.

Tuy nhiên, cách hiển thị text ở màn hình ứng dụng chưa được đẹp lắm. Bạn mong muốn chúng được canh giữa màn hình cơ. Bạn hãy làm tiếp bước dưới đây.

Cuộn xuống đến cuối Attributes, bạn sẽ thấy dòng chữ View all attributes.

Nhấn vào dòng chữ này hệ thống sẽ dẫn bạn đến một danh sách đầy đủ hơn các thuộc tính của TextView. Bạn thấy đấy, một cái TextView thôi mà có rất nhiều thuộc tính cho nó đúng không. Bạn có thể nhìn sơ qua danh sách các thuộc tính này, chúng cũng rất dễ hiểu thôi.

Hãy cuộn tìm trong các thuộc tính này một thuộc tính quan trọng, đó là gravity. Hãy nhấn vào hình tam giác bên trái chữ gravity này để bung ra nhiều tùy chọn nhỏ hơn nữa. Khi này bạn hãy check chọn vào thành phần center bên trong gravity này nhé. Bạn có thể xem hình dưới đây để hiểu rõ hơn.

Nếu bạn chưa biết gravity là gì thì có thể xem tiếp các bài học kế. Nhưng như bạn thấy đấy, sau khi check chọn vào center, bạn thấy ngay text ở TextView đã được canh chỉnh vào giữa rồi đúng không nào.

Giờ thì bạn hãy nhấn lại tab Text của màn hình activity_main.xml để xem sự thay đổi về code XML nhé. Bạn có thấy dòng code nào xuất hiện thêm không. Để mình chỉ ra cho bạn xem bằng dòng lệnh được tô sáng như sau. Bài sau chúng ta sẽ tìm hiểu một chút về các dòng code XML này.

Run Ứng Dụng

Lúc này bạn hãy thử run ứng dụng TourNote để xem thành quả nhé.

Làm Quen Với Android Resource

Ở bài trước chúng ta đã làm quen sơ qua cách thức tạo một giao diện cho Android rồi đúng không nào. Đến bài học hôm nay các bạn sẽ chưa cần phải tạo một giao diện nào khác đâu, mà hãy cùng mình nhìn lại cách thức chúng ta sử dụng các “nguyên liệu” để tạo thành một giao diện hoàn chỉnh của bài hôm trước. “Nguyên liệu” mà mình muốn nhắc đến đó chính là khái niệm Resource.

Resource Là Gì?

Trong lập trình Android, có một sự phân biệt rõ ràng giữa resource và source code. Nếu như source code là Java code, thì resource là những file còn lại không liên quan đến Java code đó, chẳng hạn như các file hình ảnh, âm thanh, video, các file text, màu sắc,… và thậm chí là file activity_main.xml mà bạn đã làm quen hôm trước, cũng chính là các resource mà chúng ta cần quan tâm.

Resource Để Ở Đâu Trong Project?

Nếu như source code được để trong thư mục java/ thì resource được để trong thư mục res/. Bạn hãy nhìn vào hai thư mục mà mình vừa nhắc đến bên dưới đây.

Nếu bạn xổ thư mục res/ này ra, bạn sẽ nhìn thấy rất nhiều thư mục con trong đó. Những thư mục con này được tạo sẵn khi bạn tạo mới một project, số lượng thư mục tạo sẵn và tên các thư mục này phụ thuộc vào từng thời điểm của Android Platform. Ngoài các thư mục được tạo sẵn này bạn có thể tạo thêm nhiều thư mục khác nữa (tất nhiên theo một quy luật đặt tên nhất định mà chúng ta sẽ nói rõ hơn ở các bài sau).

Sử Dụng Resource Như Thế Nào?

Bạn nên ghi nhớ rằng, resource của Android được chia ra làm 2 dạng, Default Resource (resource theo mặc định) và Alternative Resource (resource có chọn lựa).

Default Resource

Default resource có thể dịch là resource theo mặc định. Các resource dạng này sẽ được hiển thị tùy theo chỉ định mặc định của máy.

Ví dụ như bạn để một ảnh Bitmap vào trong default resource, thì ảnh của bạn sẽ được dùng cho tất cả các kích cỡ màn hình ở ngoài thị trường, nó có thể sẽ trông đẹp ở một số màn hình, nhưng có thể sẽ mờ, hay vỡ ở một số màn hình khác.

Thêm một ví dụ nữa, chẳng hạn như bạn đang xây dựng ứng dụng hỗ trợ song ngữ Anh-Việt, thì với file ngôn ngữ được để ở default resource, file này sẽ được hệ thống dùng đến mà không hề có sự chọn lựa rằng khi nào nên hiển thị giao diện ứng dụng với ngôn ngữ tiếng Anh, khi nào tiếng Việt.

Nói vậy không có nghĩa là default resource vô dụng, vậy khi nào thì dùng default resource được? Chúng ta đi tiếp phần dưới đây để cùng nhau sáng tỏ.

Cách Sử Dụng Default Resource

Nếu bạn có một ảnh, hay một file âm thanh, hay một text, mà bạn không cần phải phân biệt chúng giữa các thiết bị khác nhau trên thị trường, thì bạn có thể để các file này ở default resource.

Mình ví dụ như resource là một file âm thanh notification của app. Ồ file này thì dù cho máy có màn hình kiểu nào, LG hay Samsung, chạy ở quốc gia nào cũng được. Cho file này vào default resource thôi.

Hay bạn có một ảnh dạng Vector, ảnh dạng này sẽ không bị bể khi bạn zoom nó như là ảnh Bitmap, do đó nó không cần phân biệt theo các loại màn hình khác nhau. Cho file ảnh này vào default resource thôi.

Thêm một ví dụ nữa, đó là nếu bạn có các resource dạng màu sắc. Ồ màn hình nào cũng hiển thị màu giống nhau, không cần phân biệt. Cho resource này vào default resource thôi.

Nhiêu đây ví dụ chắc bạn cũng đã hiểu khi nào thì dùng resource dạng default resource. Vậy thì, cho resource vào default resource là thế nào? Dễ lắm, bạn chỉ cần để các resource mà bạn có vào các thư mục con của thư mục res/ theo một quy tắc sau. Nên nhớ là các thư mục con này hoặc sẽ có sẵn khi bạn tạo mới project (như hình mình để ở trên kia), hoặc bạn tự tạo nhưng nhớ đúng với tên mình liệt kê ra đây (tất cả loại resource này sẽ được mình nói rõ ở từng bài học riêng biệt, bạn yên tâm nếu đọc sơ qua danh sách dưới đây mà không hiểu gì nhé).

– animator/: Thư mục này dùng để chứa các animation theo dạng XML. Đây là các resource định nghĩa về chuyển động cho các thành phần UI của ứng dụng.
– anim/: Thư mục này cũng dùng để chứa các animation theo dạng XML. Nhưng khác với animator, các resource theo dạng anim tạo chuyển động theo một số cấu trúc định sẵn, và vì vậy anim sẽ không linh hoạt bằng animator.
– color/: Thư mục này dùng để chứa định nghĩa về các màu sắc được biến đổi theo trạng thái (state list of colors) cho ứng dụng theo dạng XML.
– drawable/: Thư mục này dùng để chứa các ảnh bitmap (hỗ trợ các ảnh theo định dạng .png, .9.png, .jpg, .gif); Chứa các ảnh biến đổi theo trạng thái (state list); Chứa các hình khối (shape) do bạn tự vẽ bằng XML; Và còn nhiều loại khác nhưng ít phổ biến hơn các loại mình vừa nêu.
– mipmap/: Thư mục này dùng để chứa các icon của ứng dụng.
– layout/: Thư mục này dùng để chứa đựng tất cả các giao diện màn hình được code bằng XML. Bạn nhớ lại đi, bài trước chúng ta thử code giao diện ở file activity_main.xml, file lày có phải nằm trong thư mục layout/ không nào?
– menu/: Thư mục này dùng để chứa đựng tất cả các định nghĩa cho menu của ứng dụng, bao gồm Options Menu, Context Menu, hay Sub Menu.
– raw/: Thư mục dùng để chứa đựng các file mà bạn được phép định nghĩa nội dung tùy thích, không bị gò bó phải là XML hay Java code gì cả.
– values/: Thư mục này dùng để chứa đựng các file XML với các kiểu dữ liệu đơn giản, như string, integer, color. Chúng ta sẽ nói rõ hơn chút xíu về thư mục values/ này ở phần tiếp theo của bài học hôm nay.
– xml/: Thư mục này dùng để chứa đựng các file XML tùy ý, tuy tùy ý nhưng phải theo cấu trúc XML.

Vậy thôi đấy, có nhiều lắm không bạn. Bạn yên tâm chúng ta sẽ nói rất cụ thể về từng loại resource trong từng thư mục default resource này sau.

Và có một điều nên nhớ rằng, trong Android thư mục res/ chỉ chứa duy nhất một cấp thư mục con thôi. Do đó bạn không thể tạo một thư mục con như này được res/values/my_res/.

Thực Hành Tạo Default Resource Cho TourNote

Chào mừng các bạn quay lại ứng dụng TourNote.

Trước hết, hãy nhớ lại, bài trước bạn đã cho hiển thị dòng chữ “Bạn chưa có ghi chú nào cho mình, hãy tạo mới ghi chú từ hôm nay” lên màn hình. Bạn làm rất đúng, và ứng dụng chạy lên thiết bị ngon lành.

Nhưng… hãy nhìn lại activity_main.xml, có một số dấu hiệu cảnh báo bên trong editor này. Nếu ở tab Design, đảm bảo TextView ở giữa màn hình được chọn, bạn sẽ thấy icon hình biển báo màu vàng với dấu chấm than bên trong, click vào icon này bạn sẽ thấy nội dung cảnh báo được liệt kê ở một cửa sổ nhỏ bên dưới nó.

Hay ở tab Text, bạn cũng thấy vệt vàng xuất hiện ở bên phải text, đưa chuột vào đó bạn cũng nhìn thấy rõ nội dung cảnh báo.

Các vệt vàng xuất hiện trong editor chính là các vệt cảnh báo, nó cho bạn biết là bạn đã làm gì đó chưa được đúng đắn. Mặc dù nó không phải là các vệt lỗi được hiển thị bằng màu đỏ, nếu có vệt đỏ bạn sẽ không build app được mà phải sửa ngay.

Quay lại một chút với nội dung các vệt vàng này. Bạn đều thấy cả hai nói rằng bạn đang hardcode, dịch ra tiếng Việt là code cứng, hay có thể hiểu là “code chuối”. Bởi vì như bạn thấy đó, các resource trong Android được tách bạch rõ ràng vai trò theo các thư mục. Nghĩa là sao? Bạn xem, activity_main.xml là file nằm trong thư lục layout/, chính vì vậy nó sẽ chỉ chứa thông tin về giao diện mà thôi. Do đó, việc bạn để hẳn một chuỗi trong file layout đó là tạm được, nhưng sẽ bị cảnh báo rằng bạn đang code cứng.

Vậy bạn đã hiểu mình phải làm gì để xóa bỏ lời cảnh báo rồi phải không nào, bạn phải khai báo chuỗi ở nơi khác, và gọi đến chúng từ file layout này. Lợi ích của việc làm này từ từ bạn sẽ hiểu khi chúng ta qua bước kế tiếp trong bài này.

Ở bước tiếp theo này, mình muốn các bạn nên tổ chức rằng cách chuỗi nên để trong file strings.xml. Để có thể hiểu rõ hơn tại sao chuỗi lại để trong đây thì đến các bài học về từng loại resource mình sẽ trình bày cụ thể hơn. Để mở file chứa chuỗi này ra thì bạn tìm trong thư mục values/ như hình sau, rồi click đúp vào file đó.

Khi file này được mở ra, các bạn có thể thấy có ít nhất một string được khai báo sẵn.

https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2016/10/hinh6.png?resize=300%2C101&ssl=1 300w" data-lazy-loaded="1" sizes="(max-width: 485px) 100vw, 485px" loading="eager" style="box-sizing: border-box; height: auto; max-width: 100%; border-style: none; margin: 0px auto; clear: both; text-align: center;">

Cách thức khai báo một string cụ thể sẽ được mình nói rõ ở bài viết về resource loại này sau, còn bây giờ hãy thêm vào một dòng string mới.

Bạn chỉ cần lưu ý rằng String bạn vừa khai báo có tên là empty_note, nội dung của nó nằm trong cặp dấu nháy kép sau khi khai báo tên. Giờ bạn hãy quay lại file activity_main.xml và thay thế chỗ bị cảnh báo vạch vàng lúc nãy bằng một trong hai cách sau.

Nếu bạn thao tác với tab Design. Hãy đảm bảo TextView ở giữa màn hình được chọn. Tìm đến field text mà bài học trước bạn đã sửa chuỗi bằng cách gõ thủ công, rồi tìm đến dấu ba chấm (…) bên góc phải của field này.

Khi nhấn vào dấu ba chấm này, một cửa sổ nhỏ xuất hiện, nơi đây chứa đựng tất cả các resource dạng chuỗi có thể sử dụng được trong project của bạn. Bao gồm cả chuỗi có tên empty_note mà bạn vừa thêm vào ở bước trên. Bạn chỉ việc chọn đến chuỗi đó và nhấn OK thôi.

Khi này field text ở TextView đã có sự thay đổi. Thay vì nội dung “Bạn chưa có…” thì đã được thay thế bằng “@string/empty_note”. Nếu bạn chưa hiểu cách hiển thị chuỗi này như thế nào thì cũng đừng vội nản nhé, bài học sau chúng ta sẽ tìm hiểu kỹ. Lúc này đây bạn hãy nhìn lại editor của activity_main.xml xem sao. Icon cảnh báo đã biến mất, nhưng màn hình hiển thị trực quan giao diện vẫn như bài học trước.

Nếu bạn xem qua tab Text của cửa sổ này, bạn cũng sẽ thấy nội dung của code cũng thay đổi tương ứng, và cũng chẳng còn icon cảnh báo đâu nữa nhé.

Giờ đây bạn có thể thực thi lại chương trình để kiểm tra xem thao tác của bài học hôm nay có ảnh hưởng gì đến ứng dụng của bạn không nhé.

Alternative Resource

Alternative resource có thể dịch là resource có chọn lựa. Ngược với default resource là các resource mà bạn không cần quan tâm chúng hiển thị thế nào cho từng loại thiết bị. Thì alternative resource là các resource mà bạn chính là người phải chỉ định cho hệ thống biết khi nào nên dùng resource nào, tức là có sự chọn lựa resource theo ý bạn. Bạn hãy nhìn vào hình minh họa sau.

Hình minh họa trên có nghĩa là, giả sử bạn có một layout theo chuẩn alternative resource, khi đó bạn có thể chỉ định rõ cho hệ thống rằng nếu ứng dụng chạy trên phone (như hình bên trái) thì hãy hiển thị layout đó dạng list, còn nếu ứng dụng chạy trên tablet (hình bên phải) thì hãy hiển thị layout dạng table.

Vậy cách sử dụng alternative resource có khác với default resource hay không? Mời bạn xem tiếp bước sau.

Cách Sử Dụng Alternative Resource

Cách sử dụng alternative resource đơn giản không kém cách sử dụng default resource, mình chắc chắn đó. Bởi vì bạn vẫn dựa vào cách thức tổ chức thư mục theo dạng default resource, rồi bạn chỉ cần thêm một điều kiện vào cuối tên của mỗi thư mục đó để hệ thống biết khi nào nên load resource nào mà thôi.

Công thức cụ thể cho alternative resource như sau.

Trong đó default_resource là các thư mục con của res/ mà mình có nhắc đến ở trên như drawable/, layout/,… Còn config_qualifier chính là phần chỉ định cho hệ thống biết khi nào nên sử dụng resource nào. Hai thành phần này được ngăn cách nhau bởi dấu “-“.

Nhìn vào hình dưới đây, bạn sẽ thấy các thư mục được tô sáng chính là các thư mục alternative resource, vì chúng có chỉ định config_qualifier. Để biết rõ về các chỉ định config_qualifier này thì mời bạn đọc bài viết này để hiểu rõ hơn nhé..

Bạn hãy nhìn vào ví dụ các file ảnh ic_launcher.png được để vào trong các alternative resource như hình sau.

Khi đó giả sử ở một thiết bị nào đó, khi hệ thống muốn load ảnh ic_launcher.png này lên dùng, thì việc đầu tiên hệ thống sẽ phải xác định xem ic_launcher.png ở thư mục nào là thích hợp nhất cho thiết bị đó. Nếu hệ thống tìm thấy một thư mục thích hợp, ví dụ mipmap-xxxhdpi/ thì ic_launcher.png trong thư mục đó sẽ được load lên dùng. Còn nếu hệ thống không tìm thấy một thư mục thích hợp, nó sẽ tìm đến thư mục default resource, tức là tìm đến thư mục với tên mipmap/. Chính vì vậy bạn thường thấy có cả các default resource lẫn alternative resource được định nghĩa đồng thời trong cùng một ứng dụng.

Thực Hành Tạo Alternative Resource Cho TourNote

Bây giờ chúng ta sẽ nâng cấp resource string lúc nãy, sao cho app có thể hỗ trợ song ngữ Anh-Việt. Nếu thiết bị của user đang dùng là tiếng Việt, TourNote được khởi động cũng hiển thị tiếng Việt, ngược lại nếu thiết bị của user là tiếng Anh thì TourNote cũng tiếng Anh. Còn nếu thiết bị của user hiển thị ngôn ngữ khác với 2 ngôn ngữ mà bạn hỗ trợ, thì hiển thị mặc định là tiếng Anh.

Trước hết bạn cần phải tạo một alternative resource. Bạn hãy tạo một thư mục con của res/ với tên chính xác là values-vi/.

Chắc bạn cũng biết tại sao phải đặt tên như vậy, nhưng để chắc cú thì mình cũng xin nhắc lại. Chúng ta đã có sẵn một thư mục default resource có tên là values/, trong đó chúng ta chứa một file strings.xml, file này chứa đựng các text của ứng dụng, các text này vẫn chưa được đặt điều kiện config_qualifier do đó nó sẽ được đọc lên ở bất kỳ trường hợp nào của thiết bị. Giờ chúng ta thêm một thư mục có phần default_resource cũng là values, nhưng thêm vào config_qualifier là -vi ý muốn nói hệ thống hãy tìm đến thư mục alternative resource này ngay khi ngôn ngữ máy là vi (tiếng Việt). Còn nếu bạn nào muốn biết tại sao phải là -vi mà không phải -vn hay -vietname thì bạn nên biết là nó đều có quy tắc cả và mình nói hết tất tần tật quy tắc này ở đây rồi nhé.

Giờ đây mình tin chắc bạn đã hiểu rồi, vậy hãy tạo mới thư mục resource như đã nói bằng cách click chuột phải vào res/ chọn New > Directory và gõ vào values-vi.

Sau khi bạn tạo xong thư mục mới, bạn nên kiểm tra chắc chắn rằng thư mục mới đó phải nằm ở con của res/ và ngang cấp với values/ như hình sau nhé.

Nếu bạn tạo sai vị trí của values-vi/ hoặc đặt sai tên, bạn cứ nhấn chuột phải vào thư mục sai đó và chọn delete rồi tạo mới lại theo bước trên đây.

Giờ thì với thư mục value-vi/ mới được tạo, chưa có gì trong đó cả, bạn cần có một file string với nội dung là các text tiếng Việt, bạn có thể copy strings.xml có sẵn trong values/ qua cho tiện.

Để copy strings.xml bên values/, bạn vào thư mục này, click phải chuột vào strings.xml chọn Copy.

Rồi click chuột phải lại vào values-vi/ chọn Paste. Một dialog xuất hiện hỏi bạn có đổi tên không, bạn hãy nhấn OK mà không đổi tên gì cả, vì chúng ta mong muốn 2 tên file đều là strings.xml.

Bạn có nhận ra không. Hiện tại thì file strings.xml bên values/ đang sai vì chúng ta mong muốn thư mục này phải chứa resource default là tiếng Anh.

Vậy bạn hãy mở strings.xml bên values/ để chỉnh sửa thành tiếng Anh như sau.

Nên nhớ là name=”empty_note” là giống nhau ở cả 2 file string này.

Nào, giờ bạn thử vào settings của thiết bị (máy ảo Android hay máy thật mà bạn chuẩn bị run ứng dụng) chỉnh ngôn ngữ là tiếng Anh rồi run ứng dụng. Sau đó vào lại settings của thiết bị chỉnh ngôn ngữ thành tiếng Việt rồi run lại ứng dụng. Hình ảnh của 2 lần run như sau.

Nên nhớ là name=”empty_note” là giống nhau ở cả 2 file string này.

Nào, giờ bạn thử vào settings của thiết bị (máy ảo Android hay máy thật mà bạn chuẩn bị run ứng dụng) chỉnh ngôn ngữ là tiếng Anh rồi run ứng dụng. Sau đó vào lại settings của thiết bị chỉnh ngôn ngữ thành tiếng Việt rồi run lại ứng dụng. Hình ảnh của 2 lần run như sau.

Đi Sâu Vào Widget

Chắc bạn còn nhớ ở bài 7, bạn đã làm quen với việc tạo một giao diện khá cơ bản cho TourNote, khi đó bạn đã biết về mối tương quan giữa View và Widget. Bài học hôm nay sẽ giúp bạn hiểu rõ hơn, cũng như sẽ biết cách sử dụng tốt hơn vài widget cơ bản nhất trong lập trình Android. Sau bài học này thì mình cũng có viết một bài mở rộng, nơi đó mình nói về tất cả các widget còn lại mà bài học hôm nay chưa kịp nói đến.

Nào trước khi vào từng widget cụ thể, chúng ta hãy đi qua các khái niệm sau.

Khái Niệm Thuộc Tính (Attribute)

Các Thuộc Tính của một view được dùng để định nghĩa các biểu hiện của một view đó. Chẳng hạn như vị trí của chúng, độ rộng & chiều cao của chúng, màu sắc, nội dung,…

Các thuộc tính này được hiển thị trong cửa sổ Attribute khi bạn nhấn chọn vào View này trong editor ở chế độ Design. Hoặc được định nghĩa thông qua các câu lệnh XML. Ở bài 7 bạn có thực hành sơ qua việc sử dụng các thuộc tính này, cụ thể là thuộc tính text.

Một số ít trường hợp còn lại các thuộc tính sẽ được định nghĩa bằng Java code, nhằm phục vụ một số ý đồ thay đổi diện mạo cho view đó ở runtime.

Một ví dụ để bạn biết nơi tham khảo tất cả các thuộc tính XML của một view, bạn hãy vào link này, đây là ví dụ cho TextView. Khi đã mở link ra thì bạn hãy nhìn vào bảng “XML attributes”, bảng này sẽ liệt kê tất cả các thuộc tính bằng XML của TextView. Kéo xuống bảng ở dưới một tí là “Inherited XML attributes”, bảng này liệt kê tiếp tất cả các thuộc tính XML mà TextView đó kế thừa từ view gốc, nếu bạn chưa hiểu khái niệm kế thừa là gì thì bạn cứ nhớ rằng tất cả các thuộc tính XML của TextView này sẽ nằm ở cả 2 bảng vừa nhắc đến trên đây. Dựa vào các thuộc tính này của XML, bạn cũng sẽ dễ dàng suy ra các giá trị bên trong cửa sổ Attribute của tab Design thôi, vì tên của chúng khá giống nhau, bạn so sánh đi nhé. Hơn nữa, ở dưới trang mình đã đưa còn một bảng hữu dụng nữa là “Public methods”, bảng này chứa các thuộc tính mà bạn có thể gọi đến ở Java code cho các mục đích thay đổi runtime được nhắc đến ở trên.

Một Số Thuộc Tính Quan Trọng Của View

Phần này mình sẽ nói đến các thuộc tính quan trọng hoặc hay sử dụng thôi nhé. Vì bạn cũng biết đó, mỗi View có rất nhiều thuộc tính, việc của bạn là đến các link liên quan đến các View đó như link mình đưa ra ở mục trước, để tự tìm hiểu các thuộc tính liên quan của View.

View Nào Cũng Nên Có ID

Bạn thử nghĩ xem nếu bạn muốn tô màu cho một View, hay set text cho chúng, cách tốt nhất để có thể phân biệt xem View nào là View nào, là đặt cho chúng một ID rồi gọi chúng thông qua ID này. ID thực ra là một cái tên do bạn đặt cho các View hay ViewGroup. Tất nhiên cũng có View không cần bạn phải đặt một ID, vì chúng luôn luôn hiển thị với một trạng thái duy nhất trong suốt quá trình sống của ứng dụng, chúng không bị thay đổi, và không ảnh hưởng đến vị trí hiển thị của view nào khác cả.

Định Nghĩa ID Cho Một View

Để định nghĩa một ID cho View (hay ViewGroup), bạn có thể làm bằng một trong hai cách, tùy vào kiểu hiển thị Design hay Text đối với View đó.

Nếu như ở tab Design của editor chỉnh sửa giao diện. Để định nghĩa ID cho View, bạn hãy đảm bảo View bạn cần đặt ID được chọn trong màn hình trực quan thiết kế. Rồi tìm đến cửa sổ Attribute bên cạnh, và tìm field có tên ID. Field này chính là nơi bạn đặt ID cho View hay ViewGroup được chọn đó. Bạn xem hình sau sẽ rõ. Còn việc đặt ID theo tiêu chuẩn gì thì bạn có thể tham khảo cách đặt tên ID ở code XML mình nói ngay dưới hình sau.

Nếu bạn muốn thêm ID cho View hay ViewGroup ngay bên trong code của tab Text, thì bạn nên nhớ cú pháp để định nghĩa một ID là.

Trong đó.

– android:id – Thuộc tính này được dùng khi bạn muốn định nghĩa một ID cho View hay ViewGroup bằng code XML.

– @+id/  – Báo cho hệ thống biết bạn muốn tạo mới một ID. Nhớ là phải có dấu “+”.

– id_của_view  – Là tên bạn tự đặt (theo chuẩn đặt tên biến của Java, nếu bạn nào có nhu cầu có thể xem cách đặt tên biến ở bài học Java này).

Truy Xuất Đến ID Của Một View

Bạn vừa mới tạo một ID, nếu bạn muốn gọi đến view thông qua ID này thì có các trường hợp sau.

Trường hợp thứ nhất, nếu bạn dùng phương pháp kéo thả giao diện tab Design, thì bạn hầu như không cần quan tâm đến ID của các View. Vì sao. Vì bạn đã làm việc trực quan với giao diện của chúng rồi. Hệ thống sẽ tự động tìm kiếm và điền ID vào code XML cho bạn. Đến các bài thực hành kế tiếp bạn sẽ hiểu rõ vấn đề này. Nhưng cho dù cách thức lập trình giao diện này không hề liên quan đến ID, mình vẫn liệt kê ra đây, để cho bạn thấy rằng ID nó khá là quan trọng trong thiết kế giao diện.

Trường hợp thứ hai, nếu bạn thiết kế hay chỉnh sửa giao diện trong code XML, thì bạn sẽ đụng chạm nhiều đến ID hơi bị nhiều, khi đó bạn có thể dùng cú pháp sau để có thể gọi đến các ID của các View hay ViewGroup thông qua code XML này.

Trong đó.

– thuộc_tính_android – Một số thuộc tính của Android. Như bạn sẽ làm quen ở ngay dưới phần thực hành của bài học này, hay cụ thể hơn ở Bài 10, khi đó với layout có tên là ConstraintLayout sẽ bắt bạn phải chỉ định vị trí tương quan giữa các view, và vì vậy bạn sẽ gọi đến ID của view khác thông qua rất nhiều thuộc tính, như app:layout_constraintBottom_toTopOf, hay app:layout_constraintStart_toEndOf,… như code minh họa sau.

– @id/ – Khác với khi định nghĩa một ID mới, lúc đó bạn phải dùng dấu “+” phía sau ký tự “@”. Lần này truy xuất đến ID đã định nghĩa, bạn có thể bỏ dấu “+” đi và chỉ cần gọi @id/ mà thôi.

– id_của_view – Chính là ID mà bạn đã định nghĩa.

Trường hợp thứ ba nếu bạn gọi đến ID của View hay ViewGroup trong Java code, bạn phải truyền R.id.id_của_view vào một số hàm, ví dụ hàm này findViewByID(R.id.id_của_view);.

View Nào Cũng Cần Có Kích Cỡ

Kích cỡ ở đây là các định nghĩa về chiều ngang & dọc của view. Tương ứng với điều đó chúng ta có 2 thuộc tính liên quan đến xác định kích cỡ cho view, đó là layout_width và layout_height (lưu ý là bạn có thể không cần định nghĩa ID cho view, nhưng bạn buộc phải định nghĩa kích cỡ, nếu không thì hệ thống sẽ báo lỗi).

Do trong lập trình mobile, bạn sẽ không biết chính xác ứng dụng của bạn sẽ được chạy trên kích thước màn hình nào, có hàng ngàn kích thước màn hình khác nhau trên thị trường, do đó để chỉ định được kích cỡ của một view sao cho hoàn hảo khi ứng dụng được chạy lên là điều không dễ. Nhưng Android đã hỗ trợ bạn, không chỉ với việc chỉ định kích thước cụ thể, mà còn có thể có các chọn lựa khác nhau cho các kích thước động nữa, mời bạn làm quen trước với các khái niệm kích thước sau.

1. Bạn có thể chỉ định giá trị match_parent, với giá trị này thì view của bạn sẽ thoải mái bung ngang hay bung dọc sao cho có thể dàn hết không gian mà view cha của view đó cho phép. Ví dụ một view được set thuộc tính android:layout_width=”match_parent” sẽ có chiều ngang hết cỡ trong khoảng chiều ngang của view cha, và nếu thuộc tính android:layout_height=”match_parent” thì sẽ có chiều cao hết cỡ trong khoảng chiều cao của view cha.

2. Bạn có thể chỉ định giá trị match_constraint. Nếu view của bạn nằm trong một ConstraintLayout, thì sẽ không có kiểu match_parent như trên đâu, mà là match_constraint. Cơ bản thì kiểu khoảng cách này gần gần giống với match_parent quen thuộc ở các layout khác. Chỉ khác ở chỗ Match Constraint không “độc ác” đến nổi đẩy các view khác ra khỏi màn hình mà chiếm lấy hết không gian ở view cha. Nó vẫn chiếm không gian của view cha nhưng chiếm trong khả năng cho phép, tức là vẫn tuân thủ theo quy luật mà các constraint đã tạo, vẫn chừa không gian cho các view khác xuất hiện. Và khi bạn chỉ định kiểu khoảng cách là Match Constraint thì code XML của view sẽ mang giá trị là 0dp.

3. Bạn có thể chỉ định giá trị wrap_content, với chỉ định này thì view của bạn sẽ có kích thước co dãn sao cho đủ không gian cho các thành phần con bên trong nó.

4. Chỉ định kích cỡ cụ thể. Hai cách trên khá tốt, với màn hình khác nhau bạn cũng không sợ, vì bạn có thể chỉ định một view rộng hết màn hình, hay rộng trong khoảng thành phần con của nó thôi. Tuy nhiên còn 1 cách nữa là bạn có thể chỉ định độ lớn mong muốn theo một giá trị dp, ví dụ bạn set android:layout_width=”125dp” (hoặc 125dip cũng được, 2 ký hiệu viết tắt này đều là density independent, biểu thị một giá trị ảo dựa trên tỉ lệ điểm ảnh của màn hình, giá trị này sẽ được mình nói đến ở bài sau vì nó cũng khá dài dòng).

Để định nghĩa kích thước cho View (hay ViewGroup), bạn cũng có thể làm bằng một trong hai cách, tùy vào kiểu hiển thị Design hay Text đối với View đó.

Nếu như ở tab Design của editor chỉnh sửa giao diện, bạn hãy đảm bảo View bạn cần đặt ID được chọn trong màn hình trực quan thiết kế. Ở cửa sổ Attribute bên cạnh hãy tìm đến các field có tên layout_width và layout_height và set vào đó một trong các giá trị mà mình vừa trình bày trên kia. Bạn có thể tham khảo hình sau.

Có một lưu ý nữa là, với cửa sổ Attribute này, bạn còn có thể có một cách khác thú vị hơn nữa để thay đổi kích thước của View, bằng cách click vào một trong các nơi được mình tô đỏ như hình dưới đây.

Về ý nghĩa của các ký hiệu kích thước ở hình trên đây, thì mình mời các bạn xem qua một chút ở link này, mình không nhắc lại ở bài học này để tránh rườm rà nhé.

Còn nếu như bạn không muốn sử dụng tab Design như trên đây, mà muốn định nghĩa kích thước cho View hay ViewGroup ngay bên trong code của tab Text, thì bạn có thể để ý đến hai thuộc tính sau.

Xây Dựng Một Số Widget Cho Tour Note

Nào giờ chúng ta sẽ thực hành thực tế việc chỉnh sửa các thuộc tính cho các View sẽ như thế nào nhé.

TextView – Nơi Hiển Thị Các Label

Lại nhắc đến bài số 7, khi đó bạn đã tạo một TextView bên trong file activity_main.xml rồi, với TextView này bạn đã biết công dụng của nó là hiển thị thông báo đến người dùng khi không có ghi chú nào trong ứng dụng được tạo. Đúng vậy, TextView chính là một label, widget này chuyên dùng để hiển thị các đoạn text mang tính thông báo mà người dùng không thể chỉnh sửa được.

Các Thuộc Tính Thường Dùng Của TextView

Ngoài các thuộc tính chung được nói ở mục trên kia, TextView còn có các thuộc tính thường dùng của riêng nó như sau.

– android:gravity – Dùng để canh chỉnh text của nó sao cho canh trái, phải, giữa,… so với không gian của chính nó. Ở bài học số 7 bạn đã thử canh chỉnh thuộc tính gravity này rồi.

– android:text – Bạn đã dùng đến thuộc tính này để set text cho TextView ở bài trước rồi đúng không nào.

– android:textColor – Hiển thị màu cho text, bài thực hành hiển thị màu sẽ được mình nói đến ở bài viết đi sâu hơn về resource.

– android:textSize – Kích cỡ của text, kích cỡ này được tính theo đơn vị sp. Định nghĩa và cách sử dụng đơn vị này sẽ được nói đến ở bài khác, cùng với các định nghĩa về dp và dip được nhắc đến ở trên.

– android:textAllCaps – Dùng để in hoa hết tất cả các ký tự của text nếu giá trị thuộc tính này là true.

– android:padding – Set khoảng cách giữa biên của view đến các thành phần con của nó. Đơn vị tính của thuộc tính này cũng là dp hoặc dip. Nếu bạn muốn khoảng cách riêng cho từng cạnh biên có thể dùng tách biệt từng thuộc tính cụ thể của padding như android:paddingTop, android:paddingBottom, android:paddingLeft và android:paddingRight.

– android:margin – Set khoảng cách giữa biên của view đến các thành phần bên ngoài của nó. Nếu như padding trên kia giúp cho các thành phần con cách xa cạnh biên của view ra, thì margin lại giúp các thành phần bên ngoài tránh xa cạnh biên của view. Bạn nên phân biệt hai giá trị này. Đơn vị tính của thuộc tính này cũng là dp hoặc dip. Tương tự bạn có thể set android:marginTop, android:marginBottom, android:marginLeft và android:marginRight đối với từng cạnh của view.

– android:ellipsize – Dùng thuộc tính này khi bạn muốn text của mình sẽ bị cắt và hiển thị “…” khi không đủ không gian để chứa hết text đó.

– android:background – Dùng để set màu nền hoặc ảnh nền cho View.

Thực Hành Hoàn Thiện Các Thuộc Tính Cho TextView Của TourNote

Bây giờ các bạn hãy mở lại project TourNote lên, chúng ta tiến hành chỉnh sửa lại TextView ở bài trước cho đúng đắn và chuyên nghiệp hơn.

Bạn mở lại file activity_main.xml ra, hãy để giao diện này đang ở tab Design, và đảm bảo TextView ở giữa màn hình được chọn, chúng ta sẽ thêm các thuộc tính sau vào trong TextView.

Trước hết, hãy thêm vào TextView này một ID và các kích thước, bạn hãy thêm vào các thông tin như hình sau rồi mình giải thích nhé.

– ID – Bạn đặt ID cho TextView này là activity_main_tv_empty, sở dĩ mình đặt dài dòng như vậy là vì muốn đảm bảo ID này không bị trùng trong ứng dụng của chúng ta, để làm vậy thì chúng ta nên đặt có đủ 3 thành tố sau: tên_file_xml + viết_tắt_của_widget + tên_widget. Theo đó thì tên file xml là activity_main, viết tắt của TextView là tv, và tên của TextView này thông báo không có ghi chú nên đặt là empty. Cộng lại chúng ta có ID như trên.

– layout_width – Được set là match_constraint, như mình có nói ở mục trên, tức là chiều rộng sẽ là maximum so với chiều rộng của view cha.

– layout_height – Được set là wrap_content, mình cũng đã nói rõ, tức chiều cao sẽ tùy theo số dòng của text.

Ngoài ID và kích thước ra, mình còn muốn các bạn chỉ định margin cho TextView này nữa. margin là gì thì mình có nói ở mục trên rồi nhé. Để chỉnh sửa các thuộc tính này, thì bạn vẫn cứ hãy ở tab Design, và đảm bảo TextView ở giữa màn hình được chọn, rồi thêm các chỉnh sửa như hình sau vào trong TextView.

Chỉ cần nhấn chọn vào hình tam giác bên phải mỗi số thôi là bạn có sẵn các chọn lựa cho các giá trị này. Bạn có thể tự đưa ra cho View một con số bất kỳ nào đó khác cũng được. Và sau khi bạn chỉ định một số, đơn vị của nó sẽ là dp. Bạn hãy so sánh giao diện trực quan giữa trước và sau khi set margin cho View nhé, bạn sẽ hiểu margin là gì thông qua việc so sánh này thôi.

Bước tiếp theo của bài thực hành này, mình muốn các bạn chỉnh sửa kích cỡ của text trong TextView. Để chỉnh sửa các thuộc tính này, thì bạn vẫn cứ hãy ở tab Design, và đảm bảo TextView ở giữa màn hình được chọn, rồi thêm kích cỡ text như hình sau vào trong TextView.

Bạn có thể thấy rằng, với kích thước text, bạn nên định nghĩa cho nó một độ lớn kèm theo giá trị là sp. Về cơ bản dp cũng như sp thôi, nhưng chúng có một chút khác biệt nhau. Việc bây giờ bạn cần biết rằng bạn nên sử dụng thông số sp cho kích cỡ text, hay còn gọi là font size, còn dp dành cho các kích cỡ về các kích thước của View. Tại sao có sự khác biệt này thì chúng ta sẽ tìm hiểu ở bài khác nhé.

Giờ thì mình muốn bạn chuyển cửa sổ thiết kế của activity_main.xml này sang tab Text, để xem các giá trị mới được thêm vào cho code XML của chúng ta như thế nào nhé. Mình liệt kê thay đổi đó bằng các dòng code được tô sáng sau.

Bạn thấy làm việc với giao diện của Android có dễ không nào. Tất cả chỉ là canh chỉnh các giá trị của chúng thôi. Tuy nhiên làm việc hoài với TextView cũng chán, phần sau đây mình mời các bạn cùng thử vọc với việc hiển thị ảnh Bitmap lên ứng dụng xem sao nhé.

Ảnh (Image) Sẽ Giúp Ứng Dụng Trông Pro Hơn

TextView không thôi vẫn chưa đủ mạnh (strong), người dùng sẽ bỏ qua câu thông báo của bạn ngay (ví dụ như trong trường hợp này của ứng dụng TourNote), bạn cần phải có một ảnh làm cho ứng dụng thêm đẹp hơn và người dùng chú ý nhiều hơn tới câu thông báo. Ngoài ra trong hầu hết các ứng dụng khác của Android sau này, bạn sẽ cần dùng đến rất nhiều ảnh, do đó mình xin nói đến cách sử dụng ảnh rất sớm từ bài này.

Có 2 widget giúp hiển thị ảnh trong Android, đó là ImageView và ImageButton. Bài hôm nay chỉ nói về ImageView thôi, trong khi ImageButton là con của ImageView nên cũng có các thuộc tính tương tự ImageView. Tất cả các widget đã được mình tổng hợp lại trong bài Tìm Hiểu Các Widget Cơ Bản, các bạn vào xem nhé.

Các Thuộc Tính Thường Dùng Của ImageView

Tương tự như TextView, ImageView cũng có các thuộc tính quan trọng của riêng nó như sau.

– android:src – Hiển thị ảnh theo dạng content, ảnh này sẽ nằm đè lên trên ảnh background nói đến ở dưới đây.

– android:background – Thuộc tính này dùng để set màu nền hoặc ảnh nền cho view.

– android:scaleTyle – Cho biết tỉ lệ co dãn hoặc vị trí của ảnh so với khung của view, các giá trị của thuộc tính này sẽ được nói kỹ sau bài thực hành dưới đây.

– android:padding – Tương tự padding của TextView ở trên. Tuy nhiên padding sẽ làm ảnh hưởng đến không gian hiển thị của src, với background thì “miễn nhiễm” với thuộc tính này.

Thực Hành Thêm ImageView Cho TourNote

Trước hết bạn hãy nhấn vào đây để download resource.

Resource bạn vừa down về chứa đựng nhiều thư mục (drawable-mdpi/, drawable-hdpi/, drawable-xhdpi/, drawable-xxhdpi/ và drawable-xxxhdpi/), bạn giải nén và copy các thư mục này vào thư mục res/ của project TourNote, trong các thư mục đều chứa một ảnh có tên giống nhau là empty_note.png. Bạn biết tại sao ảnh này lại để trong các thư mục này đúng không nào, đó là cách bạn xác định ảnh cho alternative resource (bạn có thể xem bài 8 nếu chưa biết về alternative resource), để khi load lên, độ phân giải của ảnh sẽ được hiển thị chính xác nhất theo tỉ lệ mình hàn hình trên thị trường.

Bạn phải đảm bảo rằng sau khi giải nén và copy các thư mục chứa ảnh vào trong thư mục res/ của project, thì chúng phải hiển thị như hình sau trong ứng dụng, nếu không bạn có thể xóa các thư mục vừa tạo để copy lại, hoặc download source code mẫu theo đường link cuối bài học để check xem thế nào nhé.

Sau khi đã copy các ảnh như trên rồi chúng ta tiến hành chỉnh sửa thêm cho giao diện activity_main.xml như sau. Bạn đảm bảo file activity_main.xml đang mở, và tab Design đang được chọn. Ở cửa sổ Palette phía trên bên trái editor này, bạn hãy tìm đến thành phần ImageView. Nắm và kéo thành phần này vào màn hình trực quan thiết kế, bạn hãy thả thành phần ImageView này ra khi thấy rằng nó nằm đâu đó ở dưới TextView như hình sau (chú ý là bạn cũng đừng quan trọng quá ImageView sẽ nằm dưới TextView bao xa, chúng ta chỉ cần đảm bảo nó nằm dưới, thế thôi, việc còn lại sẽ chỉnh sửa sau).

Sau khi thả chuột ra sau quá trình kéo thả, một cửa sổ mới mở lên, cửa sổ này buộc phải chọn ảnh để hiển thị vào trong ImageView này. Bạn hãy đảm bảo Drawable ở bên trái cửa sổ được chọn, tùy chọn này cho hệ thống biết sẽ tìm ảnh trong thư mục res/drawable. Sau đó nhấn chọn vào Project, tùy chọn này ý muốn chúng ta tìm đến ảnh trong project của chúng ta, và sau cùng là chọn vào empty_note, chính là ảnh bạn vừa để vào thư mục của project ở bước trên đây.

Sau khi chọn xong ảnh, thì bạn nhấn OK. Bạn sẽ thấy ảnh hiện ra sẽ đâu đó như thế này.

Nếu chú ý đến field srcCompat bạn sẽ thấy nội dung của nó là @drawable/empty_note. Giá trị này cũng giống với cấu trúc giá trị text của TextView đúng không nào. Đừng quá lo lắng nếu như ảnh không hiển thị canh giữa vào màn hình nhé. Chúng ta cùng đến bước tiếp theo để canh chỉnh ImageView này cho nó đẹp hơn.

Để có thể hiểu được sự canh chỉnh các giá trị bên trong một ConstraintLayout như thế nào thì mình mời các bạn hãy bỏ thời gian đọc qua loạt bài về ConstraintLayout của mình nhé. Với bài thực hành hôm nay, nếu bạn chưa có nhu cầu muốn hiểu tường tận về ConstraintLayout thì cũng có thể thử các bước sau.

Mình giải nghĩa một chút các ý đồ của các bước trên đây của mình.

– Đảm bảo điểm neo bên trên của ImageView chính là TextView, điểm neo bên trái là biên trái màn hình, và điểm neo bên phải là biên phải màn hình. Vì ConstraintLayout buộc các View phải có từ 2 điểm neo trở lên, và việc neo các view với nhau này sẽ giúp ConstraintLayout xác định được các View sẽ được vẽ ở đâu với kích thước và khoảng cách như thế nào.

– layout_width và layout_height của ImageView đều mang giá trị 60dp.

– Đảm bảo các giá trị margin đều là 8dp.

– scaleType được set là fitCenter, chúng ta sẽ tìm hiểu các kiểu co dãn ảnh ở mục sau đây.

Chúng ta lại chuyển cửa sổ thiết kế của activity_main.xml này sang tab Text, để xem các giá trị mới được thêm vào cho code XML của chúng ta như thế nào. Mình liệt kê thay đổi đó bằng các dòng code được tô sáng sau.

Giờ bạn có thể thử run project lên để xem thành quả được rồi đấy.

Các Dạng Scale Của Ảnh

Bước thực hành trên đây chúng ta vừa làm quen với một dạng scale, đó là android:scaletype=”fitCenter”, các dạng scale này chính là do widget ImageView này hỗ trợ, nó giúp bạn có được các tùy chỉnh thú vị hơn khi sử dụng đến ảnh.

Chúng ta cùng xem qua các dạng scale có thể có của một ImageView nhé.

Giả sử mình dùng ảnh có hình con robot như sau ( bạn chú ý khung màu xanh dương là khung giới hạn của ImageView để xem chúng “biến hóa” như thế nào trong khung giới hạn).

fitCenter

Nếu sử dụng giá trị này cho scaleType, ảnh sẽ tự động scale sao cho hiển thị gọn bên trong khung mà tỉ lệ của ảnh vẫn không thay đổi.

fitXY

Giá trị này làm ảnh bị scale sao cho hiển thị gọn bên trong khung, nhưng khác fitCenter ở chỗ fitXY làm cho ảnh bị biến dạng không còn tỉ lệ gốc nữa.

fitStart

Cách scale này giống với fitCenter là sẽ đảm bảo ảnh nằm gọn trong khung mà tỉ lệ ảnh không đổi, nhưng thay vì ảnh nằm giữa khung thì nó bị neo góc trên bên trái khung.

fitEnd

Tương tự như fitStart, nhưng góc neo của ảnh lại là góc dưới bên phải khung.

centerCrop

Giá trị này làm ảnh sẽ bị scale đến khi một chiều ngắn nhất của ảnh nằm gọn trong khung, chiều còn lại bị cắt sao cho tỉ lệ của ảnh không bị đổi. Trường hợp dưới đây cho thấy chiều dọc của ảnh sẽ nhìn thấy gọn trong khung, trong khi chiều dài bị cắt.

center

Giá trị này không làm scale ảnh, nó chỉ có nhiệm vụ hiển thị ảnh đúng với kích cỡ của nó vào giữa khung mà thôi.

Nói như vậy có nghĩa là nếu như khung nhỏ hơn kích thước ảnh, ảnh sẽ bị cắt đi như hình sau.

centerInside

Cách scale này cũng giống như center, tức là nó cũng sẽ giữ kích thước gốc của ảnh, nhưng nếu khung vẫn còn nhỏ hơn kích thước ảnh, lúc này ảnh sẽ tự scale xuống mà vẫn giữ tỉ lệ của nó.

matrix

Dùng khi bạn muốn scale ảnh và xoay ảnh dạng Matrix, bạn có thể search thêm cách scale hay xoay ảnh dạng Matrix trên mạng, hoặc mình sẽ viết cách sử dụng Matrix ở một bài khác.

Bạn vừa cùng mình thực hành 2 cách sử dụng widget là TextView và ImageView, hãy đọc Tìm Hiểu Các Widget Cơ Bản để biết cách sử dụng các widget cơ bản còn lại bạn nhé

Đi Sâu Vào Layout

Mình nhắc lại một chút về kiến thức ở bài học cũ. Ở Bài 7, chúng ta đã nói đến khái niệm ViewGroup, hiển nhiên như tên gọi của nó, ViewGroup dùng để chứa đựng các View hay các ViewGroup khác. Hôm nay chúng ta cùng nhau nói về các thể hiện cụ thể của ViewGroup, đó chính là các Layout.

Mình cũng xin nhắc lại một tí, đó là:

– Từ View chúng ta xây dựng nên các Widget.
– Từ ViewGroup chúng ta xây dựng nên các Layout.

Có thể nói layout mạnh mẽ nhất, thông dụng và hiệu quả nhất bây giờ chỉ có thể là ConstraintLayout. Nhưng bài này mình sẽ không nói về ConstraintLayout. Vì kiến thức của nó khá nhiều và mình đã dành hẳn 2 bài để nói về nó, bạn có thể bắt đầu tìm hiểu ở link này. Bạn nên đọc qua ConstraintLayout sau khi đọc bài viết hôm nay. Ngoài ConstraintLayout ra thì mình cũng dành hẳn một bài viết khác để nói về các layout phổ biến còn lại như FrameLayout, TableLayout,… các bạn có thể xem tại đây.

Nhắc lại rằng, bài học này chúng ta cùng nhau tìm hiểu hai layout cơ bản, đó là LinearLayout và RelativeLayout. Tuy độ hot của 2 layout này không thể sánh với ConstraintLayout được. Nhưng LinearLayout và RelativeLayout được mình đánh giá là 2 layout cơ bản, chúng tạo nền tảng cho sự ra đời của ConstraintLayout. Bạn có thể xây dựng một giao diện khởi đầu với ConstraintLayout, nhưng rồi đâu đó, bạn cũng sẽ cần đến LinearLayout hoặc RelativeLayout hoặc sự kết hợp của cả hai, chúng lồng vào bên trong ConstraintLayout của bạn. Việc kết hợp này giúp bạn giải quyết các giao diện hóc búa. Hoặc nó đơn giản chỉ là bạn đang tận dụng lại giao diện của một ai đó mà họ không đang sử dụng ConstraintLayout như bạn.

Chúng ta bắt đầu kiến thức về Layout với các khái niệm “mở màn” như sau.

Nói Đến Layout Phải Nói Đến RTL Hay LTR

Bạn biết không, hầu hết các ngôn ngữ trên trái đất này đều có cách viết từ trái sang phải, chúng ta cũng vậy vì tiếng Việt cũng theo cách viết này. Cách viết từ trái sang phải như vậy được gọi là LTR (left-to-right).

Một số ít ngôn ngữ còn lại, như mình biết có ngôn ngữ Ả Rập (Arabic) có cách viết từ phải sang trái, cách viết này được gọi là RTL (right-to-left). Nhớ lại ngày xưa khi còn làm game J2ME, mình đã phải xây dựng thuật toán để hiển thị text (bằng image) cho các game với ngôn ngữ Ả Rập, tuy khó nhưng thú vị lắm các bạn. Bây giờ thì chúng ta đã được Android hỗ trợ rồi nên các bạn yên tâm sẽ không cần phải biết ngôn ngữ Ả Rập là gì đâu nhé.

Tại sao mục này lại nói đến các ngôn ngữ LTR hay RTL? Bạn cũng biết Layout là các ViewGroup dùng để sắp xếp các View hay ViewGroup khác vào bên trong nó, và vì vậy các Layout này cũng sẽ chịu ảnh hưởng nhiều từ các hệ ngôn ngữ LTR hay RTL. Mình ví dụ với LinearLayout bạn sắp làm quen, sẽ có cách sắp xếp các thành phần con của nó bắt đầu từ bên trái hay bên phải là tùy vào hệ ngôn ngữ này. Hoặc hầu hết các Layout đều có điểm neo mặc định ban đầu cho thành phần con là trên-trái (top-left) hay trên-phải (top-right) cũng là tùy vào hệ ngôn ngữ này.

Thêm một ý nữa, nếu như các bài trước bạn có làm quen với các thuộc tính android:paddingLeft hay android:paddingRight hay bất kỳ các thuộc tính nào có các từ “Left“ và “Right“ thì bạn có thể thay thế chúng bằng “Start“ và “End“ nếu bạn muốn hỗ trợ cho các ngôn ngữ LTR và RTL. Chẳng hạn android:paddingStart hay android:paddingEnd. Bạn có thể hiểu nếu Left và Right dùng để chỉ định cứng bên phía nào, thì Start và End sẽ động hơn. Cụ thể, với ngôn ngữ LTR, Start sẽ chỉ định phía bắt đầu, tức là phía trái. Còn với ngôn ngữ RTL, Start sẽ chỉ định là bên phải.

Nói Về Các Thuộc Tính Của Layout

Nếu như bạn đã đọc qua Bài 9 và đã biết về Khái Niệm Thuộc Tính là dùng để khai báo các biểu hiện của một widget. Và bạn cũng biết Một Số Thuộc Tính Quan Trọng bao gồm ID, layout_width, layout_height. Thì với bài hôm nay khi làm quen với layout, các khái niệm và các thuộc tính quan trọng này vẫn được áp dụng một cách trọn vẹn, không có khác biệt gì cả.

Các mục phía dưới đây sẽ hướng dẫn bạn cách sử dụng thêm các thuộc tính chuyên biệt cho từng loại layout cụ thể. Chúng ta sẽ bắt đầu với LinearLayout.

LinearLayout – Sắp Xếp Các View Nằm Cạnh Nhau

LinearLayout thường được mình mô tả cho dễ hiểu là “xếp cá mòi vào hộp”, bạn sẽ không được phép xếp con này chồng lên con kia, mà chỉ được xếp con này cạnh con kia mà thôi. Bạn có thể chỉ định việc xếp các con cá nằm cạnh nhau theo một chiều ngang, hoặc một chiều dọc.

Các Thuộc Tính Thường Dùng Của LinearLayout

Ngoài các thuộc tính dùng như widget được liệt kê ở mục trên đây, thì LinearLayout còn có các thuộc tính riêng để chỉ định việc sắp xếp “cá mòi” vào trong nó như thế nào.

Vậy mình tổng hợp lại bạn cần quan tâm đến các thuộc tính sau:

– Hướng “xếp cá” (orientation).
– Trọng số (weight).
– Một thuộc tính dịch ra tiếng Việt hơi chuối đó là lực hấp dẫn (gravity).
– Ngoài ra còn có một điều không phải là thuộc tính nhưng cũng được liệt kê trong đây, đó là việc phân bổ không gian cho view con (fill).

Chúng ta cùng làm quen với từng thuộc tính quan trọng này sau đây.

Thuộc Tính Hướng (Orientation)

Như mình đã nói, LinearLayout chỉ xếp các thành phần con nằm cạnh nhau theo một trong hai hướng là ngang hay dọc. Thuộc tính XML android:orientation sẽ giúp bạn định nghĩa được điều đó, tham số của thuộc tính này sẽ là một trong hai giá trị.

– android:orientation=”horizontal” – Giúp xếp các thành phần con nằm cạnh nhau theo phương ngang.
– android:orientation=”vertical” – Giúp xếp vác thành phần con nằm cạnh nhau theo phương dọc.

Tương tự, nếu muốn dùng thuộc tính hướng cho Java code bạn có thể dùng hàm setOrientation() với tham số truyền vào là một hằng số LinearLayout.HORIZONTAL hoặc LinearLayout.VERTICAL.

Phân Bổ Không Gian Cho View Con (Fill)

Như được nói trước, đây không phải một thuộc tính, nó là một nguyên tắc của LinearLayout. Bạn hãy thử tưởng tượng như vầy, bạn có một LinearLayout mà bên trong nó có 3 view con (view ở đây nói chung là View hoặc ViewGroup) được xếp theo nguyên tắc horizontal, tức xếp lớp theo chiều ngang. Giả sử có một view con có thuộc tính android:layout_width=”match_parent”, tức là view con này có chiều rộng hết LinearLayout cha luôn rồi, thì các view còn lại sẽ hiển thị như thế nào?

Câu trả lời là LinearLayout sẽ dành không gian cho con kiểu “ưu tiên con cả trước”, tức là anh nào được đưa vào trước sẽ được ưu tiên không gian trước, anh nào vào sau sẽ… ra khỏi màn hình mà nằm nếu không đủ chỗ, tức là người dùng sẽ không thấy anh này đâu cả.

Bạn thấy như hình ví dụ sau, mình cố tình thiết lập cho cả 3 view con đều dành không gian rộng 200dp, như vậy ắt sẽ có view phải ra khỏi màn hình, đó là view có background màu xanh dương.

Thuộc Tính Trọng Số (Weight)

Sau khi xem ví dụ trên đây về việc phân bổ không gian cho view con, ắt hẳn bạn hơi bị thắc mắc, câu hỏi bạn đặt ra bấy giờ là liệu có cách nào đó, với một sự phân chia hợp lý hơn, sao cho tất cả các view con đều có thể hiển thị được trên màn hình?

Chà khó quá… nhưng thật dễ dàng đối với LinearLayout, Google đã tính trước câu hỏi của bạn nên mới ra khái niệm weight.

Nói một cách đầy đủ, weight sẽ giúp bạn thiết lập trọng số cho các view con để sử dụng phần không gian trống còn lại của một LinearLayout, với mỗi trọng số khác 0, phần không gian trống còn lại của LinearLayout sẽ được chia ra cho các view con theo trọng số đó. Để sử dụng trọng số weight, bạn không cần dùng đến layout_width hay layout_height cho view con tương ứng nữa, chúng ta xem qua cách sử dụng weight như sau trước khi xem ví dụ bên dưới.

– Với LinearLayout có orientation là horizontal, bạn nên set android:layout_width của view con về 0dp. Với LinearLayout có orientation là vertical, bạn set android:layout_height của view con về 0dp.
– Khai báo android:layout_weight cho view con đó và cho nó một con số (số nguyên hay số thực đều được, và không kèm theo dp hay dip vào giá trị này).

Bạn có thể xem ví dụ ở hình dưới, mình đã sửa lại bằng cách khai báo weight cho các view con lần lượt là 2-1-1. Khi đó view đầu tiên sẽ có chiều rộng sao cho bằng 2 lần các view còn lại.

Để bạn dễ hiểu hơn, mình tiếp tục thử nghiệm bằng cách đổi lại weight cho chúng lần lượt là 2-3-1. Bạn sẽ thấy view màu đỏ với weight là 2 sẽ chiếm không gian rộng gấp 2 lần so với view xanh dương với weight là 1. Tương tự, view màu xanh lá với weight là 3 sẽ rộng gấp 3 lần so với view xanh dương với weight là 1. Bạn hiểu độ tương quan của các trọng số weight chưa nào?

Với cách set trọng số weight như trên thì dù cho LinearLayout có không gian như thế nào thì view con cũng sẽ tìm cách lấp đầy không gian trống đó. Nhưng nếu bạn muốn chừa không gian trống cho mục đích nào đó, bạn có thể thiết lập một giá trị android:weightSum cho LinearLayout rồi set weight cho các view con của nó sao cho tổng giá trị weight nhỏ hơn weightSum như hình bên dưới đây.

Như hình thì bạn thấy mình set giá trị weightSum cho LinearLayout là 8, mà tổng weight của các view con chỉ là 6 thôi, như vậy sẽ còn dư 2 weight không có con nào được fill vào, nên nó mới trống như vậy.

Thuộc Tính Lực Hấp Dẫn (Gravity)

Chắc bạn còn nhớ ở bài trước, bài về widget, cũng có dùng đến thuộc tính android:gravity này. LinearLayout của bài hôm nay cũng sử dụng thuộc tính này giống như vậy để canh chỉnh cho các thành phần con của mình.

Mặc định thì các thành phần con bên trong LinearLayout sẽ được “hút” về start-top theo “lực hấp dẫn” mặc định (như đã nói ở trên, start sẽ là left hay right là tùy vào ngôn ngữ LTR hay RTL).

Ví dụ sau mình set android:gravity=”bottom” sẽ làm các view con bị hút (neo) hết xuống dưới so với layout cha.

Bạn cứ từ từ làm quen hết tất cả các giá trị gravity này. Bạn cũng có thể kết hợp nhiều giá trị gravity vào cùng một khai báo thuộc tính bằng cách thêm vào ký tự “|” như này android:gravity=”right|bottom”.

Các Thuộc Tính Thêm Vào Cho View Con

Một điều thú vị là khi các View (hay ViewGroup) khác nằm bên trong một LinearLayout, chúng sẽ có thêm một vài thuộc tính, chủ yếu là canh chỉnh vị trí của bản thân nó so với không gian của layout cha.

Với LinearLayout thì chúng ta chỉ cần quan tâm đến 2 thuộc tính được thêm vào thành phần con, trong đó có thuộc tính weight đã được nói trước ở trên, thuộc tính còn lại như sau.

– android:layout_gravity – Không cần giải thích dài dòng, thuộc tính này dùng chính xác như android:gravity của LinearLayout được nói ngay trên đây. Nếu như android:gravity ở LinearLayout sẽ áp dụng lực hút (hay còn gọi là điểm neo) cho tất cả các con của nó, thì android:layout_gravity dùng cho mỗi thành phần con sẽ có tác dụng neo cho chính thành phần con này mà thôi. Bạn nhớ là tên thuộc tính hơi khác nhau chút, layout_gravity và gravity nhé.

Thực Hành Xây Dựng Màn Hình Empty Của TourNote Bằng LinearLayout

Sau khi thực hành qua các bài trước, giao diện đầu tiên khi mở TourNote ra sẽ trông như thế này.

Giờ thì bạn hãy quên đi layout nào đang chứa TextView và ImageView mà bạn đã thêm vào trước đó. Nhiệm vụ của bài thực hành này là sử dụng LinearLayout để bao lấy 2 widget này, sao cho chúng vẫn hiển thị đúng như thiết kế ban đầu.

Lưu ý là bài thực hành này chỉ là vọc chơi cho biết LinearLayout thôi nhé. Mong muốn của bài thực hành này là làm sao có thể sử dụng một layout khác, cụ thể là LinearLayout mà vẫn xây dựng được một giao diện như với ConstraintLayout. Kết thúc bài học hôm nay bạn nên trả lại giao diện của TourNote về lại ConstraintLayout như những gì bài học trước đạt được. Và cũng vì lý do vọc chơi thôi nên mình cũng không đẩy source code của bài hôm nay lên Github đâu nhé. Mặc dù chúng ta không công nhận những chỉnh sửa về mặt UI của bài hôm nay, nhưng mình vẫn mong muốn các bạn hãy cứ mở TourNote lên và thực hành đầy đủ. Các layout của bài hôm nay khá quan trọng. Trừ khi các bạn đã biết đến LinearLayout và RelativeLayout là gì rồi thì có thể bỏ qua.

Để bắt đầu, bạn hãy mở file activity_main.xml ra. Trước tiên chúng ta hãy chuyển đổi từ ConstraintLayout sang LinearLayout. Nhớ là chuyển đổi chứ không phải là thêm một LinearLayout vào dưới ConstraintLayout có sẵn đâu nhé. Nhiều bạn không lưu ý chỗ này khi báo cả 2 layout ngang cấp như vậy dẫn đến trình biên dịch báo lỗi đấy.

Để chuyển đổi các layout như thế này thì bạn có 2 cách. Nếu bạn đang ở tab Text của màn hình thiết kế, thì bạn chỉ việc thay đổi khai báo tên thẻ android.support.constraint.ConstraintLayout thành LinearLayout thôi. Đại loại như sau.

https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2016/11/Hinh1.png?resize=286%2C300&ssl=1 286w" data-lazy-loaded="1" sizes="(max-width: 650px) 100vw, 650px" loading="eager" style="box-sizing: border-box; height: auto; max-width: 100%; border-style: none; margin: 0px auto; clear: both; text-align: center;">

Tất nhiên bước chuyển đổi tạm như vậy sẽ phát sinh lỗi. Bởi vì bạn nên biết rằng, mỗi một layout sẽ có một cách sắp xếp các thành phần con khác nhau. Và mỗi một view con nằm trong một layout cũng có cách tự canh chỉnh nó khác với khi nằm ở layout khác nữa. Nên việc bạn chuyển một layout này sang layout khác đã làm xáo trộn đi sự canh chỉnh này. Nhưng hãy tạm bỏ qua lỗi đi nhé, chúng ta sẽ canh chỉnh thuộc tính của chúng sau. Giờ chúng ta hãy xem cách chuyển đổi khác từ ConstraintLayout sang LinearLayout nào.

Cách chuyển đổi thứ hai là nếu bạn ở tab Design của màn hình thiết kế, thì bạn hãy tìm đến cửa sổ nhỏ có tên Component Tree. Như hình dưới đây.

https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2016/11/Hinh2-1.png?resize=300%2C209&ssl=1 300w, https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2016/11/Hinh2-1.png?resize=768%2C536&ssl=1 768w" data-lazy-loaded="1" sizes="(max-width: 993px) 100vw, 993px" loading="eager" style="box-sizing: border-box; height: auto; max-width: 100%; border-style: none; margin: 0px auto; clear: both; text-align: center;">

Nơi đây chính là nơi hiển thị cách tổ chức layout của bạn. Nó sẽ liệt kê theo dạng cây (tree) các widget hay layout của ứng dụng, theo đúng như những gì mà mình có mô tả về cây này ở mục này đấy nhé. Với cây này thì bạn có thể thấy layout gốc chính là ConstraintLayout. Để chuyển đổi layout gốc này về LinearLayout, bạn hãy click chuột phải vào nó và chọn chức năng Convert view… (như hình).

https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2016/11/Hinh3.png?resize=300%2C262&ssl=1 300w" data-lazy-loaded="1" sizes="(max-width: 454px) 100vw, 454px" loading="eager" style="box-sizing: border-box; height: auto; max-width: 100%; border-style: none; margin: 0px auto; clear: both; text-align: center;">

Sau bước chọn lựa trên bạn sẽ thấy một popup xuất hiện kế tiếp. Bạn sẽ dễ dàng nhìn thấy LinearLayout trong danh sách các layout bạn muốn chuyển đổi. Dĩ nhiên chúng ta chọn LinearLayout rồi, xong thì hãy nhấn Apply.

Sau thao tác chuyển đổi (bằng một trong hai cách trên), thì bạn thấy rằng các widget mà bạn đã sắp xếp từ bài hôm trước chúng bị thay đổi vị trí đến mức không còn có thể nhìn thấy gì cả. Bởi vì chúng khác layout như mình có giải thích ở trên.

Đặc thù của LinearLayout chính là một layout theo kiểu cũ. Tức layout này sinh ra từ khi các lập trình viên Android còn đang code giao diện bằng XML cơ, chứ không phải kéo thả như ConstraintLayout đâu. Nên để làm quen với layout này, bạn nên tập code một tí. Bạn hãy mở tab Text của cửa sổ thiết kế giao diện activity_main.xml lên. Đảm bảo cửa sổ Preview đang được chọn để bạn có thể xem được sự thay đổi đến tức thì khi bạn sửa code XML bên trái.

Mình sẽ liệt kê các chỉnh sửa sau, bạn có thể nhìn qua một lượt rồi tự code lại để so sánh kết quả nhé.

Với LinearLayout gốc.

– Mình sẽ thêm thuộc tính orientation và chỉ định giá trị của nó là vertical. Vì hai widget con của nó cần được sắp xếp theo chiều dọc mà.

– Thêm thuộc tính gravity và set giá trị là center. Vì mong muốn các phần tử con canh chỉnh vào giữa màn hình.

Với TextView.

– layout_width của TextView sẽ là match_parent. Nó không còn giá trị 0dp nữa, vì chỉ có với ContraintLayout thì giá trị này mới là là match_constraint (tức 0dp) thôi, bài trước mình có nói tới giá trị này rồi.

– Bỏ các thuộc tính layout_constraintBottom_toBottomOf, layout_constraintLeft_toLeftOf, layout_constraintRight_toRightOf, layout_constraintTop_toTopOf. Vì với LinearLayout, các thuộc tính này vô nghĩa.

Với ImageView.

– Bỏ các thuộc tính layout_constraintEnd_toEndOf, layout_constraintStart_toStartOf, layout_constraintTop_toBottomOf. Cũng với ý nghĩa tương tự như TextView trên kia.

Code giao diện sẽ trông như sau.

Kết quả khi run ứng dụng sẽ như chúng ta mong muốn. Bạn có thấy giao diện giống với bài học trước không nào.

RelativeLayout – Sắp Xếp Các View Theo Mối Quan Hệ

Nghe đến mối quan hệ chắc bạn sẽ nghĩ đến họ hàng hay quen biết gì đó. Thực chất RelativeLayout sẽ sắp xếp các con của nó theo một trật tự… tự do, mỗi thành phần con sẽ tự quyết định cho mình một chỗ đứng. Cách thức chọn chỗ đứng của các thành phần con là nói cho RelativeLayout biết nó đứng như thế nào so với chính layout cha hay so với các thành phần kế cận mà thôi, đó cũng chính là khái niệm mối quan hệ trong RelativeLayout.

Các Thuộc Tính Thêm Vào Cho View Con

Về cơ bản thì RelativeLayout có tính “dân chủ” hơn LinearLayout, mọi quyết định về vị trí đều ưu tiên cho các thành phần con tự chọn. Chính vì vậy mà với RelativeLayout bạn sẽ hầu như không cần quan tâm đến thuộc tính của chính nó, mà quan tâm đến các thuộc tính thêm vào cho các thành phần con của nó. Và bởi vì có rất nhiều thuộc tính được thêm vào thành phần con, nên mình sẽ tách các thuộc tính này làm nhiều nhóm như sau.

Quyết Định Vị Trí So Với RelativeLayout Cha

Tất cả các thuộc tính dưới đây chỉ cần truyền vào true hay false thể hiện rằng bạn có đồng ý với việc canh chỉnh này hay không mà thôi.

– android:layout_alignParentTop – Chỉ định đỉnh của thành phần này sẽ được canh theo đỉnh của layout cha.
– android:layout_alignParentBottom – Ngược lại, chỉ định đáy của thành phần này sẽ được canh theo đáy của layout cha.
– android:layout_alignParentStart – Chỉ định cạnh start của thành phần này sẽ được canh theo cạnh start của layout cha, dùng cho việc phân biệt RTL hay LTR được nói ở đầu bài hôm nay.
– android:layout_alignParentEnd – Chỉ định cạnh end của thành phần này sẽ được canh theo cạnh end của layout cha, dùng cho việc phân biệt RTL hay LTR được nói ở đầu bài hôm nay.
– android:layout_alignParentLeft – Chỉ định cạnh trái của thành phần này sẽ được canh theo cạnh trái của layout cha, không phân biệt RTL hay LTR.
– android:layout_alignParentRight – Chỉ định cạnh phải của thành phần này sẽ được canh theo cạnh phải của layout cha, không phân biệt RTL hay LTR.
– android:layout_centerHorizontal – Chỉ định thành phần này được đặt ngay giữa theo chiều ngang so với layout cha.
– android:layout_centerVertical – Chỉ định thành phần này được đặt ngay giữa theo chiều dọc so với layout cha.
– android:layout_centerInParent – Chỉ định thành phần này được đặt ngay giữa theo cả hai chiều ngang và dọc so với layout cha.

Quyết Định Vị Trí So Với Các Widget Khác

Tất cả các thuộc tính dưới đây cần phải truyền vào một ID @id/ hay @+id/ (nếu không rõ phần sử dụng ID này, bạn có thể đọc ở mục này của Bài 9.

– android:layout_alignTop –  Chỉ định đỉnh của thành phần này sẽ được canh theo đỉnh của thành phần gọi đến bằng ID.
– android:layout_alignBottom – Chỉ định đáy của thành phần này sẽ được canh theo đáy của thành phần gọi đến bằng ID.
– android:layout_alignStart – Chỉ định cạnh start của thành phần này sẽ được canh theo cạnh start của thành phần gọi đến bằng ID.
– android:layout_alignEnd – Chỉ định cạnh end của thành phần này sẽ được canh theo cạnh end của thành phần gọi đến bằng ID.
– android:layout_alignBaseline – Chỉ định baseline của thành phần này sẽ được canh theo baseline của thành phần gọi đến bằng ID. Baseline này bạn không nhìn thấy được, dùng để canh chỉnh cho text hiển thị bên trong widget, do đó sẽ hữu dụng khi canh chỉnh các TextView với nhau).
– android:layout_above – Chỉ định thành phần này sẽ nằm ở trên so với thành phần gọi đến bằng ID.
– android:layout_below – Chỉ định thành phần này sẽ nằm dưới so với thành phần gọi đến bằng ID.
– android:layout_toStartOf – Chỉ định thành phần này sẽ nằm bên phía start so với thành phần gọi đến bằng ID.
– android:layout_toEndOf – Chỉ định thành phần này sẽ nằm bên phía end so với thành phần gọi đến bằng ID.
– android:layout_toLeftOf – Chỉ định thành phần này sẽ nằm bên phía trái so với thành phần gọi đến bằng ID.
– android:layout_toRightOf – Chỉ định thành phần này sẽ nằm bên phía phải so với thành phần gọi đến bằng ID.

Thực Hành Xây Dựng Màn Hình Empty Của TourNote Bằng RelativeLayout

Giờ chúng ta tiếp tục “đập” giao diện activity_main.xml một lần nữa, chúng ta hãy chuyển từ LinearLayout sang RelativeLayout.

Cách chuyển đổi thẻ XML thì bạn làm tương tự như khi chuyển từ ConstraintLayout sang LinearLayout trên kia nhé. Sau bước chuyển đổi từ LinearLayout sang RelativeLayout này, bạn lại chứng kiến các widget bên trong màn hình trực quan lại chạy loạn hết cả. Bạn đã hiểu mỗi layout có cách canh chỉnh của chúng như thế nào chưa nào. Mỗi lần bạn chuyển đổi layout, bạn phải canh chỉnh lại các thuộc tính của layout và của chính các widget bên trong layout đó nữa.

Cũng như cách trình bày ở bài thực hành trên. Mình sẽ liệt kê các chỉnh sửa sau cho layout mới, bạn có thể nhìn qua một lượt rồi tự code lại để so sánh kết quả.

Với RelativeLayout gốc.

– Bỏ các thuộc tính không cần thiết với RelativeLayout, như android:gravity và android:orientation.

Với TextView.

– Thêm thuộc tính layout_centerInParent và set giá trị true cho nó. Như mình có diễn đạt trên kia, điều này giúp TextView tự canh vào giữa layout cha.

Với ImageView.

– Thêm thuộc tính layout_centerHorizontal và set giá trị true cho nó. Điều này giúp canh ImageView vào giữa layout cha theo chiều ngang.

– Thêm thuộc tính layout_below và set giá trị trỏ đến ID của TextView. Điều này như mình có giải thích ở mục này của bài trước, nó sẽ giúp ImageView canh chỉnh sao cho nằm dưới view có ID được chỉ định.

Code giao diện sẽ trông như sau.

Kết quả run lên như thế nào tự bạn kiểm chứng nhé.

Bạn vừa xem qua cách sử dụng 2 layout phổ biến nhất hiện nay là LinearLayout và RelativeLayout. Tuy như mình có nói, chúng ta chưa vội sử dụng 2 layout này vào trong TourNote vội, nhưng bạn hãy cứ biết đến nó nhé. Và nếu có thời gian, mình có một bài viết riêng để nói đầy đủ tất cả các layout trong Android, các bạn có thể vào tham khảo bài Tìm hiểu các layout trong Android.

Cấu Hình Cho Gradle

Bạn biết không, các thông tin liên quan đến cấu hình cho Gradle (chính là file build.gradle) và cấu hình cho Manifest (chính là file AndroidManifest.xml) đã được mình nhắc đến khá sớm ở Bài 5, tuy nhiên lời hứa đó mình đã nợ các bạn mãi tận hôm nay – Bài học Android thứ 11 – Mới có dịp được nói cụ thể về nó.

Và khi mình quyết định nói về chúng nó (Gradle và Manifest), mình muốn nói đến cả hai trong cùng một bài viết, nhưng thấy có vẻ dài hơi quá nên mình sẽ ngắt chúng ra làm hai phần và nói ở hai bài khác nhau.

Đầu tiên cho mình có đôi lời về cả hai thằng này xíu (vì xém chút nữa chúng nằm chung một bài rồi). Thực ra thì hai thằng này chúng nó chẳng liên quan gì đến nhau hết á, chúng chẳng phải anh em họ hàng với nhau, thậm chí đến cả bạn bè cũng không. Nhưng khi nói đến Gradle thì không thể không nói đến Manifest. Bởi vì sao, chúng ta cùng quay về lịch sử một chút, bạn biết không, dân lập trình Android xưa kia cày cuốc trên nền Eclipse chỉ có biết đến cấu hình cho project thông qua Manifest, file này được mình liệt kê ở Bài 5 rồi nhé. Về sau khi công cụ cày cuốc được nâng cấp lên Android Studio, Manifest vẫn còn giữ nguyên vai trò của nó, tuy nhiên anh chàng Gradle được Android Studio giới thiệu sau này đã kiêm luôn một số việc của Manifest, khiến cho vai trò bị trộn lẫn. Mình nói vấn đề này để khi bạn đọc đâu đó thấy có nói phải khai báo ở Manifest, như khai báo version của app chẳng hạn, nhưng đọc chỗ khác lại thấy khai báo ở Gradle, thì đó là do ảnh hưởng của lịch sử bạn nhé.

Vai trò của bài hôm nay không phải làm bạn rối lên giữa Gradle và Manifest, cũng không phải một tiết học lịch sử. Mà bài học sẽ giúp bạn biết khi nào thì khai báo Gradle, khi nào thì khai báo Manifest một cách rõ ràng và chuyên nghiệp.

Uhm… Dù sao thì các bạn cũng cần biết đến khái niệm của 2 thằng này như nào phải không. Nhắc lại là chúng ta cùng nói đến Gradle trong bài hôm nay, và Manifest ở bài kế tiếp nhé.

Khái Niệm Gradle

Nói ngắn gọn thôi nhé, Gradle có thể hiểu như là một công cụ để build hệ thống, cũng giống như bạn nào đã từng sử dụng Ant như là một công cụ để build Android theo hướng command line vậy. Sau này khi Android Studio ra đời, Google đã tận dụng Gradle để phát triển Android plugin cho nó và thế là Android Studio có thể sử dụng được Gradle này để build các ứng dụng Android cho chúng ta.

Xong khái niệm rồi nhé, bạn nào chưa hiểu lắm muốn biết nhiều hơn thì xem thêm Gradle ở đây. Nhưng mình nghĩ không cần phải biết nhiều quá đâu. Gradle được tích hợp sẵn vào Android Studio, và được điều khiển một cách tự động thông qua Android Studio. Trước mắt bạn cần biết đủ để cấu hình cho Gradle thôi, cấu hình cho Gradle có nghĩa là bạn đang cấu hình cho project của mình, từ việc cấu hình version của công cụ build, cho đến cấu hình version của app, chỉ định hệ điều hành Android mà ứng dụng hỗ trợ, khai báo thư viện từ bên ngoài… Bạn sẽ có dịp thực hành nhiều với Gradle và như vậy bạn sẽ ngày càng hiểu nó hơn. Tin mình đi!

Trước khi đi sâu vào Gradle bên dưới, mình cũng trình bày thêm rằng bài học hôm nay tập trung vào cách thức sử dụng Gradle có trong Android Studio. Có nghĩa là bạn có thể sử dụng Gradle độc lập ở đâu đó mà không cần phải có Android Studio vẫn được, nhưng nó thuộc về kiến thức khác mà bài học hôm nay xin phép chưa nói đến. Mình và các bạn vẫn phải dùng Android Studio để thực hành và xây dựng TourNote như mọi khi.

Làm Quen Với Gradle Wrapper

Chúng ta bắt đầu “vọc” Gradle bằng việc xem qua file Gradle Wrapper. Trong Android Studio bạn sẽ thấy file này nằm ở thư mục gradle/wrapper/. Tên file là gradle-wrapper.properties. Bạn có thể thấy file này như hình sau, hình trên máy bạn sẽ giống với hình bên trái hay bên phải là tùy vào cách view của cửa sổ này.

Bạn đừng ngần ngại, hãy click đúp vào file này để mở nó lên. Bạn đã thấy nội dung của Gradle Wrapper rồi đúng không nào, chúng rất ngắn… nhưng không kém phần quan trọng.

Sở dĩ mình nói đến Gradle Wrapper đầu tiên, là vì file này sẽ chứa đường dẫn quyết định đến việc download Gradle ở đâu, và cả version của Gradle nữa, đường dẫn mình vừa nhắc đến hiển thị ở dòng distributionUrl. Thường thì khi tạo mới một project, Android Studio đã để sẵn đường dẫn này cho bạn rồi nên bạn yên tâm không cần cấu hình gì cả. Có điều bạn nên biết đến file này, để sau này Android có nâng cấp version của Gradle, thường thì Android Studio sẽ giúp bạn thay đổi nội dung file luôn, nhưng biết đâu được, có khi chính bạn là người phải sửa đường dẫn lại theo hướng dẫn của Google không chừng. File Gradle ở đường dẫn này sẽ được down về và install rồi để ở thư mục .gradle/ (có dấu chấm ở trước nhé). Không tin à, bạn cứ thử mở thư mục này ra xem.

Làm Quen Với Các File Gradle

Yep đúng vậy, chúng ta chính thức làm quen với… các file Gradle… “các”? Thật không vui là có đến hai file Gradle mà bạn cần phải biết và chúng đều có tên là build.gradle. Một file dùng cho cấu hình ở cấp độ project, còn một file dùng cho cấu hình ở cấp độ module. Tại sao lại chia ra làm hai cấp độ file thì bạn hãy xem tiếp bên dưới nhé.

build.gradle Ở Cấp Độ Project

Theo đường dẫn ở hình trên, bạn click đúp để mở build.gradle ở cấp độ project lên xem trước. File này sẽ cấu hình cho tất cả các module bên trong project của bạn. Thông thường thì các project chỉ có một module mà thôi, vẫn có project có nhiều module nhưng ở giai đoạn này bạn không cần quan tâm lắm với việc này, chúng ta sẽ nói đến project nhiều module ở phần riêng.

build.gradle ở cấp độ này cũng không có nhiều thứ để nói, tuy nhiên mình có thể điểm sơ qua cho các bạn nắm rõ cách thức cấu hình file này như sau.

– Mỗi một mục buildscript, allprojects, task clean trong file này được gọi là một closure, chúng ta tạm gọi là các khối.
– Khối buildscript diễn đạt… uhm… bạn cứ xem như là nó đưa ra một kịch bản cho biết cần phải download phiên bản gradle ở đâu về, cụ thể trong khối này nó định nghĩa repositories là ở jcenter() (hàm jcenter() này giúp định nghĩa thông tin về repository cho Maven Central, một nơi thu thập các dependencies mã nguồn mở). Trong khối buildscript này còn có khối con dependencies là nơi liệt kê các thư viện dùng chung cho project, như hiện tại bạn thấy nó khai báo sẽ dùng một thư viện gradle, với thông tin về đường dẫn và version của gradle cần down.
– Khối allprojects là nơi định nghĩa các thiết lập cho tất cả project. Trong trường hợp này nó đang định nghĩa jcenter() là repositories để tìm tất cả các thư việc cần thiết cho các module bên trong project này.

Phần thông tin còn lại nếu có trong file này, bạn cứ để như mặc định. Thường thì mình cũng ít đụng vào file này, chỉ nói sơ qua cho các bạn hiểu chút đỉnh thôi. File build.gradle kế tiếp này mới thực sự quan trọng nè.

build.gradle Ở Cấp Độ Module

Bạn hãy mở file build.gradle ở cấp độ module này lên nhé (theo đường dẫn đến thư mục như hình trên đây). Như tên gọi, thì file này sẽ cấu hình cho từng module trong project, nên nó sẽ được sử dụng nhiều hơn.

Mình sẽ nói đến từng closure (khối) trong file này bằng những mục riêng bên dưới chứ không phải bằng các gạch đầu dòng, vì thông tin ở file này sẽ khá nhiều.

Khối android

Chà khối này định nghĩa rất nhiều cấu hình cho project của bạn (tuy build.gradle này dành để cấu hình cho module, nhưng vì project của chúng ta thường chỉ có một module, nên mình nói luôn là cấu hình này là cấu hình cho project cũng được bạn nhé).

– compiledSdkVersion: giá trị ở mục này chính là version của Android mà bạn muốn chỉ định để project của bạn build ra. Nghe có vẻ lạ phải không nào, mới đầu làm quen với Android mình cũng lùng bùng lỗ tai chỗ này, mất bao nhiêu lâu mới phân biệt rõ ràng. Để mình giúp bạn rõ. Chúng ta đã biết minSdkVersion là thông số version Android nhỏ nhất mà project của bạn hỗ trợ, thông số này bạn biết rồi nhé, lúc bạn tạo mới project í, nhớ không, bạn nào quên thì xem lại định nghĩa của khai báo Minimum API Level ở Bài 3 nhé. Rồi chúng ta lại có targetSdkVersion là version Android mới nhất mà project của bạn hỗ trợ, cái này mình nói sau. Nhưng bạn nên biết là cho dù project của bạn hỗ trợ Android trễ nhất và mới nhất như nào thì khi build, project của bạn vẫn phải dựa vào một version Android cụ thể để nó còn biết gắn các thư viện hỗ trợ vào, chính vì vậy mà compiledSdkVersion ra đời. Theo mặc định thì giá trị này sẽ được thiết lập là version Android lớn nhất (giống với version ở targetSdkVersion). Bạn hoàn toàn có thể chỉ định một version thấp hơn version của target, nhưng compile với một version lớn nhất sẽ cho phép ứng dụng của bạn có được các thư viện Android mới nhất, như giao diện của Android 7.0 chẳng hạn, giúp tạo trải nghiệm tốt nhất cho user.
– buildToolsVersion (các project mới hiện tại không còn thấy khai báo này nữa): giá trị ở mục này chỉ định version của công cụ build Android (Android SDK build tool). Giá trị này bạn không cần quan tâm lắm, mặc dù nó cũng khá quan trọng, nhưng thông thường bạn được Android Studio hỗ trợ chỉnh sửa tự động mỗi khi bạn update công cụ này.
– applicationId: thông số này nằm bên trong khối defaultConfig, cũng như bao thông số khác bên trong khối này, chúng giúp định nghĩa một số cấu hình default ban đầu, dĩ nhiên bạn có thể sửa được, và chắc chắn chúng ta sẽ thực hành sửa chữa mục này ở phần kế tiếp của bài học. Thông số applicationId này mặc định chính là package name. Chà chà bạn còn nhớ hay đã quên, vui lòng xem lại Bài 3 nếu bạn quên package name có ý nghĩa là gì nhé nhé.
– minSdkVersion: đã được nhắc ở mục compiledSdkVersion trên đây rồi nhé bạn.
– targetSdkVersion: cũng đã được nhắc đến ở trên rồi nhé, thông số này được tạo mặc định nên ban đầu bạn không cần chú ý lắm, về sau nếu cần hỗ trợ Android mới nhất thì nhớ nâng em này với em compiledSdkVersion lên. À có lẽ mình quên nói là các version của Android dùng cho compiledSdkVersion, minSdkVersion và targetSdkVersion đều là các con số và chúng được tham chiếu dựa trên bảng này, các bạn vào tham khảo nhé.
– versionCode và versionName: dễ hiểu thôi, versionName là version của app sẽ được Google Play hiện ra khi user chuẩn bị download và install app, versionName còn được hiển thị trong Setting của app nữa, dù vậy versionName cũng chỉ hiển thị cho user biết thôi, nó không mang ý nghĩa so sánh gì cả. Trong khi đó versionCode thì dùng để hệ thống biết các phiên bản cập nhật của app, versionCode được set ban đầu là 1, nếu bạn xuất bản những bản cập nhật của app lên Google Play, bạn phải nâng versionCode, trong khi versionName như thế nào Google cũng không quan tâm.

Khối dependencies

Khối dependencies này cũng giống như khối dependencies dùng trong buildscript ở file build.gradle cấp độ project đã nói ở trên đây, là đều dùng để định nghĩa ra các thư viện. Chúng chỉ khác nhau ở chỗ một thằng định nghĩa thư viện dùng chung cho project, còn một thằng định nghĩa thư viện cho từng module.

Bạn nhìn xem có khá nhiều thư viện được định nghĩa sẵn trong đây, tùy vào thời điểm bạn tạo project mà hệ thống quyết định project của bạn nên có những thư viện nào.

Chúng ta sẽ cùng nhau thực hành trên TourNote về cách sử dụng dependencies này cũng như các thuộc tính khác trong Gradle ở phần dưới nhé.

Thực Hành Cấu Hình Gradle Cho TourNote

Bài thực hành này chúng ta sẽ tập cấu hình Gradle một cách đơn giản cho project TourNote. Bạn nên thực hành qua cho biết, nhưng nếu bạn đã biết Gradle là gì rồi thì có thể không cần phải thực hành làm gì cho mất thời gian, bạn có thể đến với bài học tiếp theo. Về sau, ở các bài thực hành cụ thể, nếu có bất cứ chỉnh sửa nào đối với Gradle này, chúng ta sẽ cùng nhau nhắc đến Gradle là gì và cấu hình chúng theo các yêu cầu cụ thể sau.

Thay Đổi Version Của Ứng Dụng

Chúng ta đã nói đến hai thuộc tính liên quan đến quản lý version bên trong ứng dụng, hai thuộc tính này là versionCode và versionName, chúng nằm ở file build.gradle của cấp độ module. Nếu bạn mở file này lên, bạn sẽ thấy hiện tại versionCode đang là 1 và versionName đang là “1.0”.

Với mỗi lần submit app lên Google Play, bạn nên nâng số versionCode lên một đơn vị (lưu ý giá trị này là số nguyên nhé), nếu bạn không nâng số này lên thì Google Play sẽ không cho bạn submit app đâu nhé. Nhưng với bài thực hành này chúng ta không publish app do đó chúng ta sẽ chỉ cần quan tâm đến versionName mà thôi.

Giả sử chúng ta cung cấp đến user một version có 3 phần “x.y.z”. Version đầu tiên của app sẽ là “1.0.0”. Nếu có thay đổi lớn trong app chúng ta sẽ nâng số ở phần x lên 1 đơn vị, tương tự với thay đổi vừa sẽ nâng số y lên 1 đơn vị, và thay đổi nhỏ sẽ nâng z. Nên nhớ là versionName được đặt thoải mái vì đây là kiểu String, nên bạn có thể đặt các ký tự vào đây, miễn sao user hay ai đó hiểu được ý nghĩa của version này.

Vậy bạn hãy mở file build.gradle cấp module và sửa version của app như sau.

Bạn thấy rằng bất kỳ chỉnh sửa gì trên file build.gradle, thì hệ thống đều xuất hiện thông báo yêu cầu bạn phải đồng bộ (sync) lại project.

Bạn chỉ cần nhấn vào Sync Now ở bên phải vạch vàng phía trên và đợi trong giây lát. Trong lúc đang đồng bộ hệ thống cũng có thông báo trạng thái.

https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2016/12/Hinh4.png?resize=300%2C241&ssl=1 300w" data-lazy-loaded="1" sizes="(max-width: 384px) 100vw, 384px" loading="eager" style="box-sizing: border-box; height: auto; max-width: 100%; border-style: none; margin: 0px auto; clear: both; text-align: center;">

Sau khi đồng bộ xong, bạn hãy run ứng dụng lên thiết bị. Rồi mở Settings, vào xem thông tin của ứng dụng TourNote, bạn sẽ thấy version mà chúng ta vừa thay đổi được hiển thị như sau.

Và nếu ứng dụng của bạn có được đưa lên Google Play, versionName sẽ xuất hiện như sau (cái này mình nhờ lấy một app khác show giúp, chứ ứng dụng của chúng ta còn chưa đâu vào đâu, làm sao mà đưa lên Google Play).

Khai Báo Manifest

Phải nói rằng cũng bẵng một thời gian mình mới có thể cho ra tiếp bài học hôm nay. Nếu vì thời gian chờ lâu các bạn quên bài thì mình nhắc lại một chút. Như bài hôm trước mình có nói, Gradle và Manifest luôn được nói chung với nhau dù cho chúng chẳng có bà con gì với nhau hết. Chúng chỉ tranh nhau vai trò cấu hình cho project của bạn. Tất nhiên chúng cũng có những vai trò tách biệt nhau như chỉ có ở file này mà không có ở file kia. Nhưng mình không muốn bạn phải đau đầu vì những thứ giống nhau và khác nhau đó. Mình đã nói hết những gì nên làm với Gradle ở bài trước, và những gì nên làm với Manifest ở bài này, không hề có những thông tin trùng lắp khiến bạn bối rối đâu. Tuy nhiên nếu bạn muốn tìm hiểu xem Gradle và Manifest giao thoa ở những chức năng nào thì vẫn có thể dễ dàng tìm thấy thông tin này ở nhiều tài liệu khác nhé.

Khái Niệm Manifest

Khác với Gradle xuất hiện khá muộn khi mà Android Studio ra đời, giúp hỗ trợ bạn quản lý project dễ dàng hơn trước kia. Thì Manifest lại xuất hiện với vai trò là một nền tảng của Android ngay từ ban đầu. Nếu bạn còn nhớ ở Bài 5 mình có nhắc đến Manifest như là một thành phần cơ bản nhất và không thể thiếu trong một ứng dụng Android, thì bạn sẽ thấy Manifest gắn bó với Android như thế nào.

Bạn cứ nhớ là Manifest dùng để định nghĩa những thứ bên trong ứng dụng của bạn. Tại sao phải định nghĩa những thứ này? Vì đây chính là một nơi giúp tóm tắt toàn bộ thông tin về ứng dụng, từ việc ứng dụng sẽ sử dụng internet, sẽ đọc thẻ nhớ ngoài, sẽ dùng GPS, đến việc ứng dụng có bao nhiêu màn hình, có các service nào, broadcast receiver nào, vân vân và mây mây… Dựa trên những định nghĩa này của bạn mà hệ thống sẽ cho phép ứng dụng của bạn được sử dụng các chức năng đặc biệt của hệ thống, đồng thời cảnh báo với user một số thông tin quan trọng trong ứng dụng của bạn trước khi họ quyết định cài đặt và sử dụng ứng dụng, hoặc khi họ vào Settings và xem lại các thông tin đó, hay khi ứng dụng đang chạy thì hệ thống vẫn có căn cứ vào các định nghĩa này mà hỏi quyền từ người dùng. Chà phức tạp nhĩ, tạm thời bỏ qua đi bạn. Để nhẹ đầu hơn thì bạn có thể nhìn vào một số ví dụ của các ứng dụng nổi tiếng bên dưới để xem những cảnh báo của hệ thống như thế nào nhé.

Ảnh trên là tất cả các thông tin mà Manifest của 2 app nổi tiếng là Facebook và Grab đã khai báo. 2 hình đầu tiên bên trái là khi user nhấn chọn cài đặt, khi đó Google Play sẽ dựa vào khai báo đó mà hiển thị thông tin ra cho các bạn xem (hơi khó tìm một chút), những thông tin này chính là những “quyền” mà bạn cho phép các ứng dụng này được phép dùng trên máy của bạn hay không, như sử dụng camera, gửi tin nhắn SMS, xem lịch của ban, đọc danh bạ của bạn,…. Còn hình ngoài cùng bên phải chính là thông tin của ứng dụng Grab sau khi bạn đã cài đặt và vào Settings của hệ thống để xem lại.

Chúng ta sẽ biết nhiều hơn về Manifest ở các mục bên dưới. Và cũng như Gradle, bạn sẽ có cơ hội được đụng đến Manifest khá nhiều, đến nỗi bạn thân quen với 2 file này lúc nào không hay.

Làm Quen Với File Manifest

May mắn cho chúng ta là Manifest chỉ có duy nhất một file, ý mình là không có sự phân cấp giữa Manifest cho project và Manifest cho module như với Gradle. Nhưng Manifest vẫn được dùng riêng cho từng module, và vì ở giai đoạn này chúng ta chỉ làm quen với việc một project chỉ có một module, do đó hiện tại chúng ta xem như chỉ duy nhất một Manifest trong project TourNote mà thôi.

Bạn có thể tìm thấy file Manifest trong thư mục src/main/ của module. File này có tên đầy đủ là AndroidManifest.xml. Như hình sau (hình trái hay phải tùy vào cách view của cửa sổ này là Android hay Project).

Nếu đã tìm thấy file Manifest này rồi thì bạn hãy click đúp vào để mở nó lên.

Điều đầu tiên bạn nhận ra khi nhìn thấy cấu trúc của Manifest là gì? Vâng mình hiểu ý bạn, nhìn nó như đám rừng… Đùa thôi, bạn cũng nhận thấy là Manifest sử dụng cấu trúc XML giống như cấu trúc của layout mà bạn học ở các bài trước vậy. Điều này làm cho Manifest khác với Gradle vốn sử dụng một kiểu setting riêng dạng khối, phải mất một khoảng thời gian bạn mới quen với việc cấu hình Gradle. Còn với Manifest mình chắc chắn bạn sẽ cảm thấy thân thiện hơn với cấu trúc XML của nó.

Và mình liệt kê lại dưới đây nội dung Manifest của TourNote, nó được tạo mặc định khi bạn tạo mới một project.

Thực ra mà nói thì file Manifest trên đây của TourNote chả nhằm nhò gì cả, nó còn thiếu nhiều lắm. Nhưng bạn đừng vội thêm vào, mình sẽ từ từ hướng dẫn bạn thêm vào các khai báo cho Manifest ở các bước thực hành ở bài này và các bài tiếp theo. Còn bây giờ mình xin phép được liệt kê đầy đủ hơn các khai báo thường dùng của Manifest để bạn làm quen trước. Bạn hãy xem liệt kê dưới đây.

Bùm! Bạn đã thấy sợ chưa. Đó mới chỉ là cái “sườn” của Manifest thôi đấy, tức là dựa trên đó chúng ta phải thêm vào, thêm vào nhiều nữa.

Nào đừng nản nhé, cái gì cũng có nguyên tắc của nó, và khi hiểu rõ nguyên tắc chúng ta sẽ thấy dễ dàng hơn đấy. Mình sẽ nói qua một số thẻ có trong liệt kê trên đây cho các bạn làm quen trước.

Thẻ manifest

Bao bọc file Manifest này chính là thẻ có tên manifest, thẻ này là thẻ gốc cho các thẻ con bên trong nó.

Thẻ này ngày xưa chứa vài thông tin cấu hình cho ứng dụng, nhưng do sự ra đời của Gradle nên một vài thông bị trùng lắp giữa 2 file, các thông tin trùng lắp này dù vẫn còn nhưng không được dùng đến ở Manifest nữa. Do đó chúng ta sẽ không nói đến các thông tin bị trùng lắp kia nữa, mà chỉ nói qua thông tin được dùng đến ở thẻ này của chỉ riêng Manifest mà thôi.

– xmlns:android. Đây đơn giản là dòng khai báo namspace android mà thôi. Sau dòng khai báo này thì các thẻ khác bên trong thẻ manifest này mới có thể sử dụng được từ khóa android.
– package: chính là package name của project. Mặc định package này sẽ là giá trị giống như thuộc tính applicationId trong file build.gradle ở cấp độ module mà bạn đã làm quen ở bài trước.

Hầu như chúng ta sẽ chẳng cần đụng đến thẻ này, bạn chỉ cần biết thôi và để nó như mặc định.

Thẻ uses-permission

Như bạn thấy ở hình chụp màn hình 2 ứng dụng Facebook và Grab ở trên kia, những quyền mà hệ thống hiển thị ra đó đều được lấy ra từ các thẻ uses-permission này.

Lưu ý là với ứng dụng hỗ trợ Android 6.0 hoặc mới hơn, một số quyền còn yêu cầu ứng dụng phải hiển thị popup xin phép người dùng khi lần đầu tiên họ sử dụng đến chức năng có liên quan đến quyền này trong ứng dụng. Chẳng hạn khi lần đầu tiên người dùng nhấn vào nút chụp hình trên TourNote để lưu lại một ghi chú về món ăn, lập tức TourNote sẽ phải hỏi người dùng quyền được sử dụng camera, nếu user cho phép thì TourNote sẽ chạy như bình thường, nếu user không cho phép thì TourNote mãi không sử dụng được camera của hệ thống và sẽ không chụp ảnh được. Một ảnh minh họa cho việc hỏi quyền trong khi sử dụng app, mà mình lấy từ trang developer.android.com về, ứng dụng này đang hỏi quyền truy cập vào danh bạ của user.

Còn đây là cách mà một ứng dụng xin quyền dựa vào thẻ uses-permission từ file Manifest, mình đã “chôm” được khai báo này từ một ứng dụng hoàn chỉnh trên Google Play.

Xin quyền thì có rất nhiều chuyện để nói. Có thể mình sẽ có một bài viết riêng về nó. Hoặc nếu bạn có thắc mắc gì ở bước này thì cứ để lại bình luận ở cuối bài học nhé, mình sẵn lòng giải đáp cho các bạn.

Thẻ permission

Thẻ này mình xin được nói sơ thôi vì tuy trông giống với uses-permission ở trên đây nhưng permission có công dụng hoàn toàn khác. Thẻ permission này có thể dùng để định nghĩa ra các quyền cho riêng ứng dụng của bạn. Vì chúng khá ít xài nên các thẻ permission, permission-tree, permission-group sẽ được mình nói đến cụ thể sau nhé.

Một ví dụ cho thẻ permission mà mình chôm được của một app.

Thẻ supports-screens

Thẻ này cũng kha khá quan trọng, nó được dùng để định nghĩa các thể loại màn hình mà ứng dụng của bạn hỗ trợ. Thông thường thì các ứng dụng hay loại bỏ việc hỗ trợ màn hình nhỏ, là các thiết bị có màn hình dưới 3 inch. Chúng ta sẽ sử dụng thẻ này ở bài thực hành phía dưới.

Và đây là một ví dụ cho thẻ này, tất nhiên cũng là do mình chôm luôn.

Thẻ application

Thẻ này quan trọng lắm đây, thẻ này chứa một số thuộc tính liên quan đến cấu hình của ứng dụng (đúng như tên gọi của nó), mà mình sẽ liệt kê như bên dưới đây.

Chúng ta sẽ nói sơ vài thuộc tính đã được liệt kê.

– android:allowBackup – Cho phép ứng dụng của bạn nằm trong chương trình tự động backup của hệ thống Android hay không. Thực sự mình cũng chưa kiểm chứng tính hiệu quả của chế độ backup này, nghe nói hệ thống sẽ giới hạn dữ liệu backup của ứng dụng với mỗi người dùng là 25MB, kèm theo việc giới hạn các loại dữ liệu có thể backup. Dù sao thì tính năng này cũng rất tốt nên bạn cứ để giá trị của thuộc tính này là true như mặc định nhé.
– android:icon – Thuộc tính này là nơi bạn thiết lập icon cho ứng dụng. Icon này sẽ xuất hiện trên màn hình chính của thiết bị. Hiện tại thì icon này đang được set mặc định là file ic_launcher.png để trong thư mục res/mipmap/. Cách sử dụng icon cho ứng dụng cũng giống như cách bạn hiển thị một ảnh lên ImageView ở bài trước vậy. Chúng ta sẽ thực hành thay đổi icon cho TourNote ở bài học sau nhé.
– android:label – Thuộc tính này trỏ đến một giá trị string trong resource, hoàn toàn tương tự như cách bạn khai báo text cho TextView ở bài trước vậy. String này chính là tên ứng dụng của chúng ta, hiện tại đang là “TourNote”. Chúng ta cũng sẽ thực hành thay đổi tên cho TourNote ở bài học sau.
– android:supportsRtl – Nếu bạn còn nhớ, từ RTL viết tắt của right-to-left, thuộc tính này cho phép ứng dụng của bạn có hỗ trợ cho các hệ ngôn ngữ viết từ phải-sang-trái hay không. Việc hỗ trợ các ngôn ngữ RTL đã được mình nhắc đến cụ thể ở Bài 10 rồi nhé.
– android:theme – Thuộc tính này khá hay, nó giúp chúng ta định nghĩa “giao diện chủ đề” cho ứng dụng. Và vì nó hay quá nên mình sẽ không nói ở đây, mình dành hẳn một bài để nói về chủ đề này để cho các bạn hiểu rõ nhất về nó.

Tất nhiên thẻ application còn nhiều thuộc tính lắm, bạn có thể vào link này để xem thông tin đầy đủ về nó. Mình chỉ nói qua những thuộc tính dùng nhiều nhất, còn lại thì khi nào phát sinh thuộc tính mới mình sẽ nói thêm với các bạn.

Ngoài ra thì trong thẻ application này có các thẻ con quan trọng nữa, chúng ta lại tiếp tục nói đến các thẻ con của application ở bên dưới đây.

Thẻ activity

Thẻ này giúp bạn khai báo các Activity có trong ứng dụng. Activity là gì? Chúng được xem như các màn hình trong ứng dụng của chúng ta. Hiện tại khi mở ứng dụng TourNote lên, bạn sẽ thấy có một màn hình duy nhất mà chúng ta hì hụi xây dựng giao diện cho nó mấy hôm nay, chính vì vậy mà khi nhìn vào file Manifest hiện tại bạn chỉ thấy một thẻ activity mà thôi. Tất nhiên về sau chúng ta sẽ xây dựng nhiều màn hình khác, và khi đó thẻ activity sẽ nhiều lên, vì mỗi thẻ activity như vậy giúp khai báo cho một màn hình duy nhất. Chúng ta dành “giấy mực” cho thẻ này khi học về Activity sau nhé.

Thẻ service

Tương tự như thẻ activity trên đây. Mỗi thẻ service dùng để định nghĩa cho một loại Service. Service là gì á? Bạn có thể xem lại một tí ở Bài 5, nhưng chúng ta sẽ nói cụ thể về Service ở bài học sau.

Thẻ receiver

Cũng như hai thẻ activity và service trên đây. Mỗi thẻ receiver dùng để định nghĩa cho một loại Broadcast Receiver. Broadcast Receiver cũng được nhắc đến ở Bài 5, và sẽ được nói cụ thể sau.

Thẻ provider

Cũng như các thẻ activity, service, và receiver trên đây. Mỗi thẻ provider dùng để định nghĩa cho một loại Content Provider. Content Provider cũng được nhắc đến ở Bài 5, và sẽ được nói cụ thể sau.

Thực Hành Thay Đổi Manifest Cho Ứng Dụng TourNote

Bài học đã khá dài rồi, do đó phần thực hành này chúng ta làm nhanh gọn lẹ thôi. Những bổ sung cho Manifest của TourNote sẽ được nói đến ở các bài thực hành sau bạn nhé.

Như đã nói ở trên, chúng ta sẽ thiết lập cho Manifest của TourNote sao cho không hỗ trợ màn hình nhỏ. Và cũng từ kiến thức trên đây, bạn đã biết nên thêm vào Manifest thẻ supports-screens, thẻ này là thẻ con của manifest. Vậy bạn hãy mở file AndroidManifest.xml của TourNote lên và thêm vào các dòng như sau.

Bạn có thể thấy việc khai báo android:smallScreen=”false” sẽ giúp Google Play kiểm tra màn hình của người dùng trước khi cho họ download ứng dụng của bạn. Nếu màn hình của người dùng rơi vào giá trị smallScreen, như đã khai báo, người dùng sẽ không được phép tải và cài đặt TourNote. Các loại màn hình còn lại đều mang giá trị true nên sẽ được phép tải và cài đặt TourNote một cách bình thường. Bạn đã hiểu chưa nào.

Sử Dụng Style

Như đã hứa ở cuối bài trước, là từ bài học hôm nay chúng ta sẽ lần lượt nói về từng resource chuyên sâu của Android. Mình sẽ ưu ái nói đến resource Style trước, bởi vì nó là một resource đặc biệt, nó quyết định đến SỰ NHẤT QUÁN trong giao diện của ứng dụng của bạn.

Mình đã từng góp ý cho nhiều project của các bạn mới tham gia vào lập trình ứng dụng, đa số các bạn đều mắc một lỗi, đó là sự nhất quán. Bạn thử nghĩ xem ở màn hình thứ nhất, các Button của các bạn thiết kế với phong cách vuông, background màu xám, nhưng qua màn hình thứ hai thì phong cách bị đảo lộn với kiểu Button được bo tròn, background màu xanh. Chưa kể đến font size và chiều cao của các Button này không đồng nhất nữa. Đó là một ví dụ nhỏ về Button, các widget khác trong các ứng dụng này đều chịu một “số phận” tương tự, đó là việc thiếu nhất quán trong phong cách. Việc thiếu nhất quán này làm cho người dùng cảm thấy bối rối khi ở mỗi màn hình mỗi khác, họ sẽ đánh giá rằng ứng dụng của bạn thiếu sự đầu tư, thiếu chuyên nghiệp.

Vậy làm cách nào để cải thiện? Mời các bạn cùng xem qua bài học về Style nhé.

Khái Niệm Style

Style – Phong cách. Như mình có trình bày ở trên, Phong Cách ở đây là muốn nói về cách mà bạn tạo ra một sự đồng nhất về giao diện cho ứng dụng. Như ví dụ về Button trên đây, bạn muốn tạo ra các Button giống nhau ở các màn hình, để cho nó có sự đồng nhất. Khi đó việc thiết kế cho Button sao cho chúng giống nhau như vậy khiến bạn cảm thấy nhàm chán vì mất khá nhiều thời gian. Lúc đó bạn sẽ cần đến một nơi định nghĩa hết tất tần tật những thuộc tính của Button trên, rồi đến với từng Button bạn chỉ việc mang định nghĩa đó ra dùng. Thì khi đó Style chính là kiểu resource mà bạn đang tìm.

Nói Đến Style Phải Nói Đến Theme

Đã nói về Style thì mình cũng muốn các bạn làm quen với khái niệm Theme luôn. Vì về cơ bản, trong Android Theme không khác gì Style. Chúng đều giúp tạo ra sự đồng nhất về giao diện. Nhưng thay vì Style giúp áp dụng sự đồng nhất cho các view sử dụng nó, thì Theme lại giúp áp dụng sự đồng nhất cho toàn bộ Activity (toàn bộ màn hình) hoặc toàn bộ ứng dụng. Ví dụ như bạn khai báo font cho Theme, rồi áp dụng Theme đó cho toàn bộ ứng dụng, thì tất cả các view trong màn hình đó đều được thay đổi font.

Nếu đến đây bạn vẫn còn mơi hồ về hai khái niệm Style và Theme, thì bạn cứ tưởng tượng chúng giống như khái niệm CSS (Cascading Style Sheets) trong lập trình Web vậy. CSS cũng giúp định hình các phong cách, để tạo nên sự đồng nhất cho các thẻ HTML bên trong trang Web đó.

Có một điều bạn cần phải nhớ là mặc dù Theme là một khái niệm để mang ra nói chung với Style, nhưng bạn không cần phải định nghĩa ra bất kỳ Theme nào cả. Bạn chỉ cần chọn một trong các Theme được xây dựng sẵn bởi hệ thống. Và vì kiến thức về Theme cũng kha khá nhiều và quan trọng, nên mình sẽ nói tiếp ở bài sau nhé, bài này sẽ tập trung cho Style.

Ví Dụ Về Sử Dụng Style

Nào, chưa cần nói gì về cách sử dụng Style nhé. Phần này đưa ra một ví dụ mà không nói quá chi tiết, để bạn có một cách hiểu tổng quát về Style trước, rồi chúng ta mới đi từ từ vào các cách thức cụ thể.

Giả sử mình có một TextView như sau.

Mình muốn TextView này là một TextView chuẩn, để ở các màn hình khác mình cũng sẽ định nghĩa các TextView giống vậy. Và thay vì mình phải khai báo lại các thuộc tính như trên cho tất cả các TextView ở các màn hình khác, thì mình chỉ cần tạo ra một Style có tên là CodeFont, rồi sau đó áp dụng Style này cho TextView này và các TextView về sau như sau.

Vậy đó. Cách để áp dụng Style cho TextView đơn giản vậy thôi. Cách thức khởi tạo chi tiết hơn một Style được mô tả tiếp ở bước kế tiếp.

Chi Tiết Sử Dụng Style

Như mình có nói thì Style là một dạng resource của Android, vậy chắc chắn file Style phải ở đâu đó trong thư mục res/ rồi, và chính xác của thư mục chứa file Style này là res/values/. Bạn hãy mở thư mục này theo đường dẫn như hình bên dưới. Khi bạn tạo mới một project thì hệ thống cũng tạo sẵn cho chúng ta một file Style và để ở thư mục này, tên của file Style này là styles.xml.

https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2017/01/Hinh1-1.png?resize=161%2C300&ssl=1 161w" data-lazy-loaded="1" sizes="(max-width: 361px) 100vw, 361px" loading="eager" style="box-sizing: border-box; height: auto; max-width: 100%; border-style: none; margin: 0px auto; clear: both; text-align: center;">

Và dĩ nhiên vì là một loại resource của Android, nên file Style cũng theo quy luật Alternative Resource và Default Resource. File styles.xml các bạn đang thấy trên hình thuộc về Default Resource, nhưng có thể project ở máy của bạn có chứa đựng một file styles.xml khác ở thư mục values-xxx/ nào khác thì có nghĩa file Style đó thuộc về Alternative Resource.

Cấu Trúc File styles.xml

Giờ thì chúng ta cùng mở file styles.xml ở thư mục Default Resource này lên nhé.

https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2017/01/Hinh2-2.png?resize=300%2C118&ssl=1 300w" data-lazy-loaded="1" sizes="(max-width: 701px) 100vw, 701px" loading="eager" style="box-sizing: border-box; height: auto; max-width: 100%; border-style: none; margin: 0px auto; clear: both; text-align: center;">

Bạn có thể thấy rằng file styles.xml cũng giống như file strings.xml mà bạn đã làm quen hay tất cả các file .xml khác trong thư mục values/ mà bạn sẽ làm quen sau này cũng đều được để trong một thẻ gốc có tên resources.

Hình trên đây đang có một Style, mỗi Style mà bạn tạo ra sẽ được nằm trong cặp đóng mở thẻ có tên style. Và thẻ style duy nhất bạn thấy trong hình lại dùng như một Theme của ứng dụng, mà chúng ta sẽ nói về Theme này ở bài sau.

Còn bây giờ giả sử chúng ta cần tạo một Style có tên là CodeFont để dùng cho ví dụ về TextView ở trên, vậy mình sẽ thêm các dòng sau vào file styles.xml.

Khi đó ở mọi nơi mà mình muốn dùng đến Style này, mình sẽ gọi đến bằng thuộc tính style như sau.

Giờ thì chúng ta hãy làm quen với những gì có thể có bên trong thẻ style nhé, rồi sau đó cùng nhau thực hành tạo style cho TourNote ở bên dưới bài học này.

Thuộc Tính name

Đây là tên của Style, như bạn thấy ở ví dụ trên tên này là CodeFont, bạn phải đặt tên cho bất kỳ Style nào mà bạn đặt ra để có thể dùng đến sau này. Cách đặt tên cho Style cũng như cách đặt tên cho resource dạng String mà bạn đã thực hành ở Bài 8.

Các Thẻ item

Chà, như Style ví dụ trên đây thì sau thuộc tính name còn có thuộc tính parent. Nhưng mình xin phép được nói đến các thẻ item trước vì nó quan trọng hơn.

Mỗi thẻ item như vậy định nghĩa ra một loại phong cách nào đó, trong đó tên của loại phong cách đó được miêu tả trong thuộc tính name của thẻ này, như bạn đã thấy trong ví dụ, các tên này như là “android:layout_width”, “android:layout_height”, “android:textColor”, “android:typeface” và còn nhiều tên nữa… Bạn có thể thấy các giá trị cho thuộc tính name này đều là các thuộc tính của các widget hay của layout chứa widget đó mà bạn đã làm quen trong việc thiết kế giao diện trước đây. Như vậy Style cũng chính là nơi bạn lấy các thuộc tính có sẵn ra, rồi định nghĩa cho chúng một giá trị nào đó, rồi áp dụng lại cho các widget, đó chính là khái niệm Phong Cách trong bài học hôm nay.

Theo sau các khai báo name trong thẻ này là các giá trị của nó, đó có thể là một kiểu String, một giá trị màu sắc, hay một độ lớn dp, sp,… tùy thuộc vào từng loại phong cách.

Thuộc Tính parent

Thuộc tính này không bắt buộc. Nhưng nếu bạn muốn Style của mình được kế thừa từ một Style có sẵn (do bạn tạo ra trước đó, hay từ Style của một thư viện nào đó, hoặc Style của hệ thống), việc kế thừa này giúp bạn tận dụng lại những định nghĩa từ Style gốc, và tạo ra các định nghĩa mới bổ sung cho Style gốc còn thiếu.

Như ví dụ từ định nghĩa trên đây, bạn sẽ thấy Style dành cho TextView có kế thừa từ một Style của TextView có sẵn của hệ thống, đó là @android:style/TextAppearance.Medium. Ngoài việc dùng lại tất cả những thuộc tính được khai báo sẵn của hệ thống, thì Style CodeFont trên lại định nghĩa mới các thuộc tính về layout_width, layout_height, textColor, và typeface cho riêng mình.

Còn nếu bạn muốn biết nhiều hơn về ví dụ cách kế thừa từ một Style do bạn tạo ra, thì mời bạn xem đoạn định nghĩa các Style bên dưới.

Với ví dụ này thì mình định nghĩa ra một Style chung cho nhiều TextView có tên là BaseTextViewStyle. Sau đó mình có thêm hai Style nữa là LargeTextViewStyle và SmallTextViewStyle đều có thuộc tính parent chỉ đến BaseTextViewStyle, nhưng hai Style con lại có cách định nghĩa riêng giá trị textSize cho chúng.

Lưu ý là với việc kế thừa từ Style của bạn ở cùng một file, thì bạn có thể không cần đến khai báo parent nữa mà dùng dấu chấm như thế này cũng được.

Thực Hành Tạo Style Cho TourNote

Chà lý thuyết nhiều quá, hi vọng các bạn đã nắm tốt kiến thức về Style.

Quay trở lại với bài thực hành, ở các bài thực hành trước, chúng ta đã tạo ra một TextView ở giữa màn hình để hiển thị thông báo cho người dùng biết rằng chưa có ghi chú nào được tạo và người dùng phải tạo ra ghi chú mới. Nhưng bạn cũng nên biết trong ứng dụng cũng sẽ có nhiều các câu thông báo như vậy. Vậy thì để tiết kiệm thời gian sau này mỗi khi bạn cần hiển thị một thông báo ở đâu đó, thay vì thiết kế lại các thuộc tính cho các câu thông báo, thì chúng ta sẽ tạo một Style đầu tiên dành cho các câu thông báo như thế này ở mọi nơi trong ứng dụng TourNote của chúng ta.

Tạo Style

Để bắt đầu, bạn hãy mở file styles.xml của TourNote lên nhé. Bạn chớ có xóa đi Style hiện có trong file này, mà hãy thêm một Style mới bên dưới Syle đã có như sau.

Bạn thấy rằng Style được tạo ra này có tên là InformationTextView. Trong đó có các thuộc tính được định nghĩa là phong cách cho loại TextView này, bao gồm layout_width, layout_height, padding, gravity và textSize.

Tại sao những thuộc tính khác của TextView này không được sử dụng làm Style? Bởi vì hoặc là chúng không mang tính đặc trưng sẽ được dùng đi dùng lại nhiều lần, như thuộc tính text chẳng hạn. Hay chúng là các thuộc tính của layout cha, mà nếu như vậy thì ai mà biết được TextView sẽ thuộc về ConstraintLayout hay LinearLayout hay RelativeLayout trong tương lai.

Sử Dụng Style

Với việc tạo ra một Style như trên đây, thì bước này chúng ta áp dụng Style đó vào TextView cần thiết. Bạn hãy mở file activity_main.xml lên nhé.

Nếu bạn đang ở tab Design của cửa sổ này, thì hãy đảm bảo TextView ở giữa màn hình đang được chọn. Sau đó hãy tìm trong hộp thoại Attributes bên phải màn hình thuộc tính style. Có thể bạn phải nhấn vào View all attributes mới có thể tìm thấy field này.

https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2017/01/Hinh3.png?resize=300%2C163&ssl=1 300w, https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2017/01/Hinh3.png?resize=768%2C418&ssl=1 768w, https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2017/01/Hinh3.png?resize=1024%2C557&ssl=1 1024w" data-lazy-loaded="1" sizes="(max-width: 1000px) 100vw, 1000px" loading="eager" style="box-sizing: border-box; height: auto; max-width: 100%; border-style: none; margin: 0px auto; clear: both; text-align: center;">

Khi thấy field style, hãy đưa trỏ chuột vào field này bạn sẽ thấy bên phải có dấu ba chấm (…). Nhấn vào đó sẽ dẫn bạn đến một dialog chọn Style đã được định nghĩa sẵn. Và vì có quá nhiều Style trong đây nên bạn hãy tìm bằng cách gõ từ khóa vào field tìm kiếm như sau.

https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2017/01/Hinh5.png?resize=300%2C264&ssl=1 300w, https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2017/01/Hinh5.png?resize=768%2C677&ssl=1 768w, https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2017/01/Hinh5.png?resize=1024%2C903&ssl=1 1024w" data-lazy-loaded="1" sizes="(max-width: 1000px) 100vw, 1000px" loading="eager" style="box-sizing: border-box; height: auto; max-width: 100%; border-style: none; margin: 0px auto; clear: both; text-align: center;">

Sau khi tìm thấy Style InformationTextView rồi thì bạn hãy nhấn chọn OK. Kết quả nhận được ở màn hình trực quan sau đó chẳng có gì khác lạ cả. Một phần vì Style mà bạn định nghĩa nó dựa trên các thuộc tính có sẵn của TextView này rồi, nên việc áp dụng nó vào đây cũng chẳng giúp gì. Nó sẽ hữu dụng khi bạn xây dựng TextView nào đó ở những chỗ khác, mà áp dụng Style InformationTextView này, thì sẽ giúp tiết kiệm khá nhiều công sức định nghĩa lại các thuộc tính giống với TextView này.

Tuy nhiên sự khác lạ sẽ ở code XML, bạn hãy chuyển qua tab Text ở cửa sổ thiết kế cho giao diện activity_main.xml này. Bạn sẽ thấy TextView hôm trước nay đã có thêm thuộc tính style.

Bạn thấy rằng, mặc dù chúng ta không cần chỉnh sửa gì cả, vì giao diện của việc thêm style vào cho TextView có khác gì với không thêm đâu. Nhưng chúng ta cũng phải thực hành tiếp bước sau đây. Vì chắc bạn đã hiểu, Style giúp định nghĩa ra các thuộc tính chung nhất cho các view trong Android, nên khi áp dụng Style vào view rồi, chúng ta cũng nên bỏ đi khác khai báo trùng lắp giữa Style và view được áp dụng Style đó.

Vì vậy hãy quay trở lại activity_main.xml. Bạn vẫn để chế độ thiết kế ở tab Text để chỉnh sửa cho dễ. Chúng ta sẽ bỏ đi các thuộc tính dư thừa, và TextView lúc bấy giờ chỉ còn như sau.

Bạn có thể thấy rằng với Style thì việc định nghĩa ra các widget tương tự nhau là dễ dàng, chẳng những vậy chúng còn giúp rút ngắn khai báo các widget của bạn nữa. Thật là tiện lợi.

Và đây là tổng thể code của màn hình activity_main.xml cho đến lúc này.

Sử Dụng Theme

Với bài học hôm trước khi đã nói về cách sử dụng Style, mình hi vọng các bạn đã nắm vững cách dùng resource đặc biệt này để làm cho giao diện của ứng dụng trông nhất quán hơn. Bên cạnh đó, ngoài mục tiêu nhất quán mà Style mang đến, bạn nên biết rằng chúng còn giúp bạn xây dựng giao diện được gọn gàng và nhanh hơn nữa. Nếu bạn có bất kỳ ứng dụng nào sắp được viết, hay đang viết dở dang, thì bạn nên kiểm chứng lại xem bạn đã sử dụng Style chưa, nếu chưa thì bạn nên áp dụng từ bây giờ. Không phải widget nào cũng bắt buộc bạn phải tạo Style cho nó, nhưng một ứng dụng sẽ luôn có hầu hết các Style cho các loại widget đấy nhé, càng nhiều Style thì tính chuyên nghiệp càng cao.

Và bài học hôm nay mình sẽ nói đến kiến thức còn lại có liên quan đến Style, đó là kiến thức về Theme.

Định Nghĩa Theme

Nếu bạn đã nắm rõ Style rồi, thì với Theme sẽ thực sự dễ dàng. Vì Theme chỉ khác Style ở ba chỗ.

• Khác nhau đầu tiên là Theme áp dụng Phong Cách cho toàn bộ Activity (toàn bộ màn hình) hoặc toàn bộ ứng dụng, còn Style thì áp dụng Phong Cách cho các widget.
• Khác nhau thứ hai là với Theme bạn không phải định nghĩa ra bất kỳ Theme mới nào mà chỉ kế thừa từ các Theme được xây dựng sẵn của hệ thống, nói như vậy có nghĩa là hệ thống đã định nghĩa hết các Phong Cách cho ứng dụng của bạn rồi, bạn có thể thấy là nếu bạn có tạo mấy chục project mới hiện tại bây giờ thì nó cũng sẽ có giao diện và màu sắc ban đầu giống như nhau, đó là vì Theme, trừ khi bạn thay đổi các giá trị ban đầu đó như bài học và thực hành hôm nay.
• Và khác nhau cuối cùng là ở cách áp dụng Theme vào ứng dụng, lát nữa chúng ta sẽ cùng nhau xem qua.

Còn lại thì cách thức khai báo và cấu trúc của Theme ở XML resource không khác gì Style cả.

Có Bao Nhiêu Theme Trong Android?

Chúng ta đang nói đến làm sao biết được hệ thống có bao nhiêu Theme mà kế thừa? Thực ra thì bạn chỉ cần nhớ đến bộ ba các Theme này mà thôi.

• Theme
• Theme.Holo
• Theme.Material

Trong đó chắc bạn cũng biết giao diện của project mà bạn tạo ra ở giai đoạn này là giao diện theo Theme Material, nếu bạn muốn biết thêm kiến thức về phong cách Material thì có thể xem thêm ở đây. Trước khi đi vào chi tiết cách làm việc với Theme Material thì mình mời các bạn cùng xem sơ qua từng Theme một chút.

Theme Đầu Tiên Chỉ Có Tên Là “Theme”

Từ giai đoạn đầu của Android, Android 1.0, hệ điều hành này đã định nghĩa ra một Theme có cái tên đơn giản là “Theme”. Khi đó nếu bạn tạo mới một project, thì giao diện của các thành phần trong app sẽ trông như thế này. Vì rất khó để quay trở lại ngày xưa ấy chụp lại hình, nên mình “chôm” trên mạng một màn hình mang Theme có tên là “Theme” cho các bạn xem.

Bạn có thể thấy rằng tên của ứng dụng (ứng dụng này tên là RelativeLayoutDemo) được hiển thị ở một thanh mỏng màu xám phía trên, thanh này được gọi là Title Bar. EditText lúc này là một hình chữ nhật bo tròn góc, khi nhấn vào thì có viền cam xung quanh. Còn các Button thì màu xám và có hiệu ứng hơi nổi lên. Lúc này giao diện của ứng dụng chưa mang phong cách phẳng như bây giờ.

Theme Được Nâng Cấp Sau Đó Có Tên “Theme.Holo”

Theme Holo được trình làng cùng với sự ra đời của Android 3.0. Và mình cũng “chôm” hình ảnh này cho bạn xem. Với Theme Holo thì khi bạn tạo mới một project thì màn hình với các widget được tạo ra sẽ trông như thế này đây.

Bạn hãy so sánh sự nâng cấp này. Với Theme Holo thì Title Bar và phần thân giao diện có cùng màu, và được ngăn cách nhau bởi một vạch mỏng, ngoài ra thì Title Bar còn được miễn phí hiển thị thêm icon của app nữa. Uhm… thực ra thì Title Bar ở giai đoạn này đã được gọi là Action Bar, lý do vì sao thì qua bài học về Menu chúng ta sẽ nói rõ hơn. EditText thì không còn hình chữ nhật to nữa mà là một thanh mỏng, khi nhấn vào thì thanh này chuyển thành màu xanh, bình thường thì màu xám. Các Button thì trông phẳng hơn chứ không nổi nữa.

Và Bây Giờ Theme Mới Nhất Có Tên “Theme.Material”

Từ Android 5.0, Android đã khoác lên mình giao diện mới, và khi đó các ứng dụng có thêm một Theme mới đó là Material mà bạn đang làm quen ở các bài học của Yellow Code Books này.

Với Material thì Action Bar không còn icon app nữa, màu sắc của Action Bar so với phần thân cũng khác nhau. EditText được hiển thị bằng một thanh thẳng, không còn móc vuông hai bên, thanh này cũng có màu xám khi chưa nhấn vào, và hiển thị theo màu khác nếu bạn nhấn vào nó. Button thì vẫn phẳng, nhưng text được tự động in hoa, với lại font chữ cũng nhỏ hơn chút đỉnh so với Button ở Theme Holo.

Chuyện Tương Thích Ngược

Thực tế thì từ nào giờ Android chỉ mới có ba Theme ở ba giai đoạn khác nhau như mình đã trình bày ở trên. Nhưng đau đầu ở chỗ, như bạn biết Theme Material chỉ xuất hiện từ Android 5.0 trở lên, sẽ như thế nào nếu bạn muốn các thiết bị có cài Android trước 5.0 vẫn mang giao diện tươi đẹp của Material? Câu hỏi này đã được Google dự liệu trước, và kết quả là ngoài ba Theme bạn đã biết, nay Google ra thêm vài Theme nữa để có thể hỗ trợ ngược lại các đời hệ điều hành cũ.

Nhưng bạn có thể tin chắc rằng dù cho có bao nhiêu Theme được hệ thống tạo ra sẵn, thì chung quy lại chúng chỉ gói gọn phong cách vào ba Theme chủ lực như mình đã liệt kê trên đây, các Theme còn lại nằm ngoài ba loại trên đều là các Theme giúp tương thích ngược cả.

Vậy Có Thể Làm Gì Được Với Theme?

Như bạn có thể thấy, với mỗi thời kỳ của Android, hệ thống sẽ tạo ra một Theme và buộc ứng dụng của bạn phải theo. Điều này gây chút bối rối với một số bạn đã từng lập trình game nay muốn làm quen với lập trình ứng dụng, vì với game các bạn được phép tự do thoải mái thiết kế phong cách của các thành phần giao diện theo design có sẵn, nhưng với ứng dụng, mọi thứ bị giới hạn bởi Theme.

Nhưng như vậy không có nghĩa là Theme sẽ cứng nhắc và bắt bạn phải phục tùng theo. Theme được hiểu đúng đắn là “mọi thứ có sẵn ban đầu nhưng bạn vẫn có thể làm nó khác đi”. Có sẵn là để bạn làm nhanh các ứng dụng, mà vẫn có được phong cách giao diện hiện đại. Làm cho khác đi là làm cho ứng dụng của bạn có những đặc trưng riêng, vừa mang phong cách hòa hợp với Theme của hệ thống, vừa mang phong cách riêng của bạn.

Và bài học hôm nay tập trung vào làm thế nào để tạo ra phong cách riêng đó. Nói dông dài từ đầu giờ chỉ với mục đích này thôi đó bạn, khổ ghê, hic!

Cách Sử Dụng Theme

Tạo Theme

Cách tạo ra một Theme giống với cách tạo một Style ở bài trước, mình xin tóm tắt lại như sau.

• Theme cũng như Style được để ở thư mục res/values/ với tên file là styles.xml.

• Mỗi Theme cũng được chứa trong thẻ style y như Style vậy.

• Bạn phải đặt tên cho Theme ở thuộc tính name.
• Bạn có thể thiết lập các phong cách riêng cho Theme thông qua các thẻ item bên trong Theme này.
• Bạn phải chỉ định parent là Theme nào của hệ thống, hoặc nếu không phải Theme của hệ thống thì là một Theme mà có parent của nó là Theme hệ thống.

Sử Dụng Theme

Nếu như khai báo Theme giống hoàn toàn với khai báo Style, thì sử dụng Theme lại khác Style hoàn toàn.

Khác nhau thứ nhất chắc bạn cũng biết rồi, đó là Style được dùng trong các widget, còn Theme chỉ được chỉ định cho từng Activity (từng màn hình) hoặc cho cả ứng dụng mà thôi. Cách thức áp dụng Theme cho màn hình hay cho ứng dụng sẽ được mình nói chung ở phần thực hành bên dưới luôn nhé.

Khác nhau thứ hai là nếu như để sử dụng Style, ở widget bạn cần chỉ định ở thuộc tính style như này.

Thì với Theme bạn phải dùng thuộc tính android:theme, mời bạn cùng làm quen ở bài thực hành bên dưới luôn nhé.

Thực Hành Với Theme Của TourNote

Bài hôm nay chúng ta hãy cùng xem qua các cách sử dụng Theme, và rồi cuối cùng sẽ cùng thực hành việc chỉnh sửa Theme cho TourNote sao cho đúng với thiết kế ban đầu của ứng dụng nhé bạn.

Trước hết bạn hãy mở file styles.xml ở thư mục res/values/ lên trước. Với việc thực hành ở bài trước, bạn đã tạo ra một Style có tên là InformationTextView. Bỏ qua Style InformationTextView này ra thì bạn có thể thấy một Style khác có tên là AppTheme, đây chính là Theme được tạo sẵn, Theme này kế thừa từ Theme cha có tên là Theme.AppCompat.Light.DarkActionBar, như bạn có thể đoán được thì Theme này là Theme Material nhưng giúp tương thích ngược lại với các máy Android trước 5.0.

Tạm thời chúng ta không thay đổi các thuộc tính name hay parent của Theme này làm gì, mà hãy xem qua cách sử dụng Theme như thế nào trong ứng dụng TourNote.

Sử Dụng Theme

Bạn cũng đã biết Theme giúp tạo phong cách cho màn hình hay toàn ứng dụng. Vậy cách tốt nhất để ứng dụng Theme là ở đâu bạn có thể đoán ra luôn không? Đó chính là file AndroidManifest.xml. Bạn hãy mở file này lên để kiểm chứng nhé.

Áp Dụng Theme Cho Toàn Bộ Ứng Dụng

Nếu muốn áp dụng Theme cho toàn bộ ứng dụng, thì bạn nên gọi đến Theme thông qua thuộc tính android:theme của thẻ application trong file Manifest. Điều này mình cũng có nói sơ ở bài học về Manifest rồi nhé.

Áp Dụng Theme Cho Từng Activity

Nếu bạn có những Theme cho riêng từng Activity, thì bạn nên tìm tới thẻ activity cần áp dụng Theme và cũng khai báo thông qua thuộc tính android:theme như với thẻ application vậy.

Màn hình dưới đây mình ví dụ một Theme cho Activity duy nhất của TourNote, bạn chỉ cần nhớ thôi chứ đừng chỉnh sửa file Manifest của TourNote như này nhé.

Chỉnh Sửa Theme Cho TourNote

Giờ thì chúng ta mới vào phần thực hành chính. Bạn hãy đảm bảo là đang mở file styles.xml nhé. Chúng ta cùng nhìn lại “dung nhan” của TourNote trước khi làm cho nó đẹp hơn nào.

Bắt đầu, bạn hãy thử thay giá trị ở parent của Theme mặc định thành Theme.AppCompat.Light.NoActionBar. Có nghĩa chúng ta thay đổi DarkActionBar thành NoActionBar, bạn cũng có thể tưởng tượng chuyện gì xảy ra với TourNote rồi đúng không, file styles.xml của chúng ta trông như sau.

Lúc này khi run ứng dụng lên. Opps… mất tiêu Action Bar rồi!!!

Không được rồi, nhất định là không được! Action Bar khá là quan trọng trong ứng dụng TourNote của chúng ta. Mình chỉ xúi dại bạn vọc chơi cho vui thôi. Giờ thì chúng ta Ctrl-Z (Mac là Command-Z) để styles.xml về lại hiện trạng ban đầu nhé.

Chúng ta tiếp tục thực hành. Có thể là bạn quên, mình xin nhắc lại là design của TourNote ban đầu có một bộ màu sắc khác với màu mặc định mà bạn thực hành bấy lâu nay, mời bạn xem lại.

Vậy phải làm sao? Bạn có thể xem thêm ở link này sẽ có được thông tin chi tiết hơn. Nhưng cơ bản với Theme Material, Android cung cấp cho chúng ta một thông tin về các thuộc tính mà chúng ta có thể chỉnh sửa như hình sau.

Bạn có thể thấy các text màu trắng cho bạn biết các name của các item, đây là các item về màu sắc, mà bạn có thể override từ Theme cha. Override ở đây có nghĩa là bạn định nghĩa lại giá trị mới cho nó, dù là ở Theme cha đã định nghĩa rồi.

Để bắt đầu override thì bạn hãy quay trở lại với Theme AppTheme và tiến hành chỉnh sửa như sau.

• Với item có name là colorPrimary, bạn đổi giá trị của nó từ @color/colorPrimary sang #00BCD4, đây chính là mã màu theo mã Hex, chúng ta sẽ nói đến cách sử dụng màu và resource liên quan đến màu ở bài sau. Như vậy là bạn vừa chỉnh sửa xong màu cho Action Bar.
• Với item có name là colorPrimaryDark, bạn đổi giá trị của nó từ @color/colorPrimaryDark sang #0097A7. Như vậy là bạn vừa chỉnh sửa xong màu cho Status Bar, đây là thanh trạng thái của ứng dụng, thông thường thì màu Status Bar sẽ cùng tông màu với Action Bar nhưng hơi tối hơn một xíu.
• Với item có name là colorAccent, bạn đổi giá trị của nó từ @color/colorAccent sang #FFEB3B. Như vậy là bạn vừa chỉnh sửa xong màu cho các điểm nhấn trong app, các điểm nhấn này như là màu của EditText khi user nhấn vào, màu của CheckBox, RadioButton, hay của Tab bar đều chịu ảnh hưởng bởi màu này.
• Ngoài ra thì bạn hoàn toàn có thể thêm vào các item với các name còn lại theo hình trên đây, như windowBackground hay navigationBarColor rồi cho chúng nó một màu sắc nào đó để thử nghiệm chơi, nhưng với TourNote thì mình chỉ muốn bạn chỉnh ba màu trên đây cho Theme là đủ.

Với mỗi màu bà bạn chỉnh sửa ở bước này, Android Studio đều hiển thị nó ra ở thanh bên trái của editor, rất trực quan đúng không.

https://i0.wp.com/yellowcodebooks.com/wp-content/uploads/2019/06/Hinh13.png?resize=300%2C173&ssl=1 300w" data-lazy-loaded="1" sizes="(max-width: 667px) 100vw, 667px" loading="eager" style="box-sizing: border-box; height: auto; max-width: 100%; border-style: none; margin: 0px; vertical-align: bottom;">

Giờ thì chúng ta run app lên để xem kết quả nhé.

Sử Dụng String

Chúng ta đã cùng nhau xem qua cụ thể hai (thực ra là một) resource của Android rồi. Đó là:

• Style
• Và Theme

Hôm nay chúng ta lại xem đến cách sử dụng một dạng resource nữa. Đó là resource string.

Thoạt nghe qua các bạn có thể nghĩ là rất dễ, vì dù sao khái niệm string cũng không cao siêu gì. Nhưng thực ra nếu hiểu đầy đủ về string thì mình nghĩ các bạn có thể làm ra được nhiều điều hay ho cho ứng dụng của các bạn nữa đấy. Hãy cùng nhau khám phá nào.

Giới Thiệu Về String Resource

String là một dạng resource khá cơ bản trong Android, chúng đơn giản chỉ là một chuỗi hoặc một danh sách nhiều chuỗi. Nhiệm vụ cơ bản của string là cung cấp text dựng sẵn cho các view, đó có thể là một nhãn của TextView, nhãn của Button, hint cho EditText,… Sở dĩ mình dùng từ text dựng sẵn, là vì đây là các text được định nghĩa trước và gán vào các view khi thiết kế, để khi người dùng mở app lên thì tất cả các text này đã được các view sử dụng đến rồi. Nhưng nếu trong quá trình sử dụng ứng dụng, người dùng thêm vào các content, như là các ghi chú, hay các nhãn cho category trong TourNote, thì đó lại là các text khác không thuộc phạm vi quản lý của resource string nhé.

Như bạn đã thực hành ở Bài 8, resource string được để trong thư mục res/values/ (hoặc res/values-xxx/ cho alternative resource), và nằm trong file strings.xml.

Nếu click đúp vào file strings.xml này ra bạn sẽ thấy thẻ gốc cho file này (hay cho tất cả các file nào khác bên trong thư mục values/) là thẻ resources. Bên trong thẻ resources này là các thẻ string. Cụ thể các thẻ string này sẽ được định nghĩa và sử dụng như thế nào thì chúng ta cùng qua các phần ở bên dưới.

Sử Dụng Plain String

Plain String, mình không biết dịch ra tiếng Việt như thế nào, nên nói tạm rằng đây là “string không có định dạng, hay không có phong cách”. Nó đơn giản là một dạng cơ bản nhất của string, các text trong plain string chỉ đơn giản là các ký tự bình thường, hoặc ký tự “\n” để tách xuống một dòng mới. Bạn sẽ làm quen với các dạng nâng cao khác của string ở các mục tiếp theo bên dưới bài học.

Khai Báo Plain String

Mỗi một plain string được khai báo trong một thẻ string (1), và được đặt cho một cái tên theo sau thuộc tính name (2). Sau cùng là nội dung của plain string đó (3).

Truy Xuất Đến Plain String

Từ bất kỳ file XML nào, hay từ file AndroidManifest.XML, bạn có thể truy xuất đến plain string này bằng cách gọi @string/tên_string (như những gì bạn đã làm quen ở Bài 8).

Còn nếu từ Java source code, bạn có thể chỉ định đến tên_string này bằng cách gọi R.string.tên_string. Chẳng hạn hàm sau sẽ set text về cho một TextView ở Java code.

Sử Dụng Styled String

Ngược lại với plain string chỉ giúp hiển thị các ký tự rất đỗi bình thường. Thì styled string là một loại “string có phong cách”, nó giúp bạn tạo một string trông có phần điệu nghệ hơn, như in nghiêng, in đậm, hay có thể hiển thị các ký tự đặc biệt,…

Dưới đây là các cách sử dụng từng loại styled string mà bạn nên biết.

Hiển Thị Dấu (‘), Dấu (\) Và Dấu (“)

Điều đầu tiên với plain string, là bạn không thể khai báo ba ký tự đặc biệt này được. Ví dụ khai báo string như sau sẽ bị hệ thống báo lỗi. Hoặc nếu không báo lỗi như trường hợp sử dụng dấu nháy kép ở dòng thứ ba, thì cũng sẽ không thể hiển thị dấu nháy này lên màn hình được.

Khai Báo Các Dấu Đặc Biệt Này

Vậy khi bạn gặp ba ký tự đặc biệt trên, với cách giải quyết rất đơn giản, bạn hãy đặt thêm một ký tự gạch chéo ngược (\) ở trước mỗi ký tự đặc biệt này.

Một ghi nhớ nhỏ, là với string chỉ có chứa một loại ký tự (‘), thì bạn còn có một cách khác là sử dụng dấu nháy kép bao hết string này, khi đó bạn không cần dùng đến ký tự (\) nữa.

Truy Xuất Đến Các String Đặc Biệt Này

Chúng ta vẫn truy xuất đến các string này thông qua XML hay Java code giống như với plain string vậy.

Hiển Thị Các Ký Tự (&), (<), (>), (…)

Ngoài ba dấu đặc biệt đã nói ở trên, string XML của Android còn có các ký tự đặc biệt nữa mà bạn không thể dùng trực tiếp chúng được, bạn phải dùng code để hiển thị. Bạn xem ví dụ lỗi.

Trường hợp dòng thứ ba, với ký tự (…) thì hệ thống không báo lỗi gì đâu, và khi run ứng dụng thì ký tự này cũng hiển thị tốt, không như trường hợp của dấu (“) trên kia. Nhưng vì hệ thống có gợi ý không nên dùng thẳng ra như vậy, nên mình liệt kê nó vào danh sách phải thay thế này.

Khai Báo Các Ký Tự Đặc Biệt Này

Vậy tóm lại là bạn phải thay chúng bằng các mã như sau (không có khoảng trắng đằng sau các ký tự & nhé).

– & thay bằng & amp;
– < thay bằng & lt;
– > thay bằng & gt;
– … thay bằng & #8230;

Truy Xuất Đến Các String Đặc Biệt Này

Cũng tương tự như plain string.

Tạo Phong Cách Bằng Thẻ HTML

Sẽ có lúc bạn rất cần đến các tùy chỉnh in nghiêng, in đậm, hay gạch chân một vài ký tự nào đó trong một item string. Vậy lúc nào cần thì bạn hãy nhớ bài học hôm nay.

Cách Tạo Phong Cách Cho String Bằng Thẻ HTML

Với sự hỗ trợ của thẻ HTML, bạn chỉ có thể định dạng được ba phong cách cho string như sau.

• in đậm text
• in nghiêng text
• gạch chân text

Bạn có thể thử nghiệm với string empty_note của TourNote như sau.

Truy Xuất Đến Các String Dùng Thẻ HTML Này

Nếu truy xuất đến string có dùng thẻ HTML này từ các file resource XML khác, thì bạn cứ dùng như plain string bằng cách gọi @string/tên_string.

Còn khi truy xuất từ file Java. Nếu bạn dùng hàm set text như ví dụ với plain string trên kia thì các thẻ HTML sẽ hoạt động bình thường. Nhưng nếu bạn dùng hàm này thì định dạng HTML sẽ không thấy hiển thị đâu nhé setText(getString(R.string.empty_note));, vì hàm getString() sẽ loại bỏ tất cả các thông tin liên quan đến thẻ HTML ra khỏi chuỗi mất rồi.

Bạn hãy tự thử nghiệm, thì màn hình TourNote sẽ trông như sau.

Tạo Phong Cách Bằng CDATA

Với việc dùng các thẻ HTML như trên để tạo phong cách cho string, bạn chỉ có thể làm cho vài ký tự nào đó in đậm, in nghiêng, hay gạch chân. Vậy câu hỏi là với các định dạng HTML khác thì sao, khi đó CDATA là một trong những câu trả lời cho câu hỏi này.

Tạo Phong Cách Cho String Bằng CDATA

Bạn vẫn khai báo như một plain string bình thường, chỉ có khác là ở nội dung của string, bạn phải bao bọc lấy string bằng một khai báo CDATA (1), bên trong CDATA là các định dạng theo HTML mà bạn biết (2).

Truy Xuất Đến String Dùng CDATA

Bạn không thể truy xuất đến string dạng này thông qua XML. Mà phải gọi thông qua hàm Html.fromHtml(getString(R.string.example_for_cdata));. Bạn nhìn code ví dụ sau.

Khi bạn chạy lại TourNote thì có thể thấy nội dung text được định dạng khá đẹp như này.

Tạo Phong Cách Bằng SpannableString

Uhm, có thể có bạn không biết cách dùng thẻ HTML. Hoặc có thể bạn không thích định dạng string thông qua các thẻ HTML này. Vậy thì có một cách khác thay thế HTML hoàn hảo nhưng cũng rất mạnh mẽ, đó là SpannableString.

Cách Tạo Phong Cách Cho String Bằng SpannableString

Như bạn thấy, SpannableString là một Java class, vậy chắc chắn chúng ta phải tương tác với Java code rồi. Nhưng trước tiên bạn có thể định nghĩa một string trong XML trước cũng được. Như ví dụ mình khai báo một string sau.

Bạn nhớ rằng khi khai báo một string dài trong XML, việc bạn tự nhấn enter xuống hàng chỉ là để bạn quản lý nội dung string rõ ràng hơn, khi run ứng dụng, thì các enter đó sẽ không được thể hiện thành các xuống hàng thực sự, như những xuống hàng ở hình trên đây. Nếu bạn muốn xuống hàng thực sự khi run ứng dụng, thì hãy dùng ký tự “\n”, ký tự này cũng xuất hiện ở hình trên đấy nhé.

Và với SpannableString thì mình muốn đoạn XML như trên sẽ được chỉnh sửa như sau.

• String (1) sẽ có màu đỏ.
• String (2) sẽ có font lớn gấp 2 lần các string xung quanh.
• String (3) khi click vào sẽ hiển thị một thông báo dạng Toast.
• String (4) khi click vào sẽ dẫn đến trang chủ của Yellow Code Books.

Bạn tham khảo code sau.

Để cho string hiển thị thêm đẹp hơn, thì bạn có thể kết hợp cả SpannableString lẫn các thẻ HTML như đã nói ở trên vào khai báo string nhé. Bạn hãy tự thử nghiệm xem.

Xong, chúng ta vừa kết thúc làm quen với resource kế tiếp của Android, resource kiểu string. Tuy nhiên các cách sử dụng string trên đây vẫn chưa phải là tất cả những thú vị mà Android mang lại, chúng ta vẫn còn một số cách hiển thị string nữa, như string có định dạng, string array, hay string theo số lượng sẽ được mình nói đến ở bài kế tiếp nhé.

Tiếp Tục Nói Về Sử Dụng String

Các bạn có thể thấy rằng, với một chủ đề đơn giản là tập trung vào một loại resource bình thường thôi, vậy mà chúng ta cần đến hai bài học mới có thể nói đủ về nó. Thật ra thì khi nhìn vào resource này, chúng ta ngỡ là nó đơn giản. Nhưng bạn nên nhớ rằng, string cũng là một dạng resource rất quan trọng, nó vừa giúp ứng dụng chuyền tải được nội dung của từng view đến với người dùng, hướng dẫn người dùng cách sử dụng ứng dụng, nó còn có thể giúp làm ứng dụng trông đẹp hơn nữa.

Và bài học hôm nay chúng ta cùng đi đến các loại string còn lại mà bài hôm trước còn đang nói dở dang.

Sử Dụng Formatting String

Nếu như bài hôm trước các bạn đã làm quen đến styled string, đó là các cách giúp bạn hiển thị string trông đẹp hơn nhờ có các phong cách kèm theo, như màu sắc, độ đậm, độ lớn,… Thì hôm nay chúng ta làm quen với một dạng string khác, mình tạm gọi rằng đây là một “string được định dạng”.