2018年5月31日木曜日

I/O Recap : Slices

https://developer.android.com/guide/slices/

Slices は自分のアプリの情報を他のアプリに表示するための仕組みです。
コンセプトとしては App Widget で使う RemoteViews と似ていますが、使えるレイアウトは用意されているテンプレートだけなど制限があります。 Google Search の検索結果で利用することを例示されていることからも、統一された Look and Feel を持たせたいのかなと思います。

Google Search アプリで2018年夏に対応することが Google I/O 2018 のセッションでアナウンスされていました。 将来的に Google Assistant での応答結果に利用できるようになることもアナウンスされていました。

Slices のサポートが Jetpack に組み込まれており、これを利用すると Android 4.4 以降に対応できます。

前提条件

  • AndroidX にリファクタリングされていること
  • 必須ではないが Android Studio 3.2 以降には Slice を開発するのに便利なツールや機能が追加されている

Slice Provider Widzard

Android Studio 3.2 には Slice Provider を追加する Widzard が用意されています。 この Widzard を使うと
  • build.gradle に slice の dependencies を追加
  • SliceProvider を継承したクラスの生成
  • AndroidManifest に Provider の宣言を追加
を自動で行ってくれます。

* Android Studio 3.2 Canary 15 まで Wizard で追加される dependencies が typo しているバグがありました。Canary 16 では修正されています。 https://issuetracker.google.com/issues/79996770


dependencies の設定

現時点(2018年5月31日)での最新版は 1.0.0-alpha2 です。
  1. implementation "androidx.slice:slice-core:1.0.0-alpha2"  
  2. implementation "androidx.slice:slice-builders:1.0.0-alpha2"  

SliceProvider を継承したクラスを用意

自分のアプリで Slice を提供するには SliceProvider を継承したクラスを用意します。 androidx.slice.SliceProviderandroid.app.slice.SliceProvider があるので注意してください。
  1. import androidx.slice.Slice  
  2. import androidx.slice.SliceProvider  
  3. ...  
  4.   
  5. class MySliceProvider : SliceProvider() {  
  6.   
  7.     override fun onCreateSliceProvider(): Boolean {  
  8.         return true  
  9.     }  
  10.   
  11.     override fun onBindSlice(sliceUri: Uri): Slice? {  
  12.         ...  
  13.     }      
  14. }  

AndroidManifest に Provider の宣言を追加

android:exported="true" が必要です。
  1. <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     package="com.android.example.slicecodelab">  
  3.   
  4.     <application  
  5.         ... >  
  6.   
  7.         ...  
  8.   
  9.         <provider  
  10.             android:name=".MySliceProvider"  
  11.             android:authorities="com.android.example.slicecodelab"  
  12.             android:exported="true" />  
  13.   
  14.     </application>  
  15.   
  16. </manifest>  

Uri と Slice の bind

各 Slice は URI と紐づいており、Slice の表示がリクエストされると SliceProvider の onBindSlice(uri: Uri) が呼ばれます。
onBindSlice(uri: Uri) では送られてきた Uri を処理し、対応する Slice インスタンスを返します。
  1. override fun onBindSlice(sliceUri: Uri): Slice? {  
  2.     return when (sliceUri.path) {  
  3.         "/temperature" -> {  
  4.             ListBuilder(context, sliceUri, ListBuilder.INFINITY)  
  5.                     .addRow {  
  6.                         it.setTitle("Temperature : $temperature")  
  7.                     }  
  8.                     .build()  
  9.         }  
  10.         else -> null  
  11.     }  
  12. }  
引数の sliceUri には content://<authorities>/<path> が入ってきます。


Slice の更新

Slice で表示している内容を更新したいときは Slice の Uri に対して notifyChange() を呼びます。 そうすると Provider の onBindSlice(uri: Uri) が呼ばれるので新しい内容で Slice を作ります。
  1. class MyBroadcastReceiver : BroadcastReceiver() {  
  2.   
  3.     override fun onReceive(context: Context, intent: Intent) {  
  4.         // update slice related data  
  5.         ...  
  6.           
  7.         context.contentResolver.notifyChange(sliceUri, null)  
  8.     }  
  9. }  

Templates

https://developer.android.com/guide/slices/templates

Slice は TemplateSliceBuilder を 継承したクラスを使って作ります。 このうち、一番外側の Slice は ListBuilder で作ります。


ListBuilder

List 形式の Slice を作成できます。
子要素(一行の要素)として ListBuilder.RowBuilder、ListBuilder.HeaderBuilder、ListBuilder.RangeBuilder、ListBuilder.InputRangeBuilder、GridRowBuilder を追加できます。HeaderBuilder は一つしか指定できませんが、その他は複数追加できます。

MODE_SHORTCUT では、Header に PrimaryAction が指定されていればそれが使われ、なければ最初の Row の PrimaryAction が使われます。
MODE_SMALL では 1 row だけ表示されます。Header が指定されていればそれだけが表示され、なければ最初の Row だけが表示されます。
MODE_LARGE では表示可能な数だけ row が表示されます。Slice を表示する側が scrolling に対応していれば全ての row がスクロールできるビュー内に表示されます。

ListBuilder のコンストラクタでは TTL をミリ秒で指定します。time sensitive なコンテンツを含まない場合は ListBuilder.INFINITY を指定します。

setAccentColor(color: Int) で accentColor を指定できます。accentColor はアイコンの tint や toggle の tint、horizontal progress の tint などに適用されます。
  1. private fun createSlice(sliceUri: Uri): Slice? {  
  2.     return ListBuilder(context, sliceUri, ListBuilder.INFINITY)  
  3.             .setAccentColor(Color.BLUE)  
  4.             ...  
  5.             .build()  
  6. }  



setKeywords(keywords: List) で指定したキーワードは Slice の Hints(getHints() で取得できる)に追加されます。
  1. private fun createSlice(sliceUri: Uri): Slice? {  
  2.     return ListBuilder(context, sliceUri, ListBuilder.INFINITY)  
  3.             .setKeywords(listOf("Cupcake""Donuts""Eclair"))  
  4.             ...  
  5.             .build()  
  6. }  


WiFi 設定など表示したい row が多いときは setSeeMoreAction(intent: PendingIntent) を指定しておくと、全ての row が表示できないときに右下に See more ボタンが表示されるようになります。
  1. private fun createSlice(sliceUri: Uri): Slice? {  
  2.     val seeMoreIntent = ...  
  3.   
  4.     return ListBuilder(context, sliceUri, ListBuilder.INFINITY)  
  5.             .setSeeMoreAction(seeMoreIntent)  
  6.             ...  
  7.             .build()  
  8. }  



