Cải thiện tiện ích

Trang này cung cấp thông tin chi tiết về các tính năng nâng cao không bắt buộc cho tiện ích có sẵn kể từ Android 12 (API cấp 31). Đây là các tính năng không bắt buộc, nhưng rất dễ triển khai và cải thiện trải nghiệm của người dùng với tiện ích.

Sử dụng màu động

Kể từ Android 12, tiện ích có thể sử dụng màu giao diện thiết bị cho các nút, nền và các thành phần khác. Điều này giúp chuyển đổi và đảm bảo tính nhất quán trên các tiện ích một cách mượt mà hơn.

Có hai cách để tạo màu động:

• Sử dụng giao diện mặc định của hệ thống (@android:style/Theme.DeviceDefault.DayNight) trong bố cục gốc.

• Sử dụng giao diện Material 3 (Theme.Material3.DynamicColors.DayNight) từ thư viện Thành phần Material cho Android, có sẵn từ Thành phần Material cho Android phiên bản 1.6.0.

Sau khi giao diện được đặt trong bố cục gốc, bạn có thể sử dụng các thuộc tính màu phổ biến trong gốc hoặc bất kỳ phần tử con nào của nó để chọn màu động.

Sau đây là một số ví dụ về thuộc tính màu mà bạn có thể sử dụng:

• ?attr/primary
• ?attr/primaryContainer
• ?attr/onPrimary
• ?attr/onPrimaryContainer

Trong ví dụ sau đây khi sử dụng giao diện Material 3, màu giao diện của thiết bị là "tím". Màu nhấn và nền tiện ích thích ứng với chế độ sáng và tối, như minh hoạ trong hình 1 và 2.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="?attr/colorPrimaryContainer"
  android:theme="@style/Theme.Material3.DynamicColors.DayNight">

  <ImageView
    ...
    app:tint="?attr/colorPrimaryContainer"
    android:src="@drawable/ic_partly_cloudy" />

    <!-- Other widget content. -->

</LinearLayout>

Hình 1. Tiện ích ở giao diện sáng.

Hình 2. Tiện ích trong giao diện tối.

Mẹo: Bạn nên sử dụng giao diện Material 3 để tuân thủ các nguyên tắc Material Design nhằm đảm bảo tính nhất quán giữa các thiết bị và khả năng tương thích ngược.

Khả năng tương thích ngược cho màu động

Màu động chỉ có trên các thiết bị chạy Android 12 trở lên. Để cung cấp giao diện tuỳ chỉnh cho các phiên bản thấp hơn, hãy tạo một giao diện mặc định bằng màu tuỳ chỉnh và bộ hạn định mới (values-v31) bằng cách sử dụng các thuộc tính giao diện mặc định.

Dưới đây là ví dụ về cách sử dụng giao diện Material 3:

/values/styles.xml

<resources>
  <style name="MyWidgetTheme" parent="Theme.Material3.DynamicColors.DayNight">
    <!-- Override default colorBackground attribute with custom color. -->
    <item name="android:colorBackground">@color/my_background_color</item>

    <!-- Add other colors/attributes. -->

  </style>
</resources>

/values-v31/styles.xml

<resources>
  <!-- Do not override any color attribute. -->
  <style name="MyWidgetTheme" parent="Theme.Material3.DynamicColors.DayNight" />
</resources>

/layout/my_widget_layout.xml

<resources>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    ...
    android:background="?android:attr/colorBackground"
    android:theme="@style/MyWidgetTheme" />
</resources>

Lưu ý: Xem mục Kiểu và giao diện để biết hướng dẫn chuyên sâu về cách xử lý các kiểu, màu sắc, thuộc tính và giao diện.

Bật tính năng hỗ trợ giọng nói

