Thay đổi giao diện của ứng dụng

1. Trước khi bắt đầu

Material là hệ thống thiết kế do Google tạo ra để giúp nhà phát triển xây dựng trải nghiệm kỹ thuật số chất lượng cao cho Android và các nền tảng khác. Hệ thống Material đầy đủ sẽ bao gồm cả các nguyên tắc thiết kế đối với thiết kế hình ảnh, chuyển động và tương tác cho ứng dụng, nhưng lớp học lập trình này chỉ tập trung vào việc thay đổi chủ đề màu sắc cho ứng dụng Android.

Lớp học lập trình này sử dụng mẫu ứng dụng Empty Activity (Hoạt động trống) nhưng bạn có thể sử dụng bất kỳ ứng dụng Android nào mình đang xây dựng. Nếu đang tham gia khoá học này trong phạm vi Khoá học cơ bản về Android thì bạn có thể sử dụng ứng dụng Tip Time (Tính tiền boa).

Điều kiện tiên quyết

  • Cách tạo ứng dụng Android bằng mẫu trong Android Studio.
  • Cách chạy ứng dụng Android trên trình mô phỏng hoặc thiết bị trong Android Studio.
  • Thiết bị Android hoặc trình mô phỏng chạy API 28 (Android 9) hoặc API 29 (Android 10) trở lên.
  • Cách chỉnh sửa tệp XML.

Kiến thức bạn sẽ học được

  • Cách chọn màu hiệu quả cho ứng dụng theo nguyên tắc của Material Design
  • Cách thiết lập màu trong phạm vi giao diện của ứng dụng
  • Các thành phần RGB của một màu
  • Cách áp dụng kiểu cho View
  • Sử dụng Giao diện để thay đổi diện mạo của ứng dụng
  • Hiểu được tầm quan trọng của độ tương phản màu

Bạn cần có

  • Máy tính đã cài đặt phiên bản Android Studio ổn định mới nhất
  • Trình duyệt web và kết nối Internet để truy cập vào các công cụ màu Material

2. Thiết kế và màu sắc

Material Design

Material Design lấy cảm hứng từ thế giới thực và kết cấu của vật thể, bao gồm cả cách thức các đối tượng phản chiếu ánh sáng và đổ bóng. Hệ thống này đưa ra hướng dẫn về cách xây dựng giao diện người dùng của ứng dụng sao cho dễ đọc, hấp dẫn và nhất quán. Material Theming cho phép bạn điều chỉnh Material Design cho ứng dụng, kèm theo hướng dẫn về cách tuỳ chỉnh màu, kiểu chữ và hình dạng. Material Design tích hợp sẵn một giao diện cơ sở mà bạn có thể sử dụng được theo nguyên trạng. Sau đó, bạn có thể tuỳ ý điều chỉnh giao diện này để Material phù hợp với ứng dụng của bạn.

Đôi nét về màu sắc

Màu sắc bao quanh chúng ta, cả trong thế giới thực và thế giới số. Bạn nên biết không phải mọi người đều thấy màu sắc theo một cách, vậy nên điều quan trọng là phải chọn màu để người dùng có thể sử dụng ứng dụng một cách hiệu quả. Hoạt động chọn màu có đủ độ tương phản chỉ là một phần trong quá trình xây dựng các ứng dụng dễ tiếp cận hơn.

55f93a1ea75d644a.png

Một Màu có thể được biểu thị dưới dạng 3 số thập lục phân, #00-#FF (0-255), đại diện cho các thành phần đỏ, xanh lục và xanh dương (RGB) của màu đó. Giá trị càng cao thì thành phần đó càng nhiều.

e0349c33dd6fbafe.png

Lưu ý một màu cũng có thể được xác định bằng cách bao gồm cả giá trị alpha #00-#FF đại diện cho độ trong suốt (#00 = 0% = hoàn toàn trong suốt, #FF = 100% = hoàn toàn không trong suốt). Khi được bao gồm, giá trị alpha là giá trị đầu tiên trong số 4 số thập lục phân (ARGB). Nếu giá trị alpha không được bao gồm thì màu đó được giả định là không trong suốt #FF = 100%.

Tuy nhiên, bạn không cần tự tạo các số thập lục phân. Sẽ có những công cụ chọn màu giúp bạn tạo ra các số đó.