addAction() で Header の右側に SliceAction を表示させることができます(Header がない場合最初の Row の右側に表示されますが、Header が指定されている前提の機能だと思います)。
複数追加できますが 3つまでしか表示されませんでした。
  1. private fun createSlice(sliceUri: Uri): Slice? {  
  2.     val pendingIntent = ...  
  3.   
  4.     val homeAction = SliceAction(  
  5.             pendingIntent,  
  6.             IconCompat.createWithResource(context, R.drawable.ic_home),  
  7.             ListBuilder.ICON_IMAGE,  
  8.             "Home")  
  9.   
  10.     return ListBuilder(context, sliceUri, ListBuilder.INFINITY)  
  11.             .addAction(homeAction)  
  12.             .setHeader {  
  13.                 it.setTitle("title")  
  14.                         .setSubtitle("sub title")  
  15.                         .setContentDescription("description")  
  16.             }  
  17.             .build()  
  18. }  



ListBuilder.RowBuilder

ListBuilder の子要素(一行の要素)として Row を表示できます。
コンストラクタで親の ListBuilder インスタンスを指定する必要がありますが、それだけではリストに追加されず ListBuilder.addRow() で明示的にリストに追加する必要があります。

setPrimaryAction() で指定した SliceAction は Row がタップされた時だけでなく、モードが SliceView.MODE_SHORTCUT のときにも使われます。

title, subTitle の第2引数で load 中かどうかを指定すると、SliceItem の Hints(getHints() で取得できる)に Slice.HINT_PARTIAL が追加されます。
  1. private fun createRowSlice(sliceUri: Uri): Slice? {  
  2.     val pendingIntent = ...  
  3.   
  4.     val action = SliceAction(  
  5.             pendingIntent,  
  6.             IconCompat.createWithResource(context, R.drawable.ic_launcher),  
  7.             "Home")  
  8.   
  9.     return ListBuilder(context, sliceUri, ListBuilder.INFINITY)  
  10.             .addRow {  
  11.                 it.setTitle("title")  
  12.                         .setSubtitle("sub title")  
  13.                         .setContentDescription("description")  
  14.                         .setPrimaryAction(action)  
  15.             }  
  16.             .build()  
  17. }  
左 : MODE_SHORTCUT、右 : MODE_LARGE




addEndItem(timeStamp: Long) で右側に timestamp を表示することができます。
指定した timeStamp の long 値から自動で差分時間表示(10 min ago とか)になります。
  1. private fun createRowSlice(sliceUri: Uri): Slice? {  
  2.     return ListBuilder(context, sliceUri, ListBuilder.INFINITY)  
  3.             .addRow {  
  4.                 it.setTitle("title")  
  5.                         .setSubtitle("sub title")  
  6.                         .setContentDescription("description")  
  7.                         .addEndItem(System.currentTimeMillis() - 10 * 60 * 1000)  
  8.             }  
  9.             .build()  
  10. }  



addEndItem(icon: IconCompat, imageMode: Int) で右端にアイコンを表示することができます。

imageMode には のどれかを指定します。 ICON_IMAGE を指定すると小さいサイズで表示され tint されます。SMALL_IMAGE、LARGE_IMAGE では tint されません。

アイコンは複数追加できますが 3つまでしか表示されませんでした。
  1. private fun createRowSlice(sliceUri: Uri): Slice? {  
  2.     return ListBuilder(context, sliceUri, ListBuilder.INFINITY)  
  3.         .addRow {  
  4.             it.setTitle("title")  
  5.                 .setSubtitle("sub title")  
  6.                 .setContentDescription("description")  
  7.                 .addEndItem(  
  8.                     IconCompat.createWithResource(context, R.drawable.ic_home),  
  9.                     ListBuilder.ICON_IMAGE)  
  10.         }  
  11.         .build()  
  12. }  
左 : ICON_IMAGE、中 : SMALL_IMAGE、右 : LARGE_IMAGE



左 : ICON_IMAGE での MODE_SHORTCUT、右 : LARGE_IMAGE での MODE_SHORTCUT




addEndItem(action: SliceAction) で右側に SliceAction を表示できます。

EndItem にアイコン(上記)と SliceAction を併用することはできません。
  1. private fun createRowSlice(sliceUri: Uri): Slice? {  
  2.     val pendingIntent = ...  
  3.   
  4.     val homeAction = SliceAction(  
  5.             pendingIntent,  
  6.             IconCompat.createWithResource(context, R.drawable.ic_home),  
  7.             ListBuilder.ICON_IMAGE,  
  8.             "Home")  
  9.   
  10.     return ListBuilder(context, sliceUri, ListBuilder.INFINITY)  
  11.         .addRow {  
  12.             it.setTitle("title")  
  13.                 .setSubtitle("sub title")  
  14.                 .setContentDescription("description")  
  15.                 .addEndItem(homeAction)  
  16.         }  
  17.         .build()  
  18. }  



toggle 表示用の SliceAction を指定するとスイッチを表示できます。
  1. private fun createRowSlice(sliceUri: Uri): Slice? {  
  2.     val pendingIntent = ...  
  3.   
  4.     val toggleAction = SliceAction(  
  5.             pendingIntent,  
  6.             "Toggle",  
  7.             true)  
  8.   
  9.     return ListBuilder(context, sliceUri, ListBuilder.INFINITY)  
  10.         .addRow {  
  11.             it.setTitle("title")  
  12.                 .setSubtitle("sub title")  
  13.                 .setContentDescription("description")  
  14.                 .addEndItem(toggleAction)  
  15.         }  
  16.         .build()  
  17. }  



setTitleItem() で左側に Timestamp、アイコン、SliceAction が表示できるはずなのですが、指定しても表示されませんでした。


ListBuilder.HeaderBuilder

ListBuilder の子要素(一行の要素)として Header を表示できます。
コンストラクタで親の ListBuilder インスタンスを指定する必要がありますが、それだけではリストにセットされず ListBuilder.setHeader() で明示的にリストにセットする必要があります。
ListBuilder にセットできる HeaderBuilder は一つだけです。

title, subTitle に加えて summary をセットすることができ、summary はモードが SliceView.MODE_SMALL のときに使われます。

setPrimaryAction() で指定した SliceAction は Header がタップされた時だけでなく、モードが SliceView.MODE_SHORTCUT のときにも使われます。

title, subTitle, summary の第2引数で load 中かどうかを指定すると、SliceItem の Hints(getHints() で取得できる)に Slice.HINT_PARTIAL が追加されます。
  1. private fun createHeaderSlice(sliceUri: Uri): Slice? {  
  2.     val pendingIntent = ...  
  3.   
  4.     val action = SliceAction(  
  5.             pendingIntent,  
  6.             IconCompat.createWithResource(context, R.drawable.ic_launcher_foreground),  
  7.             "Temperature controls")  
  8.   
  9.     return ListBuilder(context, sliceUri, ListBuilder.INFINITY)  
  10.         .setHeader {  
  11.             it.setTitle("title")  
  12.                 .setSubtitle("sub title")  
  13.                 .setContentDescription("description")  
  14.                 .setSummary("summary")  
  15.                 .setPrimaryAction(action)  
  16.         }  
  17.         .build()  
  18. }  
