[MUSIC PLAYING] SUMMERS PITTMAN: Hi. I'm Summers, a developer
relations engineer at Google. ANDRE LABONTE: And I'm André,
Android product manager focused on widgets. Thanks for taking
the time to join us.

We're excited to be here with
you to talk about widgets. [CHEERING] Nice. Thank you. We're going to start by covering
the value of Android widgets and demonstrate how to build
great widgets using Jetpack Glance, a framework built on top
of Compose for writing widgets.

We'll cover the "fundamentals"
of widgets like what they are, how people use them, and why
you should consider building one for your app. Then we'll discuss what
makes a high-quality widget and how to build one
using Jetpack Glance.

First, let's cover the
basics, like what is a widget? A widget is a piece
of your app UI that can be rendered remotely
outside the main Android application. Most commonly, this
is the home screen, but widgets may
also be displayed

by personal assistants,
rendered on lock screens, or other screens, depending
on the phone manufacturer. Widgets can be a powerful
tool for engaging users and increasing the
visibility of your app. They can also help you to
improve the user experience

by providing users with
a more convenient way to access your app's
content and features. If you're not already
using widgets, I encourage you to
start thinking about it. Here are a few reasons I think
you should care about widgets.

Widgets can help to increase
the visibility of your app by placing your brand and
functionality front and center on your user's home screen. Widgets can also help to
improve user engagement by making it easier for users
to access your app's features.

And widgets can be a great part
of your conversion strategy by recommending personalized
content or premium features. Why widgets? People use widgets for so
many different reasons. Let's chat through a
few of them and how you might assess if
building a widget

is beneficial for your app. Users take advantage of widgets
to customize their home screens, to make them feel more personal
and unique to them, which tends to increase engagement. Consider how users might want
to customize their home screen with content from your app.

For example, the Notion
widget gives users the ability to pin information that's
most helpful to them, personalizing how they engage
with Notion's features. Some users choose
widgets because they enable access to
frequently used features

more efficiently
and with less taps. Think about it for a second. Does your app have
features that your users might want to jump directly
into or even complete right from their home screen? One of my personal favorites
is the Google Calendar widget,

which allows me to
view my day, realize that I'm late for a meeting, and
jump right into the video call without leaving the widget. Certain widgets are most helpful
without any interaction at all. Some of the most popular widgets
offer a subset of information

in a layout that can
be consumed glanceably. If users are often launching
your app just for a few seconds to get a status or a specific
piece of information, this might be a sign
your users would benefit from a glanceable widget.

The Strava widget
is a great example of providing fitness enthusiasts
with the information they care most about at a glance
throughout their day. Convinced that
widgets are awesome? [CHEERING] I already was. Great. Yes.

If you're going to build
a widget, make it great. Here are a few tips for
designing great widgets. Make sure your widget
is helpful and relevant. Users should be able to
get something valuable from your widget without
having to open your app.

Keep your widget
simple and easy to use. People shouldn't have
to spend a lot of time figuring out how
to use your widget. Consider widget adaptivity. Ensure your widget
works properly across the Android ecosystem of
phones, tablets, and foldables.

Make sure your widget
is visually cohesive. And what I mean by
this is users are more likely to use a
widget that looks good and matches the overall
design of their home screen. So take advantage of system
color palettes, typefaces,

and corner radii to
ensure your widget is complementary
to the system UI. And help users discover
your great new widget. Prompt the user to add the
widget from inside your app using our Widget Pinning API. And don't forget to include
high-quality previews

and descriptions so
users can understand the value of your widget
even before trying it. Before Summers walks us through
how to implement a widget, I want to tell you a bit
about some new resources we're providing to make building great
widgets less complex, less time-consuming, and more integrated
into your existing tool chain. First, there's
Jetpack Glance 1.1. It has improved unit
testing capabilities and the introduction
of components that take some of the work out
of building foundational UI

elements. We've also released canonical
widget layouts, which build on top of the
Jetpack Glance components to allow you to get started
faster with a set of layouts that align with best practices. They're adaptive across
phone, tablet, and foldable.

