Ulepsz swój widżet

Ta strona zawiera szczegółowe informacje na temat opcjonalnych ulepszeń widżetów, które są dostępne od Androida 12 (poziom interfejsu API 31). Te funkcje są opcjonalne, ale które można łatwo wdrożyć i poprawić widżet.

Używanie kolorów dynamicznych

Od Androida 12 widżet może używać kolorów motywu urządzenia z przyciskami, tłami i innymi elementami. Dzięki temu będzie płynniejsza przejścia i spójność między różnymi widżetami.

Dynamiczne kolory możesz uzyskać na 2 sposoby:

Po ustawieniu motywu w układzie głównym możesz stosować typowe atrybuty kolorów w pierwiastek lub jego elementy podrzędne, aby odebrać barwy dynamiczne.

Oto kilka przykładów atrybutów kolorów, których możesz użyć:

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

W tym przykładzie, w ramach motywu Material 3, kolor motywu urządzenia to „purpurowy”. Kolor uzupełniający i tło widżetu dostosowują się do jasności i ciemności jak pokazujemy na rysunkach 1 i 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>
Widżet w trybie jasnym
Rysunek 1. Widżet w jasnym motywie.
.
Widżety w trybie ciemnym
Rys. 2. Widżet w ciemnym motywie.

Zgodność wsteczna kolorów dynamicznych

Dynamiczne kolory są dostępne tylko na urządzeniach z Androidem 12 lub wyższą. Aby udostępnić motyw niestandardowy dla starszych wersji, utwórz motyw domyślny z własnymi kolorami i nowym kwalifikatorem (values-v31) z kolorami domyślnymi atrybutów motywu.

Oto przykład z wykorzystaniem motywu 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>

Włącz obsługę głosową

Działania w aplikacji pozwalają Asystentowi Google wyświetlanie widżetów w odpowiedzi na odpowiednie polecenia głosowe użytkownika. Konfigurując do reagowania na intencje wbudowane, może aktywnie wyświetlać widżety na platformach Asystenta takich jak Android czy Android Auto Użytkownicy mogą przypinać widżety wyświetlane przez Asystenta z myślą o przyszłym zaangażowaniu.

Możesz na przykład skonfigurować widżet podsumowania treningu w aplikacji do ćwiczeń, aby spełniał polecenia głosowe użytkownika, które uruchamiają GET_EXERCISE_OBSERVATIONBII. Asystent wyświetla aktywnie widżet, gdy użytkownicy aktywują tę funkcję, składając prośby takie jak „OK Google, ile kilometrów przebiegłem/przebiegłam w tym tygodniu w ExampleApp?”

Istnieją dziesiątki BII obejmujących kilka kategorii interakcji użytkownika, pozwalając prawie każdej aplikacji na Androida ulepszać swoje widżety głosowe. Na początek Więcej informacji znajdziesz w artykule Integrowanie akcji w aplikacji z widżetami na Androida.

Usprawnij selektor widżetów aplikacji

Android 12 pozwala ulepszyć selektor widżetów na aplikacji, dodając dynamiczne podglądy widżetów i opisy widżetów.

Dodaj podglądy skalowalnych widżetów do selektora widżetów

Od Androida 12 podgląd widżetu jest wyświetlany w jest skalowalny. Musisz go podać jako układ XML ustawiony na domyślny rozmiar widżetu. Wcześniej podgląd widżetu był statycznym zasobem rysowanym w w niektórych przypadkach mogą one niedokładnie odzwierciedlać sposób wyświetlania widżetów, pojawią się na ekranie głównym.

Aby wdrożyć skalowalne podglądy widżetów, użyj atrybutu previewLayout elementu appwidget-provider, aby zamiast tego podać układ XML:

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

Zalecamy użycie tego samego układu co widżet, z realistycznym ustawieniem domyślnym. lub wartości testowych. Większość aplikacji używa tych samych wartości previewLayoutinitialLayout. Wskazówki dotyczące tworzenia dokładnych układów podglądu znajdziesz w następnej sekcji tej strony.

Zalecamy określenie atrybutów previewLayoutpreviewImage, aby aplikacja mogła użyć atrybutu previewImage, jeśli urządzenie użytkownika nie obsługuje atrybutu previewLayout. Atrybut previewLayout ma pierwszeństwo przed atrybutem previewImage.

Zalecane metody tworzenia dokładnych podglądów

Aby wdrożyć skalowalne podglądy widżetów, użyj atrybutu previewLayout elementu appwidget-provider, aby podać układ XML:

<appwidget-provider
    ...
    android:previewLayout="@layout/my_widget_preview">
</appwidget-provider>
Obraz przedstawiający podgląd widżetu
Rysunek 3. Podgląd widżetu, który domyślnie jest wyświetlany w obszarze 3 x 3, ale dzięki układowi XML może się zmieścić w obszarze 3 x 1.

Aby wyświetlić dokładny podgląd, możesz bezpośrednio podać rzeczywisty układ widżetu z wartościami domyślnymi, wykonując te czynności:

  • Ustawiam android:text="@string/my_widget_item_fake_1" dla: TextView .

  • Ustawianie domyślnego lub zastępczego obrazu bądź ikony, na przykład android:src="@drawable/my_widget_icon" dla ImageView komponentów.

Bez wartości domyślnych podgląd może wyświetlać nieprawidłowe lub puste wartości. Ważną zaletą tego podejścia jest to, że możesz udostępnić zlokalizowane treści podglądu.

Szczegółowe informacje o zalecanych podejściach do bardziej złożonych podglądów zawierających elementy ListView, GridView lub StackView znajdziesz w artykule Tworzenie dokładnych podglądów zawierających elementy dynamiczne.

Wcześniejsza zgodność ze skalowalnymi podglądami widżetów

Aby selektory widżetów na Androidzie 11 (poziom interfejsu API 30) lub niższym mogły wyświetlać podglądy widżet, określ previewImage .

Jeśli zmienisz wygląd widżetu, zaktualizuj obraz podglądu.

Dodawanie opisu widżetu

Podawanie opisu widżetu (od Androida 12) który ma być wyświetlany w widżecie.

Obraz przedstawiający selektor widżetów, w tym widżet i jego opis
Rysunek 4. Przykład selektora widżetów pokazujący widżet i jego opis.

Podaj opis widżetu za pomocą atrybutu description elementu &lt;appwidget-provider&gt;:

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

W poprzednich wersjach Androida możesz używać atrybutu descriptionRes, ale selektor widżetów go ignoruje.

Włącz płynniejsze przejścia

Od Androida 12 uruchamianie aplikacji z widżetu zapewnia płynniejsze przejście.

Aby włączyć to ulepszone przejście, użyj @android:id/background lub android.R.id.background, aby zidentyfikować element tła:

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

Twoja aplikacja może używać pakietu @android:id/background w poprzednich wersjach Androida bez uszkodzenia, ale jest ignorowany.

Używaj modyfikacji czasu działania obiektów RemoteView

Począwszy od Androida 12, dostępne są: Metody RemoteViews, które umożliwiają modyfikowanie czasu działania aplikacji RemoteViews . Zobacz interfejs API RemoteViews znajdziesz pełną listę dodanych metod.

Przykładowy kod poniżej pokazuje, jak używać kilku z tych metod.

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);