Hành động trong ứng dụng cho phép Trợ lý Google hiển thị các tiện ích theo lệnh thoại liên quan của người dùng. Bằng cách định cấu hình tiện ích để phản hồi ý định tích hợp (BII), ứng dụng của bạn có thể chủ động hiển thị tiện ích trên các nền tảng của Trợ lý như Android và Android Auto. Người dùng có thể ghim tiện ích do Trợ lý hiển thị vào trình chạy của họ, từ đó khuyến khích tương tác trong tương lai.

Ví dụ: bạn có thể định cấu hình tiện ích tóm tắt bài tập thể dục cho ứng dụng tập thể dục để thực hiện lệnh thoại của người dùng kích hoạt BII GET_EXERCISE_OBSERVATION. Trợ lý chủ động hiển thị tiện ích của bạn khi người dùng kích hoạt BII này bằng cách đưa ra các yêu cầu như "Ok Google, tuần này tôi chạy được bao nhiêu dặm trên ExampleApp rồi?"

Có rất nhiều BII bao gồm một số danh mục tương tác của người dùng, cho phép hầu hết mọi ứng dụng Android đều cải thiện các tiện ích dành cho giọng nói. Để bắt đầu, hãy xem bài viết Tích hợp Hành động trong ứng dụng với các tiện ích Android.

Cải thiện trải nghiệm bộ chọn tiện ích của ứng dụng

Android 12 cho phép bạn thêm bản xem trước tiện ích theo tỷ lệ và nội dung mô tả tiện ích. Android 15 cho phép bạn cải thiện trải nghiệm bộ chọn tiện ích cho ứng dụng bằng bản xem trước tiện ích được tạo.

Để cải thiện trải nghiệm bộ chọn tiện ích của ứng dụng, hãy cung cấp bản xem trước tiện ích đã tạo trên các thiết bị chạy Android 15 trở lên, bản xem trước tiện ích theo tỷ lệ (bằng cách chỉ định previewLayout) cho các thiết bị chạy Android 12 đến Android 14 và previewImage cho các phiên bản cũ hơn.

Thêm bản xem trước tiện ích đã tạo vào bộ chọn tiện ích

Ứng dụng phải đặt giá trị compileSdk thành 35 trở lên trong tệp mô-đun build.gradle để có thể cung cấp RemoteViews cho bộ chọn tiện ích trên các thiết bị chạy Android 15 trở lên. Điều này có nghĩa là các ứng dụng có thể cập nhật nội dung trong bộ chọn để phản ánh rõ hơn nội dung mà người dùng nhìn thấy.

Các ứng dụng có thể sử dụng các phương thức AppWidgetManager, setWidgetPreview và getWidgetPreview để cập nhật giao diện của tiện ích bằng thông tin mới nhất và được cá nhân hoá.

Tạo bản xem trước đã cập nhật bằng Jetpack Glance

Glance.compose chạy một thành phần, do đó, không có hàm tạm ngưng, luồng hoặc lệnh gọi không đồng bộ tương tự nào được sử dụng trong phần nội dung của thành phần kết hợp. Thay vào đó, bạn phải sử dụng dữ liệu không đổi.

Ví dụ sau đây sử dụng Jetpack Glance để tạo bản xem trước đã cập nhật. Bạn phải đặt chế độ cài đặt bản dựng compileSdk là 35 trở lên để setWidgetPreview hiển thị dưới dạng phương thức trong đoạn mã này.

AppWidgetManager.getInstance(appContext).setWidgetPreview(
    ComponentName(
        appContext,
        ExampleAppWidgetReceiver::class.java
    ),
    AppWidgetProviderInfo.WIDGET_CATEGORY_HOME_SCREEN,
    ExampleAppWidget().compose(
        context = appContext
    ),
)
AppWidgetSnippets.kt

Tạo bản xem trước đã cập nhật mà không dùng Jetpack Glance

