Standardize Icon Button Usage

[alperozturk96]

How to use GitHub

• Please use the 👍 reaction to show that you are interested into the same feature.
• Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
• Subscribe to receive notifications on status change and new comments.

Currently, our application uses a mix of UI elements for icon buttons:

Some places use ImageView to represent clickable icons. This is inconsistent and not semantically correct, since ImageView is not a button.

Some places use MaterialButton with the default M3 icon button style (@style/Widget.Material3.Button.IconButton).

Other places use a custom style (Widget.AppTheme.Button.IconButton) that extends from Widget.Material3.Button.TextButton with custom paddings and icon configurations.

---

Default M3 IconButton colors (from @style/Widget.Material3.Button.IconButton) are defined via a color selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <!-- Disabled state -->
  <item android:color="?attr/colorOnSurface" android:alpha="@dimen/material_emphasis_disabled" android:state_enabled="false"/>
  <!-- Checkable, unchecked state -->
  <item android:color="?attr/colorOnContainerUnchecked" android:state_checkable="true" android:state_checked="false"/>
  <!-- Default, enabled state -->
  <item android:color="?attr/colorOnContainer"/>
</selector>

The custom Widget.AppTheme.Button.IconButton currently extends TextButton and overrides:

<style name="Widget.AppTheme.Button.IconButton" parent="Widget.Material3.Button.TextButton">
    <item name="android:minWidth">0dp</item>
    <item name="android:insetLeft">0dp</item>
    <item name="android:insetTop">0dp</item>
    <item name="android:insetRight">0dp</item>
    <item name="android:insetBottom">0dp</item>
    <item name="iconGravity">textStart</item>
    <item name="iconPadding">0dp</item>
</style>

The default icon color (colorOnContainer) may not align with our expectation. For example:

---

Things to decide

1. Continue using our custom Widget.AppTheme.Button.IconButton (with modified paddings) or switch to the default M3 IconButton style? Note: M3 IconButton also extends from TextButton.

2. Currently, default (Material3.Button.IconButton) icons use colorOnContainer. Do we want to change the default icon color?

3. Should all icon buttons implemented with ImageView be replaced with MaterialButton using the appropriate icon button style?

4. When a user performs an action (e.g., sharing a file), we want the icon to stand out. Since default icon color is colorOnContainer and it's branding color in that case how should we differentiate the default icon color from the action-taken state in a file list?

[alperozturk96]

@kra-mo @AndyScherzinger @tobiasKaminsky fyi.

[AndyScherzinger]

I'd say it is relatively simply but needs case-by-case decisions, when to use what ;)

Disclaimer: Exceptions apply and are not defined, just the standard case: pragmatism is key

• Always use buttons for "actionable" images
• M3 defines all colorings we need (exceptions may apply, but they are exceptions), see Chapter Colors, type "D" at https://m3.material.io/components/icon-buttons/specs -> Colors -> most of our image-icons would "Standard" and hence "on surface variant", primary actions are different and "colored" hence depend on the type but incorporate primary or its variants
• for question 4, to match the webUI: sharing-action-not-taken: standard icon coloring (D1), action taken (link, else it is avatars): primary (D3)