They're refined, and
they're customizable. These layouts will
help you create engaging,
productivity-enhancing widgets. The first set of
layouts are delivered as code samples and a
matching Figma library in the Android UI kit, with
more layouts coming soon.

To get started, first you
identify your core content, and you map it to one
of the prebuilt layouts to streamline the process. Let's have a quick look at
the widget canonical layouts. Text layouts are ideal for
displaying concise information.

You can enhance the visual
appeal of your widget by optionally including an
image alongside the text. Use list layouts to
organize multiple items into a clear, scannable format. This is ideal for news
headlines, to-do lists,

or inboxes. Choose between containerized
or container list presentation based on your content
or branding needs. And grid layouts
allow you to present images in a compact,
flexible, visually rich grid. You can also incorporate
text labels and descriptions, enriching the image grid
content with additional context. Also check out our latest
widget design guidance to learn about building
a best practice widget and upleveling your
app experience. Many of the examples you'll
see on the new design site

were created with the
canonical widget layouts, and you can check it out
on developer.android.com. Now over to Summers to walk
us through the technical side of widgets. [APPLAUSE] SUMMERS PITTMAN:
So what are widgets

from a technical perspective? Widgets are a
special type of view that is shown inside of a host
app instead of your main app, and they receive
periodic updates. In this section, we'll
go into more detail about what is required by your
applications and the Android OS

to support these special
views and the limitations that are unique to widgets
when compared to an app. Several basic components are
used to create app widgets. First, the
AppWidgetHost is an app that embeds a widget in its UI.

This is typically
the home screen, but it is not
required to be one. There's also the
AppWidgetProviderInfo, which describes the widget
metadata, such as its layout, size, update frequency,
configuration class, and so on.

This is an XML file provided to the AppWidgetProvider. Finally, the AppWidgetProvider is a broadcast receiver that processes messages from the Android OS when the widget is updated, enabled, disabled, or deleted from the AppWidgetHost.

It defines the methods that let you programmatically interface with the widget and is responsible for providing the widget's layout to the widget's host. App widget layouts are written using remote views. These are special view classes that can be displayed in separate processes.

Because they are displayed in separate processes, remote views have their own APIs, which are separate from the APIs of application view objects you are already familiar with. These pieces are associated together in your app's `androidmanifest.xml` file.

The widget's AppWidgetProvider is declared as a broadcast receiver, and AppWidgetProviderInfo is referenced using metadata. Once you've configured these components, your widget is ready to be added to a user's home screen. Widgets are added using the widget picker, pinned

to the home screen from your application, or they can be added from a shortcut on your app icon. After you've defined an app widget and your user has added it to your home screen, your application is ready and is responsible for periodically

updating the widget. Additionally, the Android operating system may also request that your widget be updated. Now that we've established a high-level overview of widgets in Android, let's discuss Jetpack Glance and how it builds on the foundation

to let you develop widgets. So what is Glance? Jetpack Glance is
Google's recommended way to write new widgets. It is built on the
Jetpack Compose runtime, allowing you to take advantage
of Compose's benefits,

such as writing declarative
UIs with less code, using intuitive APIs, and
writing and designing widgets using Kotlin instead of XML. Glance supports
and builds on top of the components of a widget
and inherits the same setup and configuration.

Glance provides its own
AppWidgetProvider class, GlanceAppWidgetReceiver. It uses a GlanceAppWidget
implementation to provide remote views
to the app widget host. Creating widgets
with Glance is done using Kotlin and Compose
patterns without XML layout

files. Glance widgets extend
the GlanceAppWidget class and override the
function provideGlance. This function is where
you allocate any resources your widget needs. Then you will call
provideContent with the widget's Glance composables as an input.

ProvideGlance is called
by the Glance library, and it is run
inside of a worker. Glance provides components
to display utilities that help integrate
with your user's theme, layouts that resize
dynamically, and much more.

This all comes together
to make your widgets look amazing while still
being easy to code. Glance's composables are
wrappers around remote-view objects and cannot
be used alongside Compose's composables. When you're using Glance, be
sure to only import composables