左: MODE_SHORTCUT、中 : MODE_SMALL、右 : MODE_LARGE




ListBuilder.RangeBuilder

ListBuilder の子要素(一行の要素)として horizontal progress を表示できます。
コンストラクタで親の ListBuilder インスタンスを指定する必要がありますが、 それだけではリストに追加されず ListBuilder.addRange() で明示的にリストに追加する必要があります。

Min は 0、Max のデフォルト値は 100、Value のデフォルト値は 0 です。
  1. private fun createRangeSlice(sliceUri: Uri): Slice? {  
  2.     return ListBuilder(context, sliceUri, ListBuilder.INFINITY)  
  3.         .addRange {  
  4.             it.setTitle("title")  
  5.                 .setSubtitle("sub title")  
  6.                 .setContentDescription("description")  
  7.                 .setMax(10)  
  8.                 .setValue(5)  
  9.         }  
  10.         .build()  
  11. }  
左: setMax(), setValue() のみ、右 : title, subTitle あり




ListBuilder.InputRangeBuilder

ListBuilder の子要素(一行の要素)として horizontal slider を表示できます。
コンストラクタで親の ListBuilder インスタンスを指定する必要がありますが、 それだけではリストに追加されず ListBuilder.addInputRange() で明示的にリストに追加する必要があります。

Min のデフォルト値は 0、Max のデフォルト値は 100、Value のデフォルト値は 0 です。
InputAction は必須です。
  1. private fun createInputRangeSlice(sliceUri: Uri): Slice? {  
  2.     val pendingIntent = ...  
  3.   
  4.     return ListBuilder(context, sliceUri, ListBuilder.INFINITY)  
  5.         .addInputRange {  
  6.             it.setTitle("title")  
  7.                 .setSubtitle("sub title")  
  8.                 .setContentDescription("description")  
  9.                 .setMin(5)  
  10.                 .setMax(10)  
  11.                 .setValue(8)  
  12.                 .setThumb(IconCompat.createWithResource(context, R.drawable.square))  
  13.                 .setInputAction(pendingIntent)  
  14.         }  
  15.         .build()  
  16. }  
左: setMin(), setMax(), setValue() のみ、中 : title, subTitle あり、右 : setThumb()




GridRowBuilder

ListBuilder の子要素(一行の要素)として horizontal grid を表示できます。
grid の各アイテムは GridRowBuilder.CellBuilder で作成します。

コンストラクタで親の ListBuilder インスタンスを指定する必要がありますが、 それだけではリストに追加されず ListBuilder.addGridRow() で明示的にリストに追加する必要があります。

ListBuilder と同じように setSeeMoreAction(intent: PendingIntent) で see more ボタンを表示する機能があります。


GridRowBuilder.CellBuilder

GridRowBuilder の子要素(1アイテム)として cell を表示できます。

コンストラクタで親の GridRowBuilder インスタンスを指定する必要がありますが、 それだけではグリッドに追加されず GridRowBuilder.addCell() で明示的にグリッドに追加する必要があります。

addTitleText() でタイトルスタイルで表示したいテキストを追加し、addText() でノーマルスタイルで表示したいテキストを追加します。 両方含め最初に追加したテキスト2つが利用され、それ以降に追加されたテキストは無視されます。

addImage() で画像を追加します。最初に追加した画像1つが利用され、それ以降に追加した画像は無視されます。

setContentIntent() で cell をタップしたときに発行される PendingIntent を指定することができます。
  1. private fun createGridSlice(sliceUri: Uri): Slice? {  
  2.     ...  
  3.   
  4.     val action = ...  
  5.     val seeMoreIntent = ...  
  6.   
  7.     return ListBuilder(context, sliceUri, ListBuilder.INFINITY)  
  8.         .addGridRow {  
  9.             it.setContentDescription("description")  
  10.                 .setPrimaryAction(action)  
  11.                 .setSeeMoreAction(seeMoreIntent)  
  12.                 .addCell {  
  13.                     it.addImage(  
  14.                         IconCompat.createWithResource(context, R.drawable.ic_home),  
  15.                         ListBuilder.LARGE_IMAGE)  
  16.                         .addTitleText("Title")  
  17.                         .addText("normal")  
  18.                         .setContentDescription("description")  
  19.                         .setContentIntent(cellIntent)  
  20.                 }  
  21.                 ...  
  22.         }  
  23.         .build()  
  24. }  


ドキュメントには cell の数について言及されていませんが、SliceViewer(後述)では5つまで表示されました。
また、setSeeMoreAction() すると、4つ表示 + More になりました。



なぜか SliceViewer(1.0.0-alpha1.1 で確認)では画像が長方形に表示されてしまうのですが、Google Search が対応したときにはちゃんと正方形で表示されると思います。

画像のみ



左: テキストのみ MODE_SMALL、右: テキストのみ MODE_LARGE



左: 画像 + テキスト MODE_SMALL、右: 画像 + テキスト MODE_LARGE



MODE_SMALL では表示されるテキストが1つだけになります。



Slice Viewer

https://developer.android.com/guide/slices/getting-started#run-the-slice-viewer

自分のアプリの Slice の表示を確認するために SliceViewer サンプル が用意されています。
このサンプルの apk ダウンロードしデバイスにインストールします。
  1. $ adb install -r -t slice-viewer.apk  
自分の Slice を表示確認をするには、slice-<表示させたい Slice の URI> を Intent の Data として指定します。
  1. $ adb shell am start -a android.intent.action.VIEW -d slice-content://com.android.example.slicecodelab/temperature  
ランチャーから SliceViewer アプリを起動し、アプリ内の検索バーで <表示させたい Slice の URI> を検索すると、トップの一覧画面に検索した Slice が表示されます。


Codelabs

Creating Android Slices
  • Java のみで Kotlin 版はない
  • androidx.slice のバージョンが 1.0.0-alpha1 になっているが 1.0.0-alpha2 が出ている
  • P と androidx で同じ名前のクラスでも API が異なるので import 先が androidx になっているか注意すべし

Google I/O 2018 session





2018年5月26日土曜日

I/O Recap : ML Kit 情報まとめ(Android 向け)

* 以下は 2018年5月25日時点での情報です。


ML Kit for Firebase

現在 ML Kit はベータで、以下の機能を Android と iOS で利用することができます。
  • テキスト認識(Text recognition)
  • 顔検出(Face detection)
  • バーコードの読み取り(Barcode scanning)
  • 画像のラベルづけ(Image labeling)
  • ランドマーク認識(Landmark recognition)
  • 独自 TensorFlow Lite モデルの実行(TensorFlow Lite model serving)
  • (Google I/O 2018 のセッションで High density face contour feature と Smart Replay API が Coming soon であると紹介されています。いずれも on-device で real time に動作するようです)

