1. Giới thiệu về Home screen widgets và AppWidgetProvider
1.1 Home screen widget
- Home screen widget chính là các broadcast receivers, nó cung cấp các thành phần để tương tác với app. Nó chủ yếu được sử dụng trên màn home của hệ điều hành Android, như hình ảnh trên. Nó thường sẽ hiển thị một phần dữ liệu quan trọng của app và cho phép người dùng tương tác. Ví dụ như app dự báo thời tiết, nó sẽ hiển thị thông tin tóm tắt nhưng cần thiết với người dùng, khi user click vào widget thì nó sẽ mở app.
- Widget sẽ có một số các yếu điểm, vì nó là một ứng dụng nên nó sẽ tốn RAM, càng nhiều widget trên homescreen thì bạn sẽ càng có ít dung lượng RAM để sử dụng. Hoặc có những widget cần phải kết nối tới server riêng thì lúc đó bạn sẽ bị tốn lưu lượng. Vì vậy, bạn hãy cân nhắc khi sử dụng widget nhé !
- Widget sử dụng RemoteView để tạo giao diện, một RemoteView có thể được thực hiện bởi một tiến trình khác giống với quyền gốc của ứng dụng. Bằng cách này widget chạy với quyền của ứng dụng của nó.
- Giao diện người dùng cho một Widget được định nghĩa bởi một broadcast receiver. Receiver này sẽ gắn layout của nó vào một object có type là RemoteView. Object này sẽ được gửi tới Android, nó sẽ được chuyển lên màn home.
1.2 AppWidgetProvider
AppWidgetProvider là một class được extend từ BroadcastReceiver, tiện cho việc xử lý App Widget broadcasts. AppWidgetProvider chỉ nhận event broadcasts mà liên quan đến App Widget, ví dụ như là khi App Widget được update, xóa đi, enable hay disable. Khi có broadcast even thì AppWidgetProvider nhận những method sau:
onUpdate() : Hàm này được gọi để update App Widget trong khoảng thời gian được định nghĩa bởi thuộc tính updatePeriodMillis trong AppWidgetProviderInfo. Phương thức này cũng được gọi khi mà người dùng add App Widget, vì vậy nó sẽ thực hiện các setup cần thiết như là định nghĩa các event xử lý cho Views và start Service nếu cần. Tuy nhiên, nếu bạn khai báo một configuaration Activity, phương thức này không được gọi khi mà user add App Widget, nhưng sẽ được gọi cho lần update tiếp theo.
onAppWidgetOptionsChanged() : Hàm này được sử dụng từ API 16 trởi lên, nó được gọi khi nó lần đầu được đặt ra home và nó cũng được gọi khi mà nó thay đổi kích thước. Bạn có thể sử dụng callback này để show hoặc hide content dựa trên kích cỡ của widget. Để lấy kích thước của widget, gọi getAppWidgetOptions() nó sẽ return một Bundle bao gồm :
- OPTION_APPWIDGET_MIN_WIDTH— : Chứa giới hạn dưới của current width, đơn vị là dp.
- OPTION_APPWIDGET_MIN_HEIGHT— : Chứa giới hạn dưới của current height, đơn vị là dp.
- OPTION_APPWIDGET_MAX_WIDTH—: Chứa giới hạn trên của current width, đơn vị là dp.
- OPTION_APPWIDGET_MAX_HEIGHT—: Chứa giới hạn trên của current height, đơn vị là dp.
onDeleted(Context, int[]) : Hàm này được gọi khi mà một APP Widget bị xóa từ App Widget host.
onEnabled(Context) : Hàm này được gọi khi mà một instance App Widget được tạo lần đầu tiên. Ví dụ, nếu user add hai instances của App Widget, nó chỉ được gọi lần đầu tiên. Nếu bạn cần mở một database mới hoặc thực hiện setup một lần cho tất cả các App Widget instance thì hàm này là thích hợp để bạn làm điều đó.
onDisabled(Context) : Hàm này được gọi khi mà instance cuối cùng của App Widget bị xóa khỏi App Widget chủ. Hàm này thích hợp cho việc clean các công việc khi thực hiện xong ở hàm onEnable(Context), ví dụ như là xóa database tạm thời.
onReceive(Context, Intent) : Hàm này được gọi cho các broadcast và trước khi gọi mỗi phương thức ở trên. Bạn thường không cần implement phương thức này vì mặc định AppWidgetProvider nó sẽ lọc tất cả các App Widget broadcasts và gọi các phương thức ở trên.
Trong các callback trên thì onUpdate() là quan trọng nhất bởi vì nó được gọi khi App Widget được add vào host. Nếu App Widget của bạn phản hồi các tương tác của người dùng thì bạn vần implement phương thức này để handle nó trong đây. Nếu App Widget không cần tạo các file tạm hay database tạm thời, hoặc thực hiện các công việc yêu cầu clean-up thì có thể chỉ cần gọi mỗi hàm onUpdate() thôi.
2. Tạo một home screen widget
Để tạo một widget, bạn cần :
- Tạo một file layout
- Tạo một file XML (AppWidgetInfo) cái mà mô tả các thuộc tính của widget như là size hoặc chu kỳ update.
- Tạo một class extend từ AppWidgetProvider dùng để tạo giao diện cho widget.
- Cài đặt thông tin Widget vào file AndroidManifest.xml.
Trước Android 3.1, một widget luôn được fix cứng là một số lượng ô cố định trên màn home.
Sau phiên bản đó thì widget có thể thay đổi kích thước tùy vào ý định của người dùng. Để bật chức năng này cho widget, bạn cần sử dụng thuộc tính này trong file xml: android:resizeMode=”horizontal|vertical
Đầu tiên là tạo một file background cho widget như sau : background_widget.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token operator"><</span><span class="token operator">?</span>xml version<span class="token operator">=</span><span class="token string">"1.0"</span> encoding<span class="token operator">=</span><span class="token string">"utf-8"</span><span class="token operator">?</span><span class="token operator">></span> <span class="token operator"><</span>shape xmlns<span class="token operator">:</span>android<span class="token operator">=</span><span class="token string">"http://schemas.android.com/apk/res/android"</span> android<span class="token operator">:</span>shape<span class="token operator">=</span><span class="token string">"rectangle"</span> <span class="token operator">></span> <span class="token operator"><</span>stroke android<span class="token operator">:</span>width<span class="token operator">=</span><span class="token string">"2dp"</span> android<span class="token operator">:</span>color<span class="token operator">=</span><span class="token string">"#FFFFFFFF"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>gradient android<span class="token operator">:</span>angle<span class="token operator">=</span><span class="token string">"225"</span> android<span class="token operator">:</span>endColor<span class="token operator">=</span><span class="token string">"#DD2ECCFA"</span> android<span class="token operator">:</span>startColor<span class="token operator">=</span><span class="token string">"#DD000000"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>corners android<span class="token operator">:</span>bottomLeftRadius<span class="token operator">=</span><span class="token string">"7dp"</span> android<span class="token operator">:</span>bottomRightRadius<span class="token operator">=</span><span class="token string">"7dp"</span> android<span class="token operator">:</span>topLeftRadius<span class="token operator">=</span><span class="token string">"7dp"</span> android<span class="token operator">:</span>topRightRadius<span class="token operator">=</span><span class="token string">"7dp"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>shape<span class="token operator">></span> |
Tạo file layout cho widget : widget_layout.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <span class="token operator"><</span><span class="token operator">?</span>xml version<span class="token operator">=</span><span class="token string">"1.0"</span> encoding<span class="token operator">=</span><span class="token string">"utf-8"</span><span class="token operator">?</span><span class="token operator">></span> <span class="token operator"><</span><span class="token class-name">LinearLayout</span> xmlns<span class="token operator">:</span>android<span class="token operator">=</span><span class="token string">"http://schemas.android.com/apk/res/android"</span> android<span class="token operator">:</span>layout_width<span class="token operator">=</span><span class="token string">"match_parent"</span> android<span class="token operator">:</span>layout_height<span class="token operator">=</span><span class="token string">"match_parent"</span> android<span class="token operator">:</span>layout_margin<span class="token operator">=</span><span class="token string">"@dimen/dp_8"</span> android<span class="token operator">:</span>background<span class="token operator">=</span><span class="token string">"@drawable/background_widget"</span> android<span class="token operator">:</span>orientation<span class="token operator">=</span><span class="token string">"vertical"</span> android<span class="token operator">:</span>id<span class="token operator">=</span><span class="token string">"@+id/widgetLayout"</span><span class="token operator">></span> <span class="token operator"><</span><span class="token class-name">TextView</span> android<span class="token operator">:</span>id<span class="token operator">=</span><span class="token string">"@+id/titleWidget"</span> style<span class="token operator">=</span><span class="token string">"@android:style/TextAppearance.Medium"</span> android<span class="token operator">:</span>layout_width<span class="token operator">=</span><span class="token string">"wrap_content"</span> android<span class="token operator">:</span>layout_height<span class="token operator">=</span><span class="token string">"wrap_content"</span> android<span class="token operator">:</span>layout_gravity<span class="token operator">=</span><span class="token string">"center"</span> android<span class="token operator">:</span>layout_margin<span class="token operator">=</span><span class="token string">"4dip"</span> android<span class="token operator">:</span>textColor<span class="token operator">=</span><span class="token string">"@color/white"</span> android<span class="token operator">:</span>text<span class="token operator">=</span><span class="token string">"Name update: "</span><span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token class-name">TextView</span> android<span class="token operator">:</span>id<span class="token operator">=</span><span class="token string">"@+id/timeWidget"</span> style<span class="token operator">=</span><span class="token string">"@android:style/TextAppearance.Medium"</span> android<span class="token operator">:</span>layout_width<span class="token operator">=</span><span class="token string">"wrap_content"</span> android<span class="token operator">:</span>layout_height<span class="token operator">=</span><span class="token string">"wrap_content"</span> android<span class="token operator">:</span>layout_gravity<span class="token operator">=</span><span class="token string">"center"</span> android<span class="token operator">:</span>layout_margin<span class="token operator">=</span><span class="token string">"4dip"</span> android<span class="token operator">:</span>gravity<span class="token operator">=</span><span class="token string">"center_horizontal|center_vertical"</span> android<span class="token operator">:</span>textColor<span class="token operator">=</span><span class="token string">"@color/white"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span><span class="token class-name">LinearLayout</span><span class="token operator">></span> |
File info cho widget : tạo ở thư mục res/xml : widget_info.xml
1 2 3 4 5 6 7 8 9 10 11 | <span class="token operator"><</span><span class="token operator">?</span>xml version<span class="token operator">=</span><span class="token string">"1.0"</span> encoding<span class="token operator">=</span><span class="token string">"utf-8"</span><span class="token operator">?</span><span class="token operator">></span> <span class="token operator"><</span>appwidget<span class="token operator">-</span>provider xmlns<span class="token operator">:</span>android<span class="token operator">=</span><span class="token string">"http://schemas.android.com/apk/res/android"</span> android<span class="token operator">:</span>initialLayout<span class="token operator">=</span><span class="token string">"@layout/widget_layout"</span> android<span class="token operator">:</span>previewImage<span class="token operator">=</span><span class="token string">"@mipmap/ic_launcher"</span> android<span class="token operator">:</span>minHeight<span class="token operator">=</span><span class="token string">"72dp"</span> android<span class="token operator">:</span>minWidth<span class="token operator">=</span><span class="token string">"300dp"</span> android<span class="token operator">:</span>updatePeriodMillis<span class="token operator">=</span><span class="token string">"30000"</span> <span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>appwidget<span class="token operator">-</span>provider<span class="token operator">></span> |
Sau đó tạo Class MovieWidgetProvider extend từ AppWidgetProvider :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token keyword">class</span> <span class="token class-name">MovieWidgetProvider</span> <span class="token operator">:</span> <span class="token class-name">AppWidgetProvider</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> override fun <span class="token function">onUpdate</span><span class="token punctuation">(</span> context<span class="token operator">:</span> <span class="token class-name">Context</span><span class="token operator">?</span><span class="token punctuation">,</span> appWidgetManager<span class="token operator">:</span> <span class="token class-name">AppWidgetManager</span><span class="token operator">?</span><span class="token punctuation">,</span> appWidgetIds<span class="token operator">:</span> <span class="token class-name">IntArray</span><span class="token operator">?</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> override fun <span class="token function">onReceive</span><span class="token punctuation">(</span>context<span class="token operator">:</span> <span class="token class-name">Context</span><span class="token operator">?</span><span class="token punctuation">,</span> intent<span class="token operator">:</span> <span class="token class-name">Intent</span><span class="token operator">?</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">onReceive</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> intent<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Thêm các thông tin của widget vào file AndroidManifest.xml :
1 2 3 4 5 6 7 8 9 | <span class="token operator"><</span>receiver android<span class="token operator">:</span>name<span class="token operator">=</span><span class="token string">".screen.widget.MovieWidgetProvider"</span><span class="token operator">></span> <span class="token operator"><</span>intent<span class="token operator">-</span>filter<span class="token operator">></span> <span class="token operator"><</span>action android<span class="token operator">:</span>name<span class="token operator">=</span><span class="token string">"android.appwidget.action.APPWIDGET_UPDATE"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>intent<span class="token operator">-</span>filter<span class="token operator">></span> <span class="token operator"><</span>meta<span class="token operator">-</span>data android<span class="token operator">:</span>name<span class="token operator">=</span><span class="token string">"android.appwidget.provider"</span> android<span class="token operator">:</span>resource<span class="token operator">=</span><span class="token string">"@xml/widget_info"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>receiver<span class="token operator">></span> |
Ở đây, mình kết hợp với FirebaseMessagingService để nhận thông báo và update widget mỗi khi có silent push :
( Để nhận silent push thì noti bắn về không có cục notification mà chỉ có cục data thôi )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | override fun <span class="token function">onMessageReceived</span><span class="token punctuation">(</span>remoteMessage<span class="token operator">:</span> <span class="token class-name">RemoteMessage</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">onMessageReceived</span><span class="token punctuation">(</span>remoteMessage<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token string">""</span> remoteMessage<span class="token punctuation">.</span>data<span class="token punctuation">.</span>let <span class="token punctuation">{</span> data <span class="token operator">-></span> name <span class="token operator">=</span> data<span class="token punctuation">[</span><span class="token string">"name"</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>name<span class="token punctuation">.</span><span class="token function">isNullOrEmpty</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> val view <span class="token operator">=</span> <span class="token class-name">RemoteViews</span><span class="token punctuation">(</span>packageName<span class="token punctuation">,</span> <span class="token class-name">R</span><span class="token punctuation">.</span>layout<span class="token punctuation">.</span>widget_layout<span class="token punctuation">)</span> view<span class="token punctuation">.</span><span class="token function">setTextViewText</span><span class="token punctuation">(</span><span class="token class-name">R</span><span class="token punctuation">.</span>id<span class="token punctuation">.</span>timeWidget<span class="token punctuation">,</span> name<span class="token punctuation">)</span> val theWidget <span class="token operator">=</span> <span class="token class-name">ComponentName</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token class-name">MovieWidgetProvider</span><span class="token operator">::</span><span class="token keyword">class</span><span class="token punctuation">.</span>java<span class="token punctuation">)</span> val manager <span class="token operator">=</span> <span class="token class-name">AppWidgetManager</span><span class="token punctuation">.</span><span class="token function">getInstance</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span> manager<span class="token punctuation">.</span><span class="token function">updateAppWidget</span><span class="token punctuation">(</span>theWidget<span class="token punctuation">,</span> view<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token punctuation">}</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token punctuation">}</span> |
Kết quả như sau :
Hết roài, xin chào và hẹn gặp lại !!
Tham khảo :
Android docs : https://developer.android.com/reference/android/appwidget/AppWidgetProvider