Bạn có thể sử dụng RemoteViews mà không dùng tính năng Glance. Ví dụ sau đây tải một tài nguyên bố cục tiện ích XML và đặt tài nguyên đó làm bản xem trước. Bạn phải thiết lập chế độ cài đặt bản dựng compileSdk là 35 trở lên để setWidgetPreview hiển thị dưới dạng một phương thức trong đoạn mã này.

AppWidgetManager.getInstance(appContext).setWidgetPreview(
    ComponentName(
        appContext,
        ExampleAppWidgetReceiver::class.java
    ),
    AppWidgetProviderInfo.WIDGET_CATEGORY_HOME_SCREEN,
    RemoteViews("com.example", R.layout.widget_preview)
)
AppWidgetSnippets.kt

Thêm bản xem trước tiện ích có thể mở rộng vào bộ chọn tiện ích

Kể từ Android 12, bản xem trước tiện ích hiển thị trong bộ chọn tiện ích có thể mở rộng. Bạn cung cấp tệp này dưới dạng bố cục XML được đặt thành kích thước mặc định của tiện ích. Trước đây, bản xem trước tiện ích là một tài nguyên có thể vẽ tĩnh, trong một số trường hợp dẫn đến việc bản xem trước phản ánh không chính xác cách các tiện ích xuất hiện khi chúng được thêm vào màn hình chính.

Để triển khai bản xem trước tiện ích có thể mở rộng, hãy sử dụng thuộc tính previewLayout của phần tử appwidget-provider để cung cấp bố cục XML:

<appwidget-provider
    android:previewLayout="@layout/my_widget_preview">
</appwidget-provider>

Bạn nên sử dụng cùng một bố cục với tiện ích thực tế, với các giá trị mặc định hoặc giá trị kiểm thử thực tế. Hầu hết các ứng dụng đều sử dụng cùng một previewLayout và initialLayout. Để biết hướng dẫn về cách tạo bố cục xem trước chính xác, hãy xem phần sau trong trang này.

Bạn nên chỉ định cả thuộc tính previewLayout và previewImage để ứng dụng của bạn có thể quay lại sử dụng previewImage nếu thiết bị của người dùng không hỗ trợ previewLayout. Thuộc tính previewLayout được ưu tiên hơn thuộc tính previewImage.

Các phương pháp đề xuất để tạo bản xem trước chính xác

Để triển khai bản xem trước tiện ích có thể mở rộng, hãy sử dụng thuộc tính previewLayout của phần tử appwidget-provider để cung cấp bố cục XML:

<appwidget-provider
    ...
    android:previewLayout="@layout/my_widget_preview">
</appwidget-provider>

Hình 3. Bản xem trước tiện ích theo mặc định xuất hiện trong khu vực 3x3 nhưng có thể vừa với khu vực 3x1 do bố cục XML của tiện ích.

Để hiển thị bản xem trước chính xác, bạn có thể trực tiếp cung cấp bố cục tiện ích thực tế bằng các giá trị mặc định bằng cách hoàn tất các bước sau:

• Đặt android:text="@string/my_widget_item_fake_1" cho các phần tử TextView.

  Lưu ý: Các giá trị được đặt bằng thẻ tools, chẳng hạn như tools:text="@string/my_wdiget_item_fake_1", sẽ không xuất hiện trong bản xem trước.

• Đặt hình ảnh hoặc biểu tượng mặc định hoặc phần giữ chỗ, chẳng hạn như android:src="@drawable/my_widget_icon", cho các thành phần ImageView.

Nếu không có giá trị mặc định, bản xem trước có thể hiển thị giá trị không chính xác hoặc trống. Một lợi ích quan trọng của phương pháp này là bạn có thể cung cấp nội dung xem trước được bản địa hoá.

Để biết các phương pháp đề xuất cho các bản xem trước phức tạp hơn chứa ListView, GridView hoặc StackView, hãy xem phần Tạo bản xem trước chính xác bao gồm các mục động để biết thông tin chi tiết.

Khả năng tương thích ngược với bản xem trước tiện ích có thể mở rộng