これらの処理にはデバイス上で行う on-device API とクラウドで実行される cloud-based API が用意されています。
on-device API はリアルタイムに処理でき、オフラインでも動作し、無料で使うことができます。
cloud-based API(Cloud Vision API)は on-device API よりも詳しい情報を提供しますが、一定の利用回数以上は有料です。

例えばテキスト認識では、on-device API では Latin-based language しか認識できず、他の言語も認識したいなら cloud-based API を使う必要があります。
画像のラベルづけでは、on-device API では 400+ labels ですが cloud-based API なら 1000+ labels に対応しています。

Cloud Vision API を利用するには Firebase の課金プランを Blaze(従量制課金)にする必要があります。
Firebase Pricing Plans

機能ごとに毎月1000 API calls までは無料で使うことができます。
Cloud Vision API Pricing

独自の TensorFlow Lite モデルを Firebase に upload するだけで、アプリからそのモデルを実行できるようになります。 モデルのホスティングと実行は無料で使うことができます。


API には on-device でのみ使えるもの、Cloud でのみ使えるもの、両方用意されているものがあります。

機能on-deviceCloud
テキスト認識oo
顔検出o
バーコード読み取りo
画像のラベルづけoo
ランドマーク認識o
独自モデルの実行o


テキスト認識

https://firebase.google.com/docs/ml-kit/recognize-text

画像からテキストを認識します。

on-device API と cloud-based API 両方用意されています。 on-device API は Latin-based language のみ認識でき、cloud-based API は他の言語にも対応しています。

on-device API は無料で使うことができ、cloud-based API は毎月1000 API calls までは無料で使うことができます。
cloud-based API を使うには Firebase の課金プランを Blaze(従量制課金)にする必要があります。

最新は 16.0.0 です。
  1. dependencies {  
  2.     implementation 'com.google.firebase:firebase-ml-vision:16.0.0'  
  3. }  

cloud-based API には通常の文字認識用の FirebaseVisionCloudTextDetector の他に、書類のように文字密度の高いテキストの認識用に FirebaseVisionCloudDocumentTextDetector が用意されています。


顔検出

https://firebase.google.com/docs/ml-kit/detect-faces

画像から顔を検出します。
目・耳・頬・鼻・口の位置を取得できます。
笑顔かどうか(笑顔の確率)を取得できます。
目が閉じているかどうか(目が閉じている確率)を取得できます。
検出された個々の顔ごとの識別子を取得でき、動画のフレーム間で同一の顔をトラッキングできます。

on-device API のみです。無料で使うことができます。

最新は 16.0.0 です。
  1. dependencies {  
  2.     implementation 'com.google.firebase:firebase-ml-vision:16.0.0'  
  3. }  


バーコード読み取り

https://firebase.google.com/docs/ml-kit/read-barcodes

画像からバーコードを読み取ります。

対応フォーマット
  • Linear formats: Codabar, Code 39, Code 93, Code 128, EAN-8, EAN-13, ITF, UPC-A, UPC-E
  • 2D formats: Aztec, Data Matrix, PDF417, QR Code
バーコードの向きに関係なく認識します。

on-device API のみです。無料で使うことができます。

最新は 16.0.0 です。
  1. dependencies {  
  2.     implementation 'com.google.firebase:firebase-ml-vision:16.0.0'  
  3. }  


画像のラベルづけ

https://firebase.google.com/docs/ml-kit/label-images

追加のメタ情報なしで画像内のエンティティ(人、物、場所、活動など)を認識し、リストとして取得できます。

on-device API と cloud-based API 両方用意されており、on-device API は 400+ labels に、cloud-based API は 1000+ labels に対応しています。
on-device API は無料で使うことができ、cloud-based API は毎月1000 API calls までは無料で使うことができます。
cloud-based API を使うには Firebase の課金プランを Blaze(従量制課金)にする必要があります。

最新は 16.0.0、on-device API は 15.0.0 です。
  1. dependencies {  
  2.     implementation 'com.google.firebase:firebase-ml-vision:16.0.0'  
  3.     // on-device  
  4.     implementation 'com.google.firebase:firebase-ml-vision-image-label-model:15.0.0'  
  5. }  


ランドマーク認識

https://firebase.google.com/docs/ml-kit/recognize-landmarks

画像からランドマーク(例えば東京タワーなど)を認識します。

cloud-based API のみです。そのため Firebase の課金プランを Blaze(従量制課金)にする必要があります。毎月1000 API calls までは無料です。

最新は 16.0.0 です。
  1. dependencies {  
  2.     implementation 'com.google.firebase:firebase-ml-vision:16.0.0'  
  3. }  


独自 TensorFlow Lite モデルの実行

https://firebase.google.com/docs/ml-kit/use-custom-models

独自の TensorFlow Lite モデルは Firebase console からアップロードします。

アプリへのモデルのダウンロードは Firebase が動的に行ってくれるため、APK にモデルをバンドルする必要がありません。これによりアプリのインストール時のサイズを減らすことができます。
また、アプリのリリースとモデルのリリース(Firebase への upload)プロセスが分離されることで、それぞれのチームでリリースをハンドリングできるようになります。

Firebase Remote Config と組み合わせれば A/B test を行うこともできます。
full TensorFlow モデルを lightweight TensorFlow Lite モデルへ変換・圧縮する機能が coming soon だと I/O で発表されています。

(Firebase console に upload せずに)APK にモデルをバンドルしたり、自分のサーバーでモデルをホストしてアプリにダウンロードして、それを ML Kit の API 経由で使うこともできます。


最新は 16.0.0 です。
  1. dependencies {  
  2.     implementation 'com.google.firebase:firebase-ml-model-interpreter:16.0.0'  
  3. }  
upload した独自モデルを使うには、FirebaseCloudModelSource.Builder にモデル名を渡して指定します。
(I/O のセッション動画のコードが古いので注意)
モデル名は Firebase にモデルをアップロードするときに指定します。あとから変更はできません。
  1. val cloudSource = FirebaseCloudModelSource.Builder("my_model_v1")  
  2.         ...  
  3.         .build()  
RemoteConfig でモデル名を切り替えるようにすれば、target ごとにそれぞれ異なるモデルを使うことができます。
  1. val modelName = firebaseRemoteConfig.getString("my_model")  
  2. val cloudSource = FirebaseCloudModelSource.Builder(modelName)  
  3.         ...  
  4.         .build()  


High density face contour feature

I/O のセッション動画 より



100以上の点を検出し 60fps で処理できるとのこと。 coming pretty soon だそうです。


