Trong hướng dẫn này chúng ta sẽ tìm hiểu các bước cơ bản cho thiết kế Material Design cùng với cách tạo menu điều hướng dùng RecyclerView.
Material Design cung cấp thiết lập các thuộc tính cho phép tùy biến Material Design Color Theme. Nhưng chúng ta chỉ sử dụng năm thuộc tính cơ bản để tùy chỉnh theme chung.
- colorPrimaryDark - Đây chính là màu tối nhất của ứng dụng, chủ yếu áp dụng đối với nền thanh thông báo (notification bar).
- colorPrimary - Đây là màu sắc chính của ứng dụng. Màu sắc này sẽ được áp dụng như là nền thanh công cụ.
- textColorPrimary - Đây là màu sắc chính của văn bản. Áp dụng cho tiêu đề thanh công cụ.
- windowBackground - Đây là màu nền mặc định của ứng dụng.
- navigationBarColor - màu này xác định màu nền của thanh điều hướng ở dưới màn hình ứng dụng.
I. Tạo Material Design Theme
1. Trên Eclipse, chọn File → New → Android Application Project và điền vào các thông tin cần thiết. Khi được xác nhận chọn Activity mặc định, chọn Blank Activity. Ở project này chọn minSDK là API 13, và targetSDK, compile là API 22. Lưu ý bạn nên download SDK của Android 5 về máy để thực hiện.
2. Mở res ⇒ values ⇒ strings.xml và thêm vào chuỗi bên dưới.
3. Mở res ⇒ values ⇒ colors.xml và thêm các giá trị màu sắc dưới đây. Nếu không tìm thấy colors.xml, tạo ra một tập tin colors.xml mới.
https://github.com/levientrinh/MaterialDesign/blob/master/colors.xml
4. Mở res ⇒ values ⇒ dimens.xml và thêm các giá trị dưới đây.
https://github.com/levientrinh/MaterialDesign/blob/master/dimens.xml
5. Mở styles.xml dưới res ⇒ values và thêm styles dưới đây. Các style được định nghĩa trong styles.xml này là chung cho tất cả các phiên bản Android. Ở đây tôi đặt tên theme là MyMaterialTheme.
https://github.com/levientrinh/MaterialDesign/blob/master/styles1.xml
Nếu như bạn gặp lỗi Can't Find Theme.AppCompat.Light for... hãy xử lý bằng cách sau.
- Import project Android ở đường dẫn sau vào workspace (android-sdk\extras\android\support\v7\appcompat).
- Nhấn chuột phải vào project hiện tại, chọn Properties, chọn Android ở khung bên trái. Trong vùng Library ở khung bên phải, nhấn Add và chọn project bạn vừa import vào.
6. Bây giờ dưới res, tạo ra một thư mục có tên là values-v21. Bên trong values-v21, tạo ra một styles.xml như dưới đây. Style này chỉ áp dụng cho Android Lollipop.
https://github.com/levientrinh/MaterialDesign/blob/master/style2.xml
7. Bây giờ chúng ta đã có style Material Design cơ bản. Để áp dụng style, mở AndroidManifest.xml và sửa đổi android:theme trong thẻ .
android:theme = "@style/MyMaterialTheme"
Sau khi áp dụng style, AndroidManifest.xml của bạn sẽ trông giống như dưới đây.
https://github.com/levientrinh/MaterialDesign/blob/master/AndroidManifest.xml
Bây giờ nếu chạy ứng dụng, bạn có thể nhìn thấy màu sắc thanh thông báo thay đổi (nên test trên thiết bị chạy Android 5 để thấy).
II. Thêm toolbar (ActionBar)
Thêm toolbar rất dễ dàng. Tất cả bạn phải làm là phải tạo ra một layout riêng biệt cho toolbar và chèn nó trong layout khác bất cứ nơi nào bạn muốn toolbar được hiển thị.
1.Tạo một file xml có tên toolbar.xml dưới res ⇒ layout và thêm thành phần android.support.v7.widget.Toolbar. Điều này tạo ra thanh công cụ với chiều cao và them cụ thể.
https://github.com/levientrinh/MaterialDesign/blob/master/toolbar.xml
2. Mở file layout của Main Activity (activity_main.xml) và thêm toolbar sử dụng thẻ .
https://github.com/levientrinh/MaterialDesign/blob/master/activity_main1.xml
Chạy ứng dụng và xem thanh công cụ hiển thị trên màn hình hay không.
Bây giờ thêm vào toolbar tiêu đề và biểu tượng tìm kiếm.
3. Bạn hãy tìm cho mình một icon search mà mình thích hoặc dùng icon trong source code ở cuối bài để thêm vào project.
Để thực hiện, nhấn chuột phải vào project và chọn New → Other → Android → Android Icon Set. Trong màn hình đầu tiên, chọn Action Bar and Tab Icons, và đặt tên ic_action_search trong mục Icon Name.
Ở màn hình tiếp theo, chọn Image chỗ Foreground và chọn đường dẫn đến tập tin icon ở mục Image File.
4. Một khi icon đã được import, mở file main.xml ở dưới res -> menu và thêm vào các mục như dưới đây.https://github.com/levientrinh/MaterialDesign/blob/master/main.xml
5. Bây giờ mở MainActivity.java và làm thay đổi ở dưới.
> Kế thừa ActionBarActivity
> Kích hoạt toolbar bằng cách gọi setSupportActionBar ()
> Override onCreateOptionsMenu () và onOptionsItemSelected () để kích hoạt các action trên toolbar.
https://github.com/levientrinh/MaterialDesign/blob/master/MainActivity1.java
Sau khi thực hiện các thay đổi ở trên, nếu chạy ứng dụng, bạn sẽ thấy biểu tượng tìm kiếm.
III. Thêm Navigation Drawer
Thêm Navigation Drawer như chúng ta làm trước đây, nhưng thay vì nếu sử dụng ListView cho các mục menu, chúng ta sử dụng RecyclerView trong Material Design. Vì vậy, chúng ta hãy xem làm thế nào để thực hiện với RecyclerView.
1. Trong thư mục của dự án, tạo ra ba package tên là activity, adapter, model (chẳng hạn com.lvt.activity) và di chuyển MainActivity.java của bạn đến gói activity. Điều này sẽ giữ cho dự án được tổ chức hiệu quả.
2. Vào File Import -> Existing Android code into workspace -> Browse (Tới sdk/extras/ android/support/v7/rycyclerview) Nhấn OK -> Nhấn Finish
Nhấp chuột phải vào project RycyclerView -> Properties -> Android (khung trái) -> đánh dấu chọn isLibrary -> Apply -> OK.
Bây giờ click chuột phải vào dự án của bạn -> Properties -> Android (khung trái) -> Addchọn RycyclerView-> Apply -> OK.
Bây giờ nhấp chuột phải vào project của bạn một lần nữa → Build Path-> Configure Build Path... -> Dưới thẻ Project, thêm RycyclerView.
3. Dưới package model, tạo ra một lớp có tên NavDrawerItem.java với code dưới đây. Model này định nghĩa cho từng mục menu trái của Navigation Menu.
https://github.com/levientrinh/MaterialDesign/blob/master/NavDrawerItem.java
4. Dưới res ⇒ layout, tạo một xml tên nav_drawer_row.xml và thêm đoạn code dưới đây. Layout này dành cho từng item trong navigation menu. Nếu bạn muốn tùy chỉnh item này, bạn phải làm những thay đổi trong tập tin này. Bây giờ nó chỉ có một TextView.
https://github.com/levientrinh/MaterialDesign/blob/master/nav_drawer_row.xml
5. Tìm kiếm icon nào đó tượng trưng cho profile, hoặc dùng icon trong source code bài viết. Rồi chép nó vào thư mục drawable dưới res, nếu chưa có hãy tạo nó. Bước này là tùy chọn, nhưng icon này sẽ được hiển thị trên header của navigation menu.
6. Tạo một layout khác tên là fragment_navigation_drawer.xml và thêm đoạn code dưới đây. Layout này chứa header để hiển thị thông tin người dùng và RycyclerView để hiển thị list view.
https://github.com/levientrinh/MaterialDesign/blob/master/fragment_navigation_drawer.xml
7. Để RycyclerView được tùy chỉnh, chúng ta dùng các lớp adapter để biểu diễn các layout tùy biến. Dưới gói adapter, tạo một lớp tên là NavigationDrawerAdapter.java và dán đoạn code sau.
https://github.com/levientrinh/MaterialDesign/blob/master/NavigationDrawerAdapter.java
8. Dưới package adapter, tạo một fragment mới tên là FragmentDrawer.java.
https://github.com/levientrinh/MaterialDesign/blob/master/FragmentDrawer.java
9. Cuối cùng mở tập tin activity_main.xml và chỉnh sửa layout như phía dưới. Trong layout này chúng ta sẽ thêm android.support.v4.widget.DrawerLayout để hiển thị Navigation Drawer Menu.
https://github.com/levientrinh/MaterialDesign/blob/master/actiivty_main2.xml
10. Mở MainActivity.java của bạn và thay đổi.
Thực thi FragmentDrawer.FragmentDrawerListener và ghi đè onDrawerItemSelected ().
Tạo một thể hiện của FragmentDrawer và thiết lập các sự kiện chọn.
https://github.com/levientrinh/MaterialDesign/blob/master/MainActivity2.java
Bây giờ nếu chạy ứng dụng, bạn có thể xem navigation drawer menu với một tiêu đề và một vài danh sách các mục trong đó.
IV. Thực thi các sự kiện chọn cho các item trên navigation drawer menu
Mặc dù navigation drawer menu hoạt động, bạn có thể thấy các lựa chọn trong danh sách các mục không làm việc. Đó là bởi vì chúng ta chưa thực hiện bắt sự kiện cho từng mục của menu.
Như chúng ta thấy có ba mục (Home, Friends & Messages), chúng ta cần phải tạo ra ba lớp Fragment riêng biệt cho mỗi mục menu.
1. Dưới thư mục res → layout, tạo một xml tên fragment_home.xml và thêm mã dưới đây.
https://github.com/levientrinh/MaterialDesign/blob/master/fragment_home.xml
2. Dưới package activity, tạo một lớp mới tên là HomeFragment.java.
https://github.com/levientrinh/MaterialDesign/blob/master/HomeFragment.java
3. Tạo thêm hai lớp Fragment tên FriendFragment.java, MessageFragment.java và file layout fragment_friend.xml và fragment_message.xml và thêm code tương tự như hai bước trên (tham khảo source code ở cuối bài viết).
4. Bây giờ mở MainActivity.java và thay đổi. Trong đoạn mã dưới đây
> DisplayView() phương thức hiển thị khi chọn một mục nào đó. Phương thức này nên được gọi là trong onDrawerItemSelected ().
https://github.com/levientrinh/MaterialDesign/blob/master/MainActivity3.java
Bây giờ nếu chạy ứng dụng, bạn có thể thấy các lựa chọn của menu đã làm việc.
Bạn có thể tải source code tham khảo tạihttps://www.dropbox.com/s/jizad3zqhcdjr1j/MaterialDesign.zip?dl=0
0 comments:
Post a Comment