Để cho phép bộ chọn tiện ích trên Android 11 (API cấp 30) trở xuống hiển thị bản xem trước của tiện ích, hãy chỉ định thuộc tính previewImage.

Nếu bạn thay đổi giao diện của tiện ích, hãy cập nhật hình ảnh xem trước.

Thêm tên vào tiện ích của bạn

Các tiện ích cần phải có tên duy nhất khi được hiển thị trong bộ chọn tiện ích.

Tên của tiện ích được tải từ thuộc tính label của phần tử receiver của tiện ích trong tệp AndroidManifest.xml.

<receiver
    ….
   android:label="Memories">
     ….
</receiver>

Thêm nội dung mô tả cho tiện ích

Kể từ Android 12, hãy cung cấp nội dung mô tả cho bộ chọn tiện ích để hiển thị cho tiện ích của bạn.

Hình 4. Bộ chọn tiện ích mẫu hiển thị một tiện ích và nội dung mô tả về tiện ích đó.

Cung cấp nội dung mô tả cho tiện ích bằng thuộc tính description của phần tử <appwidget-provider>:

<appwidget-provider
    android:description="@string/my_widget_description">
</appwidget-provider>

Lưu ý: Hãy ngắn gọn. Không có giới hạn về số ký tự, nhưng cách trình bày và không gian có sẵn cho nội dung mô tả có thể khác nhau tuỳ theo thiết bị.

Bạn có thể sử dụng thuộc tính descriptionRes trên các phiên bản Android trước đó, nhưng bộ chọn tiện ích sẽ bỏ qua thuộc tính này.

Cho phép chuyển đổi mượt mà hơn

Kể từ Android 12, trình chạy sẽ cung cấp quá trình chuyển đổi mượt mà hơn khi người dùng chạy ứng dụng của bạn từ một tiện ích.

Để bật hiệu ứng chuyển đổi cải tiến này, hãy sử dụng @android:id/background hoặc android.R.id.background để xác định phần tử nền:

// Top-level layout of the widget.
<LinearLayout
    android:id="@android:id/background">
</LinearLayout>

Cảnh báo: Tránh sử dụng đàn hồi truyền tin. Kể từ Android 12, ứng dụng vẫn có thể chạy một hoạt động từ broadcast receiver hoặc dịch vụ nếu hoạt động đó được bắt đầu từ PendingIntent của một lượt nhấp vào tiện ích. Tuy nhiên, ảnh động ứng dụng mới không được dùng cho các ứng dụng được khởi chạy từ một broadcast receiver hoặc dịch vụ, dẫn đến trải nghiệm người dùng không tốt.

Ứng dụng của bạn có thể sử dụng @android:id/background trên các phiên bản Android trước đó mà không bị lỗi, nhưng sẽ bị bỏ qua.

Sử dụng tính năng sửa đổi thời gian chạy của RemoteViews

Kể từ Android 12, bạn có thể tận dụng một số phương thức RemoteViews để sửa đổi thời gian chạy của các thuộc tính RemoteViews. Hãy xem tài liệu tham khảo API RemoteViews để biết danh sách đầy đủ các phương thức đã thêm.

Ví dụ về mã sau đây cho thấy cách sử dụng một số phương thức này.

Kotlin

// Set the colors of a progress bar at runtime.
remoteView.setColorStateList(R.id.progress, "setProgressTintList", createProgressColorStateList())

// Specify exact sizes for margins.
remoteView.setViewLayoutMargin(R.id.text, RemoteViews.MARGIN_END, 8f, TypedValue.COMPLEX_UNIT_DP)

Java

// Set the colors of a progress bar at runtime.
remoteView.setColorStateList(R.id.progress, "setProgressTintList", createProgressColorStateList());

// Specify exact sizes for margins.
remoteView.setViewLayoutMargin(R.id.text, RemoteViews.MARGIN_END, 8f, TypedValue.COMPLEX_UNIT_DP);