from the androidx.glance
namespace. Once the GlanceAppWidget
is written and placed on a user's home screen, it
becomes your application's responsibility to update it. Glance provides update
and updateAll functions, making updating widgets easy.

These are suspend
functions that can be called from any part
of your application. When they are
called, Glance will use the WorkManager to call
your provideGlance function inside of a worker. This worker is subject to
the typical worker time

limit of about 10 minutes. Once your provideGlance
method is called, provide-- calls provide
content, composition will run for about 45 seconds. UI interactions
and update requests cause Glance to add
time to this limit.

Glance will only have
one widget per worker. When your application
updates widget data, it should always call one
of these update functions. In your widgets composables,
you should always observe data sources from a
flow or similar observable.

This ensures that your widget
will not miss data changes. Now that we know what Glance is
and how it works with widgets, let's actually use
Glance to build a widget. To do this, we need to
add Glance to our project,

extend the
GlanceAppWidget class, extend the
GlanceAppWidgetReceiver class, create an
AppWidgetProviderInfo XML file, and reference all of these
together in our Android manifest. The Glance dependencies are
available in Google's Maven

repository and can be
included by adding them to your application's
build.gradle file. For this project, we are using
the release candidate version 1.1.0. We will include glance-appwidget
and glance-material3 modules. After adding these
dependencies, you

will have to resync your Gradle
project in Android Studio, and then you will be
ready to use Glance. To implement a
Glance app widget, extend the abstract
class GlanceAppWidget and implement the
provideGlance method.

In this method, you should
provide your composables with the provideContent method. In this sample, we can
simply call provideContent with our one Text composable. I want to call attention to the
namespace of the Text composable

class. This is a Glance Text
composable and not a Material 3 Text composable
from Jetpack Compose. Next, let's extend
GlanceAppWidgetReceiver. This class is an extension
of AppWidgetProvider that uses our widget to
generate views when needed.

GlanceAppWidgetReceiver
implements-- implementations are
required to provide a value for the
GlanceAppWidget property. This should be a
no-arguments constructor of your GlanceAppWidget class. The final resource
we must create

is our AppWidgetProviderInfo
XML file. This file is placed in our
project's XML resources directory and is referenced in
a receiver entry in your Android manifest. For our widget, we will be
using an initial layout provided by Glance, allow resizing,
configure our size constraints,

and set up a refresh period. Our application can
always refresh our widget outside of this
refresh period as well. We can now add our widget
to our Android manifest and display it on
our home screen. This is as easy as
configuring a broadcast

receiver for our
GlanceAppWidgetReceiver, exporting it, and filtering on
the app widget update action. We also pass in our
widget's app widget provider information using metadata. This metadata is consumed by
the AppWidgetProvider superclass

we mentioned in part two. After we build and
run our project, we can now add the widget
to our home screen. Now that we've added our
widget to our home screen, we can see it as a
beautiful baby Hello, World.

Truthfully, it's not that
beautiful, but we're on our way. In the next session,
we'll add some structure, branding, interactivity
to our widget. We want a high-quality
experience for our users, and we can build it in Glance.

High-quality widgets are ones
that have a well-defined shape, integrate with the
user's theming, gracefully resize, provide
representative previews in the widget picker, provide
fresh and short content, and have minimal and
relevant controls.

After this talk, you should take
a look at our new widget design guidance and widget design hub
that André mentioned before. These resources will build on
the practical examples we're about to talk about
and provide you and your teams with the
necessary information

to make widgets that look great. Glance 1.1.0 has been designed
to support this guidance. Let's return to our
Hello, World widget. Glance 1.1.0 has a set of
components that can be used

to make sure that our widget
looks good, resizes well, and behaves appropriately. Here we've added a
Glance scaffold component to our Hello, World widget. A scaffold will display a
title bar and our content inside of a padded frame.

Scaffold's titleBar
property is filled using a TitleBar component. We've also given the title
bar an icon and a title, and overridden the
backgroundColor property to use the surface color token. As we see, this is a lot better
than it was looking before.

But when we compare our
widget to other widgets, the colors seem off. On home screens, it is
expected that widgets will set their colors based
on the user's theme settings. Let's update our
scaffold's background color to use the widget
backgroundColor token.