Có thể bạn cũng đã thấy một số ví dụ trong tệp colors.xml của ứng dụng Android, bao gồm cả 100% đen (R=#00, G=#00, B=#00) và 100% trắng (R=#FF, G=#FF, B=#FF):

<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>

3. Giao diện

Một kiểu có thể chỉ định các thuộc tính cho một View, chẳng hạn như màu phông chữ, kích thước phông chữ, màu nền và nhiều thuộc tính khác.

Giao diện là một tập hợp các kiểu được áp dụng cho toàn bộ ứng dụng, hoạt động hoặc hệ phân cấp chế độ xem, chứ không chỉ một View riêng lẻ. Khi bạn áp dụng một giao diện cho ứng dụng, hoạt động, chế độ xem hoặc nhóm chế độ xem, giao diện đó sẽ được áp dụng cho phần tử tương ứng và tất cả phần tử con. Giao diện cũng có thể áp dụng kiểu cho các thành phần không phải chế độ xem, chẳng hạn như thanh trạng thái và nền cửa sổ.

Tạo dự án Hoạt động trống

Nếu đang sử dụng ứng dụng của riêng mình thì bạn có thể bỏ qua phần này. Còn nếu bạn cần sử dụng một ứng dụng để làm việc, hãy làm theo các bước sau để tạo một ứng dụng Empty Activity (Hoạt động trống).

  1. Mở Android Studio
  2. Tạo một dự án Kotlin mới bằng mẫu Empty Activity (Hoạt động trống).
  3. Sử dụng tên "TipTime". Ngoài ra, bạn có thể giữ tên mặc định là "My Appication" (Ứng dụng của tôi) nếu không thực hiện bất kỳ lớp học lập trình nào khác.
  4. Chọn một cấp độ API tối thiểu là 19 (KitKat).
  5. Sau khi Android Studio tạo xong ứng dụng, hãy mở activity_main.xml (app > res > layout > activity_main.xml) (ứng dụng > tài nguyên > bố cục > activity_main.xml).
  6. Nếu cần, hãy chuyển sang chế độ xem Code (Mã).
  7. Thay thế toàn bộ văn bản bằng XML sau:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:gravity="center_vertical"
        android:text="@string/primary_color"
        android:textAllCaps="true"
        android:textSize="12sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/button" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="8dp"
        android:gravity="center_vertical"
        android:text="@string/secondary_color"
        android:textAllCaps="true"
        android:textSize="12sp" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:contentDescription="@string/email_icon"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</LinearLayout>
  1. Mở strings.xml (app > res > values > strings.xml) (ứng dụng > tài nguyên > giá trị > strings.xml).
  2. Thay thế toàn bộ văn bản bằng XML sau:
<resources>
    <string name="app_name">TipTime</string>
    <string name="primary_color">Primary color</string>
    <string name="button">Button</string>
    <string name="secondary_color">Secondary color</string>
    <string name="email_icon">email icon</string>
</resources>
  1. Chạy ứng dụng. Ứng dụng sẽ giống như ảnh chụp màn hình dưới đây.

8949c2a02d8fea15.png

Ứng dụng này bao gồm cả TextView và Button để giúp bạn xem các lựa chọn màu trong một ứng dụng Android thực tế. Chúng tôi sẽ thay đổi màu nút thành màu của giao diện chính trong các bước kế tiếp.

Tìm hiểu về màu của giao diện

Mỗi thành phần của giao diện người dùng trên ứng dụng Android sử dụng màu sắc riêng. Để giúp bạn sử dụng màu sao cho có ý nghĩa trong ứng dụng của mình và áp dụng nhất quán xuyên suốt, hệ thống giao diện sẽ nhóm các màu thành 12 thuộc tính được đặt tên liên quan đến màu được sử dụng trong văn bản, biểu tượng và các tài sản khác. Giao diện của bạn không cần chỉ định tất cả màu này. Bạn sẽ chọn màu chính và màu cấp hai cũng như màu cho văn bản và biểu tượng dựa trên các màu đó.

af6c8e0d93135130.png

Màu "On" (Trên) – dùng cho văn bản và biểu tượng – được dựa trên màu của nhiều khu vực.

#

Tên

Thuộc tính giao diện

1

Chính

colorPrimary

2

Biến thể chính

colorPrimaryVariant

3

Cấp hai

colorSecondary

4

Biến thể cấp hai

colorSecondaryVariant

5

Nền

colorBackground

6

Khu vực

colorSurface

7

Lỗi

colorError

8

Trên màu chính

colorOnPrimary

9

Trên màu cấp hai

colorOnSecondary

10

Trên nền

colorOnBackground

11

Trên khu vực

colorOnSurface

12

Trên màu của lỗi

colorOnError

Xem các màu được xác định trong giao diện mặc định.

  1. Trong Android Studio, hãy mở themes.xml (app > res > values > themes > themes.xm).
  2. Hãy chú ý đến tên giao diện (Theme.TipTime) dựa vào tên ứng dụng.
<style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
  1. Xin lưu ý rằng dòng XML cũng chỉ định giao diện mẹ, Theme.MaterialComponents.DayNight.DarkActionBar. DayNight là giao diện được xác định trước trong thư viện Thành phần Material. DarkActionBar có nghĩa là thanh thao tác sử dụng một màu tối. Cũng giống như một lớp kế thừa các thuộc tính của lớp mẹ, một giao diện sẽ kế thừa các thuộc tính của giao diện mẹ.
  1. Xem qua các mục trong tệp và lưu ý rằng tên mục sẽ tương tự như các tên trong sơ đồ nêu trên: colorPrimary, colorSecondary, v.v.

themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

Không phải tất cả thuộc tính chủ đề màu sắc đều được xác định. Những màu không được xác định sẽ kế thừa màu của giao diện mẹ.

  1. Ngoài ra, bạn có thể nhận thấy rằng Android Studio vẽ một mẫu nhỏ của màu ở lề trái. fe8f8c774074ca13.png
  2. Cuối cùng, lưu ý rằng các màu sẽ được chỉ định là tài nguyên màu, ví dụ: @color/purple_500, thay vì sử dụng trực tiếp một giá trị RGB.
  3. Mở colors.xml (app > res > values > colors.xml) (ứng dụng > tài nguyên > giá trị > colors.xml) và bạn sẽ thấy giá trị thập lục phân cho từng tài nguyên màu. Hãy nhớ #FF đứng đầu là giá trị alpha và có nghĩa là màu rõ 100%.

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>

4. Chọn màu cho giao diện của ứng dụng

Giờ bạn đã hiểu sơ qua về các thuộc tính giao diện, đã đến lúc chọn một số màu sắc! Cách dễ nhất để làm việc này là sử dụng Color Tool (Công cụ chọn màu), một ứng dựa trên nền tảng web do nhóm Material cung cấp. Công cụ này cung cấp một bảng màu gồm các màu được xác định trước, đồng thời cho phép bạn dễ dàng xem các màu đó trông như thế nào khi được các thành phần khác nhau trên giao diện người dùng sử dụng.

5f36ae5de34e0078.png

Chọn một số màu

  1. Bắt đầu bằng cách chọn màu Primary (Chính) (colorPrimary), ví dụ: Green 900 (Xanh lục 900). Công cụ chọn màu sẽ cho bạn thấy màu đó trông như thế nào qua bản minh hoạ ứng dụng, đồng thời chọn các biến thể Light (Sáng) và Dark (Tối). 310061c674eaefb9.png
  2. Nhấn vào phần Secondary (Cấp hai) và chọn màu cấp hai (colorSecondary) mà bạn thích, ví dụ: Light Blue 700 (Xanh lam nhạt 700). Bản minh hoạ ứng dụng sẽ cho thấy màu đó trông như thế nào, sau đó, hãy chọn lại các biến thể Light (Sáng) và Dark (Tối).
  3. Hãy lưu ý rằng bản minh hoạ ứng dụng sẽ bao gồm 6 "màn hình" minh hoạ khác nhau. Hãy xem các lựa chọn màu của bạn trông như thế nào trên nhiều màn hình bằng cách nhấn vào các mũi tên phía trên bản minh hoạ. 8260ceb61e8a8f2a.png
  4. Công cụ chọn màu cũng có thẻ Accessibility (Hỗ trợ tiếp cận) để cho bạn biết liệu người dùng có đọc được văn bản màu đen hoặc trắng một cách rõ ràng khi bạn sử dụng các màu đó hay không. Một trong những hoạt động để làm cho ứng dụng của bạn dễ tiếp cận hơn là đảm bảo độ tương phản màu đủ cao: 4,5:1 trở lên đối với văn bản nhỏ và 3,0:1 trở lên đối với văn bản lớn hơn. Đọc thêm về độ tương phản màu. 329af13cbd2f6efb.png
  5. Đối với primaryColorVariant và secondaryColorVariant, bạn có thể chọn biến thể sáng hoặc tối được đề xuất.

Thêm màu vào ứng dụng

Thao tác xác định tài nguyên cho màu giúp bạn dễ dàng sử dụng lại đúng màu đó một cách nhất quán trên nhiều phần trong ứng dụng.

  1. Trong Android Studio, hãy mở colors.xml (app > res > values > themes.xml) (ứng dụng > tài nguyên > giá trị > colors.xml).
  2. Sau khi nắm được các màu hiện có, hãy xác định tài nguyên màu có tên green bằng cách sử dụng giá trị đã chọn ở trên là #1B5E20.
<color name="green">#1B5E20</color>
  1. Tiếp tục xác định tài nguyên cho các màu khác. Hầu hết các màu này là từ công cụ chọn màu. Lưu ý rằng giá trị của green_light và blue_light khác với các giá trị mà công cụ này cho bạn thấy. Bạn sẽ sử dụng những giá trị này trong bước kế tiếp.

green

#1B5E20

green_dark

#003300

green_light

#A5D6A7

blue

#0288D1

blue_dark

#005B9F

blue_light

#81D4FA

Đã có các tài nguyên màu được xác định cho màu đen và trắng nên bạn không cần xác định những tài nguyên đó.

Lúc này, tệp colors.xml cho ứng dụng sẽ có dạng như sau:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>

    <color name="green">#1B5E20</color>
    <color name="green_dark">#003300</color>
    <color name="green_light">#A5D6A7</color>
    <color name="blue">#0288D1</color>
    <color name="blue_dark">#005B9F</color>
    <color name="blue_light">#81D4FA</color>
</resources>

Sử dụng màu trong giao diện

Giờ đây, bạn đã có tên cho các màu mình đã chọn, đã đến lúc sử dụng các màu đó trong giao diện.

  1. Mở themes.xml (app > res > values > themes > themes.xml) (ứng dụng > tài nguyên > giá trị > giao diện > themes.xml).
  2. Thay đổi colorPrimary thành màu chính bạn đã chọn, @color/green.
  3. Thay đổi colorPrimaryVariant thành @color/green_dark.
  4. Thay đổi colorSecondary thành @color/blue.
  5. Thay đổi colorSecondaryVariant thành @color/blue_dark.
  6. Kiểm tra để đảm bảo rằng Text on P (Văn bản trên màu chính) và Text on S (Văn bản trên màu cấp hai) vẫn là màu trắng (#FFFFFF) và màu đen (#000000). Nếu đang sử dụng công cụ chọn màu của riêng mình và chọn các màu khác thì bạn có thể phải xác định thêm tài nguyên màu.

Khi bạn hoàn tất, giao diện sẽ có dạng như sau:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green</item>
        <item name="colorPrimaryVariant">@color/green_dark</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue</item>
        <item name="colorSecondaryVariant">@color/blue_dark</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>
  1. Chạy ứng dụng của bạn trong trình mô phỏng hoặc trên thiết bị và xem ứng dụng của bạn trông như thế nào với giao diện mới.

3dba45374c1594e5.png

5. Giao diện tối

Mẫu ứng dụng bao gồm cả một giao diện sáng mặc định cũng như một biến thể giao diện tối. Giao diện tối sử dụng màu tối hơn, dịu hơn và:

  • Có thể làm giảm đáng kể mức sử dụng pin (tuỳ vào công nghệ màn hình của thiết bị).
  • Giúp người dùng có thị lực kém và những người nhạy cảm với ánh sáng mạnh dễ nhìn hơn.
  • Giúp mọi người dễ dàng sử dụng thiết bị trong môi trường ánh sáng yếu.

Chọn màu cho giao diện tối

Màu cho giao diện tối vẫn phải đáp ứng yêu cầu dễ đọc. Giao diện tối sử dụng một màu tối cho bề mặt, có các điểm nhấn màu sắc hạn chế. Để giúp đảm bảo khả năng dễ đọc, các màu chính của loại giao diện này thường là phiên bản màu ít bão hoà hơn so với các màu chính của giao diện sáng.

Để nâng cao tính linh hoạt và khả năng hữu dụng trong giao diện tối, bạn nên sử dụng tông màu sáng hơn (200-50) trong giao diện tối thay vì chủ đề màu sắc mặc định (tông màu bão hoà từ 900-500). Trước đó, bạn đã chọn màu xanh lục 200 và màu xanh lam nhạt 200 làm màu sáng. Đối với ứng dụng, bạn sẽ sử dụng màu sáng làm màu chính, còn màu chính làm biến thể.

Cập nhật phiên bản tối của giao diện

  1. Mở themes.xml (night). Chọn Android trong ngăn Project (Dự án), chuyển đến app > res > values > themes > themes.xml (night) (ứng dụng > tài nguyên > giá trị > giao diện > theme.xml (ban đêm)).
  1. Thay đổi colorPrimary thành biến thể sáng của màu chính bạn đã chọn, @color/green_light.
  2. Thay đổi colorPrimaryVariant thành @color/green.
  3. Thay đổi colorSecondary thành @color/blue_light.
  4. Thay đổi colorSecondaryVariant thành @color/blue_light. Lưu ý rằng màu của colorSecondaryVariant có thể có giống với màu của colorSecondary.

Khi bạn hoàn tất, tệp themes.xml (night) của bạn sẽ có dạng như sau:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Application theme for dark theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green_light</item>
        <item name="colorPrimaryVariant">@color/green</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue_light</item>
        <item name="colorSecondaryVariant">@color/blue_light</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>
  1. Tại thời điểm này, màu gốc được xác định trong colors.xml (ví dụ: purple_200) không được sử dụng nữa nên bạn có thể xoá đi màu này.

Thử dùng giao diện tối

Bạn có thể xem giao diện của mình trông như thế nào khi ở chế độ tối bằng cách bật chế độ tối trên thiết bị.

Đối với API 28 (Android 9)

  1. Chạy lại ứng dụng.
  2. Chuyển sang ứng dụng Settings (Cài đặt).
  3. Trong phần Battery (Pin), hãy tìm Battery Saver (Trình tiết kiệm pin).

5f5098d8d63acfa9.png

  1. Nhấn vào Turn on Now (Bật ngay).

Tiếp tục thực hiện các bước dưới đây.

Đối với API 29 (Android 10) trở lên

  1. Chạy lại ứng dụng.
  2. Chuyển sang ứng dụng Settings (Cài đặt).
  3. Trong phần Display (Hiển thị), hãy tìm nút chuyển Dark theme (Giao diện tối).

6d9dc1ab3d19f8e6.png

  1. Chuyển Dark theme (Giao diện tối) sang vị trí "on" (bật) và thiết bị sẽ chuyển sang chế độ ban đêm.

75f134ecb7c1322a.png

Một trong hai API

  1. Quay lại ứng dụng của bạn và xem xét các điểm khác biệt.

6cc918d7c3613539.png

Thay đổi rõ ràng nhất là nền tối có văn bản sáng, thay vì nền sáng có văn bản tối. Ngoài ra, các màu được sử dụng cho các nút ít sống động hơn trong giao diện tối so với trong giao diện sáng.

Xin chúc mừng! Bạn đã tạo thành công giao diện mới của ứng dụng, có cả giao diện sáng và giao diện tối.

6. Mã giải pháp

Lớp học mã này tập trung vào việc tuỳ chỉnh màu cho giao diện, nhưng có rất nhiều thuộc tính mà giao diện của bạn có thể tuỳ chỉnh, bao gồm cả văn bản, hình dạng, kiểu nút và nhiều thuộc tính khác. Tham khảo bài viết này để xem những cách khác giúp bạn có thể tuỳ chỉnh giao diện của ứng dụng! Định kiểu cho Android: Các thuộc tính phổ biến về giao diện.

Mã giải pháp cho lớp học lập trình này có dạng như dưới đây.

colors.xml (app > res > values > colors.xml) (ứng dụng > tài nguyên > giá trị > color.xml)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="green">#1B5E20</color>
    <color name="green_dark">#003300</color>
    <color name="green_light">#A5D6A7</color>
    <color name="blue">#0288D1</color>
    <color name="blue_dark">#005B9F</color>
    <color name="blue_light">#81D4FA</color>
</resources>

values/themes.xml (app > res > values > themes > themes.xml) (ứng dụng > tài nguyên > giá trị > giao diện > themes.xml)

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green</item>
        <item name="colorPrimaryVariant">@color/green_dark</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue</item>
        <item name="colorSecondaryVariant">@color/blue_dark</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

values-night/themes.xml (app > res > values > themes > themes.xml (night)) (ứng dụng > tài nguyên > giá trị > giao diện > themes.xml (ban đêm))

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Application theme for dark theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green_light</item>
        <item name="colorPrimaryVariant">@color/green</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue_light</item>
        <item name="colorSecondaryVariant">@color/blue_light</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

7. Tóm tắt

  • Sử dụng Công cụ chọn màu Material để chọn màu cho giao diện của ứng dụng.
  • Ngoài ra, bạn có thể sử dụng Trình tạo bảng màu Material để chọn bảng màu.
  • Khai báo tài nguyên màu trong tệp colors.xml để dễ sử dụng lại tài nguyên đó.
  • Giao diện tối có thể làm giảm mức sử dụng pin và giúp người dùng dễ đọc được nội dung trên ứng dụng của bạn hơn trong điều kiện ánh sáng yếu.

8. Tìm hiểu thêm