nextcloud / nextcloud/android

Standardize Icon Button Usage

Open
#16,522 2 comments 0 reactions 0 assignees View on GitHub
0. Needs triage design enhancement
Dominant language
Kotlin
Stars
5.6k
Forks
2k
Avg merge
2d 18h
Merged PRs (30d)
92

Description

### How to use GitHub

* Please use the 👍 [reaction](https://blog.github.com/2016-03-10-add-reactions-to-pull-requests-issues-and-comments/) 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:

```






```

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

```

<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>

```

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

Image

-----

### 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?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.