Notification custom layouts: paint the button icon for Material.

chrome/android/java/res/layout/web_notification_button.xml

Index: chrome/android/java/res/layout/web_notification_button.xml
diff --git a/chrome/android/java/res/layout/web_notification_button.xml b/chrome/android/java/res/layout/web_notification_button.xml
index 37cef2b9eb67556e0f2ef4240db9dcee96994ce2..06e9cba27f750ef2e5428af5dff83edbd5c6aeb2 100644
--- a/chrome/android/java/res/layout/web_notification_button.xml
+++ b/chrome/android/java/res/layout/web_notification_button.xml
@@ -3,15 +3,39 @@
      Use of this source code is governed by a BSD-style license that can be
      found in the LICENSE file. -->
 
-<Button xmlns:android="http://schemas.android.com/apk/res/android"
-    android:drawablePadding="0dp"
-    android:ellipsize="end"
-    android:gravity="start|center_vertical"
-    android:id="@+id/button"
-    android:layout_height="48dp"
-    android:layout_weight="1"
+<!--
+    Overlays a Button on top of an ImageView. Via a RemoteViews, the only way to set a Bitmap is on
+    an ImageView. We have a Bitmap because it is the format that can be painted to match the theme,
+    and it is the format we get when loading an image from the network.
+-->
+<FrameLayout

[newt (away), 2015/11/16 17:50:08]

Do these views need to overlap? If not, can't you just use a horizontal
LinearLayout? If so, why do they need to overlap? Should the image be clickable?
Could you use an ImageButton here? Or could you use compound drawables (see
RemoteViews.setTextViewCompoundDrawables())?

If you want both the image and the text to be clickable as part of the same
button, then compound drawables are your friend.

[Michael van Ouwerkerk, 2015/11/17 12:00:23]

I would have preferred to use
RemoteViews#setTextViewCompoundDrawablesRelativeColorFilter(int viewId, int
index, int color, PorterDuff.Mode mode) but that method is hidden. It's what the
core framework uses for this situation.

There is setTextViewCompoundDrawables(int viewId, int left, int top, int right,
int bottom) but that does not apply a color filter.

Then there is setTextViewCompoundDrawables(int viewId, Icon left, Icon top, Icon
right, Icon bottom) but it is hidden and also uses Icon which is from API level
23 only.

The _only_ way to apply a PorterDuffColorFilter (or an equivalent) to an image
and somehow get that image into a RemoteViews, compatible from at least API
level 16, is to acquire a Bitmap, paint that, and pass it to the RemoteViews.

Then, the _only_ useful way to set that Bitmap is on an ImageView using
setImageViewBitmap.

So that's why this is a Button layered on top of an ImageView. It is
intentional, though a bit more work than anticipated. From a UX perspective, the
difference is undetectable: a11y is the same, look and feel are the same, RTL is
the same. As the Button overlays the ImageView, it feels as if the image is
clickable, as intended, it feels like it is part of the button.

[newt (away), 2015/11/17 20:04:40]

Yowsers. Thanks for the run down. I wasn't thinking about the fact that you need
to combine a compound drawable with a color filter.

Given that, I think the current solution is reasonable. It would probably be
good to elaborate a bit on why you can't use compound drawables in the comment
above.

[Michael van Ouwerkerk, 2015/11/18 14:08:40]

Done. I've added some more docs here.

+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    tools:ignore="MergeRootFrame"
     android:layout_width="0dp"
-    android:paddingStart="8dp"
-    android:singleLine="true"
-    android:textSize="13sp"
-    style="@style/WebNotificationButton"/>
+    android:layout_height="48dp"
+    android:layout_weight="1">
+
+    <ImageView
+        android:id="@+id/button_icon"
+        android:layout_width="wrap_content"
+        android:layout_height="match_parent"
+        android:layout_marginStart="8dp"
+        android:layout_gravity="start|center_vertical"
+        android:maxWidth="48dp"
+        android:contentDescription="@null"
+        android:scaleType="centerInside"/>
+
+    <Button

[newt (away), 2015/11/17 20:04:40]

Will there always be button text, or will we have notifications where there's
just an image but no text?

[Michael van Ouwerkerk, 2015/11/18 14:08:40]

Action (button) titles are required at the JavaScript API level.

+        android:id="@+id/button"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:drawablePadding="0dp"

[newt (away), 2015/11/17 20:04:40]

not needed? (since there are no compound drawables)

[Michael van Ouwerkerk, 2015/11/18 14:08:40]

Done.

+        android:ellipsize="end"
+        android:gravity="start|center_vertical"
+        android:paddingStart="8dp"
+        android:singleLine="true"
+        android:textSize="13sp"
+        style="@style/WebNotificationButton"/>
+
+</FrameLayout>