This is the default
backgroundColor token for scaffold in Glance
1.1.0, but should be set if you're using different root
composables in your widget. We should also use the
onSurface color token for our content's
text color property.

These tokens ensure that our
widgets fit users' themes and have the right
contrast ratios. Now our widget matches
multiple user themes, and it matches the themes of
other elements on the home screen, including the wallpaper,
themed app icons, and even

other widgets. When you're writing
your widget, be sure to test it using different
backgrounds, sizes, and layouts. Always remember that you can
limit the sizes of your widget display by setting
the different size properties in your
AppWidgetProviderInfo XML file.

You can also find
more sizing guidelines on developer.android.com's
widget design guidance. In addition to our widget
components and design guidelines, Glance has
canonical layout samples in our platform catalog
samples repository on GitHub. These layouts provide
ready-to-go implementations

of responsive, resizable layouts
for many different use cases and widgets. Feel free to take a look,
give them a try out, and use them in your project. Let's take some more time to
talk about the architecture of a widget.

Most widgets will have some
kind of state information that needs to be initialized
and configured, modified, and updated. Additionally, data
may be loaded, or your widget may
be in an error state. In this section,
we'll demonstrate

how to manage your widget
in your application and how to handle these
individual states. When a widget is added
to the home screen, it is usually best to have
some sort of zero state. This state prompts the user
to configure the widget.

It can either be a shortcut
into the application or provide the configuration
interface itself. Instead of displaying a
simple "Hello, World" message, our widget should instead
display a customized greeting with the user's name. In this example, our
widget reads its state

from a repository. When the state is
empty, it should prompt the user to add a name. We will use the button
component and an action created by Glance's
actionStartActivity method to do this. This action will call our
configuration activity

and provide the widget's
ID as a parameter. This can be the same
activity your widget uses for configuration. Developer.android.com
has more details about configuration activities. Creating a zero state
has an implied dependency on being able to read and
write some kind of state

from the application. This state should be managed
using a repository object. When modifying the state, be
sure to call the app widget's update method. Reading the state should be done
through an observable value. Because the update methods
are suspend functions,

we recommend launching them
outside of the main thread scope. In this example, they are
launched from a repository. Glance also supports
recomposition while the Glance
worker is running. Since only one Glance
worker per ID is running,

Glance widgets should
observe data sources within the composition to ensure
that updates are not missed. There's more to making
a high-quality widget than just a good design,
displaying relevant and timely information. We also have a
responsibility to our users

to gracefully handle errors and
provide users a way to recover. In Glance 1.1.0, we have updated
the look of our default error layout and provided a new
API to call in the case of a composition failure.

This API lets you add a
custom remote view layout to your widget to be displayed
when there's an unhandled error. Additionally, you can
override `onCompositionError` in your `GlanceAppWidget` class
to configure action handlers in your error view.

This should be used to
provide users with the ability to recover from the error state or
information about the error that occurred. Glance 1.1.0 also
has new testing APIs. These are available in
the `glance-testing` and

`glance-appwidget-testing`
modules. These APIs bring more
composed-style options for writing unit tests. These APIs give you
options for testing without needing to set up
data sources or a device. And with that, I hope
you've gotten an appetite

for building high-quality,
helpful, and engaging widgets using Jetpack Glance. I'll hand it back to
André for the conclusion. [APPLAUSE] ANDRE LABONTE: Thanks, Summers. Incorporating widgets
into your roadmap

can offer a range of benefits. Widgets can boost
your app's success by increasing visibility, user
engagement, and conversions. Widgets also give
your users the option to keep your app content visible
and provide convenient access to features that may
enhance user retention

and satisfaction with your app. We encourage you
to embrace widgets as part of your
Android app strategy, and check out our new widget
design site for inspiration and getting started with
canonical widget layouts. We're excited to see the
widgets that you'll build.

Build beautiful Android widgets with Jetpack Glance

Welcome to the official Android Developers YouTube channel. Get the latest Android news, best practices, live videos, demonstrations, tutorials, and more!


Android Developers

안드로이드 위젯 및 제트팩 한눈에 보기 소개