ML Kit console

左側のメニューの [DEVELOP] - [ML Kit] で ML Kit のコンソールを開くことができます。



ここのカスタムタブから独自モデルをアップロードします。



Codelabs

最初に Codelabs のアプリで動作を見てからドキュメントを読むのがよいと思います。
実際に両方ともやりましたが on-device での認識が速くすごいと思いました。

Android 向けの ML Kit のコードラボは2つ用意されています。
サンプルコードは Java で Kotlin 版は用意されていません。

Recognize text in images with ML Kit for Firebase
  • アプリにあらかじめ用意されている画像からテキストを認識する
  • on-device API と cloud-based API 両方使う
  • Cloud Vision API (https://console.cloud.google.com/apis/library/vision.googleapis.com/)を試すには Firebase の料金プランを Blaze(従量課金制)にしないといけない
左: on-device API での認識結果、右 : cloud-based API での認識結果




Identify objects in images using custom machine learning models with ML Kit for Firebase
  • アプリにあらかじめ用意されている画像に対し独自 TensowFlow Lite モデルを実行し、物体を認識する
  • TensorFlow Lite のモデルファイルが用意されているので Firebase console の設定等実際に試すことができてよい



Quick Start Sample

コードラボはテキスト認識と独自モデルしかないので、その他の機能を使い方をみるには Github で公開されている Quick Start Sample が参考になります。
  • Live Preview : カメラのプレビューに対して on-device API (顔検出、テキスト認識、バーコード読み取り、画像のラベルづけ、独自モデル)を実行
  • Still Image : 画像に対して cloud-based API(画像のラベルづけ、ランドマーク認識、テキスト認識)を実行





Google I/O 2018 session



Reference




2018年5月18日金曜日

IO recap : Android vitals: debug app performance and reap rewards (Google I/O '18)



星1つのレビューでは42%のユーザーが安定性やバグについて言及している
星5つのレビューでは73%のユーザーがスピード、デザイン、使いやすさについて言及している

ANR 率やクラッシュ率が上がると、ユーザーがアプリで費やす時間が有意に減る


Android vitals とは、Android デバイスの安定性とパフォーマンスを向上するための Google が主導する取り組み
もっとも重要なパフォーマンスメトリクスであるバッテリー、安定性、レンダリングの情報を開発者にわかりやすく提供する
データ提供を opt in している1億以上のユーザーからの情報

昨年 Android vitals をリリースしてから 10,000 以上の開発者がコンソールからパフォーマンスを理解した
昨年に比べ、スピード、デザイン、使いやすさについて言及している星5つのレビューは 4% 増え、安定性やバグに言及している星1つのレビューは 18% 減り、リソースの使用について言及している星1つのレビューは 21% 減った


Starbucks アプリは ANR rate が 70% 減り、Crash rate が 85% 減った
ANR は 3rd party のライブラリで起こっていたため、自分たちの観測に引っかかっていなかった
Android vitals はプラットフォームレベルのツールなので、Starbucks の 3rd party crash SDK では検出できていなかったクラッシュを見つけることができた
なぜならそのクラッシュは 3rd party crash SDK が開始される前に起こっていたため

Kiloo の Subway Surfers というゲームでは ANR を 95% 減らすことができた


昨年 Android vitals を公開したとき、バッテリー、安定性、レンダリングの3つの項目があった
新しくアプリのスタートアップ時間(App startup time)と権限(Permissions)が追加された

Vitals
  • バッテリー(Battery)
  • 安定性(Stability)
  • レンダリング(Rendering)
  • New: アプリのスタートアップ時間(App startup time)
    • コールド スタートアップ時間が長い(Slow cold start)
    • ウォーム スタートアップ時間が長い(Slow warm start)
    • ホット スタートアップ時間が長い(Slow hot start)
  • New: 権限(Permissions)
    • 権限リクエストの拒否率(Permission request denials)

バッテリー(Battery)

  • 停止した wake lock
  • 過度の wakeup
  • 過度のバックグラウンドでの Wi-Fi スキャン
  • 過度のバックグラウンドでのネットワーク使用

安定性(Stability)

  • ANR 発生率
  • クラッシュ発生率

レンダリング(Rendering)

  • フリーズした UI フレーム
  • 遅いレンダリング

New: アプリのスタートアップ時間(App startup time)

  • コールド スタートアップ時間が長い : 5秒以上
  • ウォーム スタートアップ時間が長い : 2秒以上
  • ホット スタートアップ時間が長い : 1.5秒以上

New Metric: コールド スタートアップ時間が長い
  • 5秒以上かかると遅いと判断
  • コールドスタート :
    • Activity が起動してから running になるまで
    • Activity launched → onCreate() → onStart() → onResume() → Activity running
    • アプリがしばらく使われておらず、アプリがメモリ上にいない状態からスタート

New Metric: ウォーム スタートアップ時間が長い
  • 2秒以上かかると遅いと判断
  • ウォームスタート :
    • Activity が起動してから running になるまで
    • Activity launched → onCreate() → onStart() → onResume() → Activity running
    • アプリが最近使われており、アプリがメモリ上にいる状態からスタート(アプリはkillされていない)

New Metric: ホット スタートアップ時間が長い
  • 1.5秒以上かかると遅いと判断
  • ホットスタート :
    • onRestart() から running になるまで
    • onRestart() → onStart() → onResume() → Activity running
    • アプリと Activity がメモリ上にいる状態からスタート

New: 権限(Permissions)

アプリのコアバリューに必要な権限だけをリクエストし、必要に応じて権限リクエストの正当な理由をランタイム時に提供する
  • 権限リクエストの拒否率
〜40%のユーザーが権限を拒否した理由として、その権限は不必要だと思ったと回答している

権限の詳細ビューでは権限をグループに分けて表示しているので、どの権限がユーザーにとって納得感があり、どの権限が不必要だと思われているかがわかる

Android Vitals の詳細の内訳

  • 一般的な内訳
    • APK versionごと
    • デバイスごと
    • Android versionごと
  • Wake locks, wakeups
    • tag ごと
  • ANR率
    • Activity 名ごと
    • ANR type ごと
    • Clusters
  • クラッシュ率
    • Clusters

カテゴリーベンチマーク

自分のアプリの vital が特定のカテゴリーの中でどのくらい良いかを見ることができる
vital の各 metric でパーセンタイル 25, 50, 75 の値を見ることができる

概要画面で全ての vital がリストされ、直近の30日とその前の30日の値、ベンチマークの値を見ることができる



概要画面の主な指標(Core Vitals)には Google Play でのアプリの表示やランキングに影響するパフォーマンス指標が表示される
主な指標が下位25%より悪くなると Bad behavior として表示される

異常検知(Anomaly Detection)

新リリースやリグレッションの結果値に急変があるとアラートを出す
  • ANRやクラッシュ率の大きな変化
  • 主な指標(Core Vitals)の大きな変化
概要画面右上の[通知設定]からAlertをメールで受け取るよう設定できる




主な指標(Core Vitals)を改善するには

ANRの原因
  • Network / Disk operations
  • Long calculations
  • InterProcess Communication (IPC)
  • Locks and Synchronization
  • Slow BroadcastReceiver handling

Network / Disk operations

例: SharedPreferences インスタンスを生成する時点で Disk 処理が行われる
  1. override fun onCreate(state: Bundle?) {  
  2.   // この時点で Disk 処理が行われる  
  3.   prefs = PreferenceManager.getDefaultSharedPreferences(this)  
  4. }  
どのメソッドが Network 処理や Disk 処理をするのか理解するのは難しいので StrictMode を利用する
  1. class MyApplication : Application() {  
  2.   
  3.   override fun onCreate() {  
  4.     super.onCreate()  
  5.   
  6.     if (BuildConfig.DEBUG) {  
  7.       StrictMode.setThreadPolicy(StrictMode.ThreadPolicy.Builder()  
  8.               .detectDiskReads()  
  9.               .detectDiskWrites()  
  10.               .detectNetwork()  
  11.               .penaltyLog()  
  12.               .penaltyDeath()  
  13.               .build())  
  14.     }  
  15.   }  
  16. }  


Long calculations

例: 数独ゲームの盤面生成に時間がかかる

Android Profiler で CPU の使用をチェックする
ちなみに Android Studio 3.2 Canary ではスタートアップ時間をプロファイルできるようになっている

StrictMode にはこのメソッドを呼ぶと遅くなるということを指定できる
  1. class GenerateBoardSource() {  
  2.   fun generateBoard(seed: Long) : SudokuGame {  
  3.     StrictMode.noteSlowCall("Generating Sudoku board")  
  4.     return SudokuSolver.generate()  
  5.   }  
  6. }  
  1. StrictMode.setThreadPolicy(StrictMode.ThreadPolicy.Builder()  
  2.         ...  
  3.         .detectCustomSlowCalls()  
  4.         ...  
  5.         .build())  


InterProcess Communication (IPC)
  • 他のアプリを呼び出す場合、基本こちらに制御権がない
  • 呼び出し先が Network 処理や Disk 処理をするかもしれないので別スレッドで呼び出す


Locks and Synchronization
  • これはとても難しい問題
  • deadlock になったり main thread をブロックするかもしれない
  • デバッグが難しい
  • Android Vitals が提供する trace file の情報がデバッグに役立つかもしれない


Slow BroadcastReceiver handling
  • Android Manifest に BroadcastReceiver を登録した場合、onReceive メソッドは main thread で呼び出される
  • 実行に時間がかかる処理を onReceive() でやるべきではない
  • 10秒以内に処理を終えないと ANR になる
  • Notification に表示する画像を Disk から読み出すなどちょっとした Disk 処理が必要な場合は onReceive() で goAsync() を呼び、別のスレッドを立ち上げ、終わったら PendingResult.finish() を呼ぶ
  • https://developer.android.com/guide/components/broadcasts#effects-process-state
  • あまり長いと結局システムに kill されるので、長い処理が必要なら JobScheduler や WorkManager を使う



クラッシュ対策
  • クラッシュの対応として Activity のライフサイクルでむやみに null チェックや例外の握りつぶしをするべきではない
  • 車輪の再発明をしない : 問題を解決する利用できるライブラリを使う
    • Lifecycle handling (LiveData, ViewModel)
    • Database object mapping (Room)
    • Data paging (Paging)
    • *NEW* Fragment transitions, up/back, deep link handling (Navigation)
    • *New* Job scheduling (WorkManager)
  • 3rd party の優れたライブラリもたくさんある
  • Kotlin を使う : でも全てのクラッシュを防げる銀の弾丸ではないよ!
  • private / hidden API を使わない


バッテリー対策

停止した wake lock

wake lock が取得されたが適切に release されなかった
  • wake lock を使わない
  • 画面をつけっぱなしにしたいなら Activity の Window に FLAG_KEEP_SCREEN_ON を指定する
  • 自分で Service を管理せず job を schedule する
  • AlarmManager で BroadcastReceiver を起こすようにすると onReceive() の間 AlarmManager は wake lock を hold してしまう
  • wake lock を使わなければ permission も必要なくなる
  • どうしても wake lock を使わないといけないなら、常に PARTIAL_WAKE_LOCK を使うこと
  • wakeLock.acquire() にタイムアウトをセットすること
  • static な descriptive tag を渡すこと(Android Vitals でのデバッグがしやすくなる)
  • try { ... } finally { wakeLock.release() } すること


過度の wakeup
  • もっとも大きい原因は AlarmManager の *_WAKEUP アラーム
  • 可能ならなくす(Remove)
  • 頻度を減らす(Reduce)
  • FCM, WorkManager, JobScheduler, SyncManager などに置き換える(Replace)
  • Android Studio 3.2 Canary に追加された Energy Profiler で wake lock に関する問題をデバッグできる


関連





2018年5月17日木曜日

IO recap : Migrate your existing app to target Android Oreo and above (Google I/O '18)



新規アプリは2018年8月以降
既存アプリのアップデートは2018年11月以降
targetSdkVersion を >= 26 にしないといけない話

Permissions

Runtime permissions : ユーザーは設定からon/offできる
Special permissions : 画面の上にdrawするやつとか

Alarms

WorkManager を使う

BroadcastReceivers

Android Manifest で register したほとんどの implicit receiver はもはや受け取れなくなる
例外もある、ACTION_BOOT_COMPLETED とか

BroadcastReceiver の使用を避ける例として、JobScheduler を使ってネットワーク状態の変更を検知し、
  1. val jobScheduler = getSystemService(Context.JOB_SCHDULER_SERVICE) as JobScheduler  
  2.   
  3. val jobInfo = JobInfoBuilder(JOB_ID, serviceComponent)  
  4.         .setRequiredNetwork(JobInfo.NETWORK_TYPE_ANY)  
  5.         .build()  
BroadcastReceiver は Android Manifest で disabled にしておき(android:enabled="false" を追加)
  1. <receiver  
  2.     android:name=".NetworkConnectionReceiver"  
  3.     android:enabled="false">  
  4.     <intent-filter>  
  5.         <action android:name="android.net.conn.CONNECTIVITY_CHANGE" />  
  6.     </intent-filter>  
  7. </receiver>  
JobScheduler で receiver を有効にする
  1. fun setNetworkReceiverState(enabled:Boolean) {  
  2.   val componentName = ComponentName(package,  
  3.       NetworkConnectivityReceiver::class.java.name)  
  4.   val state = if (enabled) {  
  5.       PackageManager.COMPONENT_ENABLED_STATE_ENABLED  
  6.   } else {  
  7.       PackageManager.COMPONENT_ENABLED_STATE_DISABLED  
  8.   }  
  9.   
  10.   packageManager.setComponentEnabledSetting(  
  11.       componentName,  
  12.       state,  
  13.       PackageManager.DONT_KILL_APP  
  14.   )  
  15. }  


ACTION_MY_PACKAGE_REPLACED で全ての処理をやるのではなく ChangedPackages でも判断できる
  1. val packages : ChangedPackages = packageManager.getChangedPackages(prefs.getPackageSequenceNumber())  
  2. prefs.setPackageSequenceNumber(packages.getSequenceNumber())  

Background Limits

Foreground Service にすべきものならそうする

Foreground のもの
  • Visible App
  • Foreground Service
  • Foreground Client に bound されている Service
  • ForeGround Client への Content Provider
  • AccessibilityService, NotificationListenerService, AbstractAccountAuthenticator, WallpaperServiceなどの例外もある
Background のもの
  • Not visible
  • Non-Foreground Service
  • JobService
  • BroadcastReceiver
O以降では、Background から Service を start しようとすると IllegalStateException が投げられる

Grace Period : Service が background に置かれてから1分程度は生きている

Whitelist
  • Notification action
  • High Priority FCM message
  • SMS/MMS delivery
Background Service を使わずに Background で仕事をさせるには
  • background task には WorkManager を使う
  • IntentService は JobIntentService に置き換える

JobScheduler の振る舞いについてよく理解するまで Android L で JobScheduler を使わないほうがいい
L と M の first release では JobScheduler は同じ constrains の2つの job を正しく実行しない問題がある
この問題の workaround として、同じ constrains の2つの job をスケジューリングすればよい(がどうするかは言ってない)
MR1 以降は JobScheduler はちゃんと動いているが、minimum latecy を 0 にセットするのはやめたほうがよい
失敗したときの処理は backoff でやること
backoff を超えて reschedule しないこと

PendingIntent の向き先を Service から explicit な BroadcastReceiver に変更し、30秒以内に goAsync() を呼び出す
または BroadcastReceiver 内で WorkManager を使う

外部からの time-sensitive な trigger が必要なら Firebase Cloud Messaging を使う
high priority messages はデバイスが DOZE でも起きるので使いすぎはよくない
10秒以内に実行し終えるならそのままそこで処理をし、それ以上かかるなら WorkManager を使う

ユーザーが明示的に始めた時間のかかる処理は Foreground Service で実行する
Maps Navigation, fitness tracking, playing music など

Photo Broadcasts

N 以降では Photo Broadcasts が起こらないので、代わりに ContentUris をトリガーとした work を使う
  1. val constrains = Constraints.Builder()  
  2.     .constraints.addContentUriTrigger(SOME_URI, true)  
  3.     ...  
  4.     .build()  
  5.   
  6. val work = OneTimeWorkRequest.Builder(MyWork::class.java)  
  7.     .setConstraints(constrains)  
  8.     .build()  

Background Location

O 以降のデバイスでは Background Location の制限は targetSdkVersion によらず適用される

対応として
  • 1. Geofencing を使う : 100個までしか Geofencing を active にできないので、必要に応じて動的に変えるなどの対策をとる
  • 2. Beacon による Nearby Notification を使う
  • 3. FusedLocationProvider の Batch 処理
    1. fun createLocationRequest() {  
    2.     ...  
    3.     val request = LocationRequest()  
    4.     request.interval = 10L * 60L * 1000L  
    5.     request.maxWaitTime = 30L * 60L * 1000L  
    6. }  
  • 4. Passive Location を使う
    1. fun createLocationRequest() {  
    2.     ...  
    3.     val request = LocationRequest()  
    4.     request.interval = 10L * 60L * 1000L  
    5.     request.maxWaitTime = 30L * 60L * 1000L  
    6.     request.fastestInterval = 2L * 60L * 1000L  
    7. }  
アプリの location を更新するのはネットワーク処理などの重たい処理と紐づいているべき

Battery

バッテリーに関する機能
  • Doze(M+)
  • Doze on the go (N+)
  • App Standby (M~O)
  • App Standby Buckets (P+)
App Standby Buckets (P+)
  • 使用履歴に基づく制限
  • アプリは Standby Bucket のどこかに割り当てられる
  • 割り当てられた Bucket によって適用される制限が変わる


Battery Saver (P+)
  • Screen Off のときは Location を取らない
  • 全てのアプリが App Standby
  • Background のアプリは Network 処理をできない
  • (OLED Devices では)可能なら Dark Theme が有効になる

Testing

Testing Doze
  1. $ adb shell dumpsys deviceidle force-idle  
Testing App Standby
  1. $ adb shell dumpsys battery unplug  
  2. $ adb shell am get-inactive <package-name>  
  3. $ adb shell am set-inactive <package-name> true  
Testing App Standby Buckets
  1. 1. $ adb shell dumpsys battery unplug  
  2. 2. $ adb shell am get-standby-bucket <package name>  
  3.   10 ACTIVE  
  4.   20 WORKING_SET  
  5.   30 FREQUENT  
  6.   40 RARE  
  7. 3. $ adb shell am set-standby-bucket <package name> <bucket>  
  8. 4. API: UsageStatsManager.getAppStandbyBucket()  
Testing Battery Saver
  1. $ adb shell dumpsys battery unplug  
  2. $ adb shell settings put global low_power 1  
  3. <do your tests>  
  4.   
  5. $ adb shell dumpsys battery reset  
  6.   
  7. API: PowerManager.isPowerSaveMode()  
  8.      PowerManager.ACTION_POWER_SAVE_MODE_CHANGED  
アプリに Dark Theme があるなら Save Mode のときは Dark Theme にするという選択肢
OLED Devices なら電池の節約になる

Modern features

  • Notification Channels
  • Display Cutout : Developer Options で Cutout モードにできる
  • Picture in Picture
  • Multi-display

non-SDK interface

DP1 で non-SDK interface の使用を制限し、使われていたら Toast や log で警告を出すようにした

DP2 ではメソッドが単に動かなくなるので、アプリがクラッシュすることになる

将来的には StrictMode に新しい VM policy を追加する
これを使って全ての non-SDK API を検出できる
  1. StrictMode.setVmPolicy(  
  2.   StrictMode.VmPolicy.Builder()  
  3.      .detectNonSdkApiUsage().build())  
non-SDK の使用がライブラリ内で起こるかもしれないので、これでチェックすることが重要

https://developer.android.com/distribute/best-practices/develop/target-sdk



2018年5月16日水曜日

IO recap : What's new with ConstraintLayout and Android Studio design tools (Google I/O '18)




design 時の tools: 属性
  • tools:context
  • tools:itemCount
    • ListView, RecyclerView のプレビューで表示するitemの数
  • tools:layout
  • tools:listitem
    • ListView, RecyclerView のプレビューで表示する各itemのレイアウト
  • tools:listheader
  • tools:listfooter
  • tools:showIn
    • 指定した layout リソースに include された状態のプレビューになる
  • tools:menu
  • tools:minValue
  • tools:maxValue
  • tools:openDrawer
  • tools:text
    • プレビューでの文字
  • tools:textColor
    • プレビューでの文字色


サンプルデータ

[File] - [New] - [Sample Data Directory] から sample data を置く場所を作る
場所としては app/ 直下に sampledata/ が作られる



ここに material_colors という名前のファイルを作って、各行にカラーコードを書く
  1. #F44336  
  2. #9C27B0  
  3. #3F51B5  
  4. #673AB7  
RecyclerView の各 item の ImageView に
  1. tools:tint="@sample/material_colors"   
と指定すると、行ごとに @sample/material_colors 内の色が順番に割り当てられる

dimensions なら
  1. 4dp  
  2. 8dp  
  3. 16dp  
  4. ...  
のようなファイルを用意する

画像の custom sample data はディレクトリ(例えば albumcovers/)を作ってサンプルデータの画像をそこに配置する
ディレクトリ名に _ や大文字を使うと動かないので注意



JSON の custom sample Data では複数のサンプルをまとめて定義できる

albumname.json
  1. "songs" : [  
  2.   {"title""Nougat""author" : "Dylan Dalton"},  
  3.   {"title""Ice Cream""author""Isa Henderson"},  
  4.   ...  
  5. ]}  
  1. tools:text="@sample/albumname.json/title"  
  2. tools:text="@sample/albumname.json/author"  


Predefined Sample data

Images, Text, olors, Dates...
  • @tools:sample/first_names
  • @tools:sample/last_names
  • @tools:sample/full_names
  • @tools:sample/cities
  • @tools:sample/us_phones
  • @tools:sample/us_zipcodes
  • @tools:sample/date/day_of_week
  • @tools:sample/date/ddmmyy
  • @tools:sample/date/hhmm
  • @tools:sample/date/hhmmss
  • @tools:sample/date/mmddyy
  • @tools:sample/lorem
  • @tools:sample/lorem/random
  • @tools:sample/avatars
  • @tools:sample/backgrounds/scenic
  • ...
Android Studio 3.2 では resource picker の Drawable のところに sample data category が追加された



Android Studio 3.2 の新しい design time helper では、ImageView を選択して表示されるレンチアイコンをクリックして、sample data を切り替えたり、data set のうち一つだけを使うようにできる
Browse をクリックすると、resource picker が開く



design time helper は TextView でも使える







RecyclerView でも使える

listitem に使うレイアウトや itemCount を指定できる
用意されているテンプレを指定すると、そのレイアウトリソースが layout/ にコピーされる
(たまにレンチが出なくなり、まだかなり不安定)












ConstraintLayout

去年(2017) ConstraintLayout 1.0 をリリースした
先月(2018/4) 1.1 をリリースした
  1. implementation 'com.android.support.constraint:constraint-layout:1.1.0'  


ConstraintLayout 2.0

Helpers
  • 画面に表示されないがUIを作成するのを助けるもの
  • Guideline とか Barrier とか
  • Viewの参照を保持してあれこれする
  • ConstraintHelper を継承して Custom の Helper を作れる
Helper の3つのカテゴリー
  • Layout Manipulation
    • LinearLayout のような配置を助ける Helper とか FlexBox 的な配置を助けるものとか
  • Post-Layout Manipulation
    • flying object みたいなエフェクトをかけるやつとか
  • Rendering or Decorating
    • Viewの代わりに描画するやつ
Helper の例

Layers
  • Helper の一種
  • View のセットに対する表示・非表示・変形などをサポートする




Circular Reveal
  • Rendering or Decorating 系の Helper
  • 既存の circular reveal code を利用
  • 参照しているViewにだけ適用


Lava Decorator
  • Rendering or Decorating 系の Helper
  • View の background を透明にして、この Decorator が Lava っぽい描画を実現する




Bottom Panel Decorator
  • ボトムパネルの background にインタラクティブなエフェクトを描画するやつ


Helper で view の実態と behavior を分離できる



ConstraintLayout 2.0

ConstraintLayout 2.0 では State を XML で指定できる
  1. <ConstraintLayoutStates>  
  2.   
  3.   <State  
  4.     android:id="+id/small"  
  5.     app:constraints="@layout/layout_small" />  
  6.   
  7.   <State  
  8.     android:id="+id/large"  
  9.     app:constraints="@layout/layout_large" />  
  10.     
  11. </ConstraintLayoutStates>  
  1. fun onCreate(savedInstanceState : Bundle?) {  
  2.   super.onCreate(savedInstanceState)  
  3.   setContentView(R.layout.layout);  
  4.   cl = findViewById(R.id.root)  
  5.   cl.setLayoutDescription(R.xml.layout_states)  
  6. }  
  7.   
  8. fun change(v : View) {  
  9.   cl.setState(closed ? R.id.large : R.id.small)  
  10.   closed = !closed  
  11. }  
特定の constraint set が適用されるときの region を指定できる
  1. <ConstraintLayoutStates>  
  2.   
  3.   <State  
  4.     app:constraints="@layout/layout_small" >  
  5.   
  6.     <Constraints  
  7.       app:constraints="@layout/layout_small"  
  8.       app:region_widthLessThan="550dp" />  
  9.         
  10.       <Constraints  
  11.         app:constraints="@layout/layout_large"  
  12.         app:region_widthLessThan="450dp" />  
  13.           
  14.   </State>  
  15.   
  16. </ConstraintLayoutStates>  
  1. fun onConfigurationChanged(newConfig : Configuration) {  
  2.   super.onConfigurationChanged(newConfig)  
  3.   cl.setState(newConfig.screenWidthDp, newConfig.screenHeightDp)  
  4. }  
  5.   
  6. cl.setOnConstraintsChanged { state, layoutId ->   
  7.   TransitionManager.beginDelayedTransition(cl)  
  8. }  


MotionLayout
  • ConstraintLayout 2.2 予定
  • ConstraintLayout の subclass
  • ConstraintLayout の全てのプロパティを持っている
  • 2つの State 間のアニメーションを代わりにやってくれる
MotionLayout が複数の View と Helper を持ち、MotionScene が2つの ConstraintSet と OnTouch と KeyFrame を持つ
ConstraintSet に custom 属性が増え、アニメーションをカスタマイズできる
MotionLayout は Nest できる




Motion Editor
  • keyframe を追加してアニメーションを編集できる
  • going work now

Codelab