안드로이드 위젯의 가치와 젯팩 글랜스를 사용하여 위젯을 빌드하는 방법에 대한 프레젠테이션입니다.

위젯 기본 사항 개요: 정의, 사용자 사용법, 앱 개발자가 위젯을 고려해야 하는 이유.

위젯은 원격으로 렌더링되는 앱 UI의 일부로, 일반적으로 홈 화면에 표시되지만 다른 화면에도 표시될 수 있습니다.

위젯의 이점: 앱 가시성 향상, 사용자 참여도 향상, 전환 전략 강화.

사용자가 위젯을 사용하는 이유: 홈 화면 맞춤 설정, 자주 사용하는 기능에 대한 효율적인 액세스, 한 눈에 보기 쉬운 정보.

고품질 위젯을 디자인하기 위한 팁: 유용성, 단순성, 적응성, 시각적 응집력, 검색 가능성.

새로운 리소스: 향상된 유닛 테스트와 기본 UI 구성 요소, 표준 위젯 레이아웃이 포함된 Jetpack Glance 1.1.

표준 위젯 레이아웃: 텍스트 레이아웃, 목록 레이아웃, 그리드 레이아웃으로, 간소화된 개발을 위해 미리 빌드된 옵션을 제공합니다.

위젯 디자인 가이드는 developer.android.com에서 확인할 수 있습니다.

기술 컴포넌트: 앱위젯호스트, 앱위젯프로바이더정보, 앱위젯프로바이더.

원격 보기를 사용하는 앱 위젯 레이아웃과 애플리케이션 보기 개체와 비교되는 고유한 API.

위젯 추가 방법: 위젯 선택기, 애플리케이션에서 고정 또는 앱 아이콘 바로 가기.

젯팩 글랜스 소개: 젯팩 컴포즈를 기반으로 하는 위젯 개발을 위한 Google의 권장 접근 방식입니다.

글랜스 위젯을 빌드하는 단계: 프로젝트에 글랜스 추가, 글랜스앱위젯 및 글랜스앱위젯리시버 클래스 확장, 앱위젯프로바이더정보 XML 생성, 안드로이드 매니페스트에서 참조하기.

Glance 컴포저블을 사용하여 제공Glance 및 제공Content 메서드 구현하기.

AppWidgetProviderInfo XML 구성: 레이아웃, 크기 조정, 크기 제약 및 새로 고침 주기.

Android 매니페스트에 위젯을 추가하고 홈 화면에 위젯을 표시합니다.

고품질 위젯의 특징: 잘 정의된 모양, 테마 통합, 우아한 크기 조정, 대표 미리보기, 신선한 콘텐츠, 최소한의 제어 기능.

Glance 1.1.0 컴포넌트를 사용하여 위젯 모양과 동작 개선하기: 글라스 스캐폴드, 타이틀바 컴포넌트 및 컬러 토큰.

반응형 및 크기 조정 가능한 레이아웃을 위한 표준 레이아웃 샘플은 GitHub의 플랫폼 카탈로그 샘플 리포지토리에서 사용할 수 있습니다.

위젯 상태 관리: 제로 상태, 데이터 로딩, 오류 상태, 리포지토리 개체를 사용한 상태 관리.

상태 업데이트 및 관찰 가능한 값 사용, 메인 스레드 외부에서 업데이트 메서드 실행.

오류 처리: 기본 오류 레이아웃, 처리되지 않은 오류에 대한 사용자 지정 원격 보기 레이아웃, 액션 핸들러에 대한 `온컴포지션에러` 오버라이드가 업데이트되었습니다.

Glance 1.1.0의 새로운 테스트 API: 컴포짓 스타일 단위 테스트를 위한 `glance-testing` 및 `glance-appwidget-testing` 모듈.

위젯 통합의 이점: 가시성, 사용자 참여도, 전환율, 사용자 유지율 증가.

Android 앱 전략에서 위젯을 사용하도록 권장하고 새로운 위젯 디자인 사이트를 참조하세요.

Build beautiful Android widgets with Jetpack Glance

Build beautiful Android widgets with Jetpack Glance

스크립트