diff --git a/docs/notifications/basic.md b/docs/notifications/basic.md index 90fc6243526..64605d44961 100644 --- a/docs/notifications/basic.md +++ b/docs/notifications/basic.md @@ -617,6 +617,76 @@ automation: progress_max: 32 ``` +#### Styling the progress bar BETA {#styling-the-progress-bar} + +On Android 16.0+, you can customize the progress bar with segments, points, and icons. + +:::note +When using any of these options together with a video attachment, the video attachment will not be shown. The `progress_indeterminate` parameter will also be ignored. +::: + +The following parameters can be mixed and matched together to style the progress bar: + +##### Progress segments + +- `progress_segments`. A list of segments that make up the progress bar, each with its own length and optional color. + - **Required property**: `length`. The length/size of the segment, any number larger than 0. + - **Optional property**: `color`. Hex color code (including '#') for the segment (for example, `"#ff0000"` or `"#00ff00"`). + - **Note**: When using segments, `progress_max` is automatically calculated as the sum of all segment lengths. + +##### Progress points + +- `progress_points`: A list of markers displayed as points along the progress bar to highlight specific milestones or thresholds. + - **Required property**: `position`. The position on the progress bar where the point should appear (must be between 0 and `progress_max`). + - **Optional property**: `color`. Hex color code (including '#') for the point (for example, `"#ffde03"`). + +##### Progress icons + +- `progress_start_icon`: Icon displayed at the start of the progress bar. For example: `"mdi:battery-10"`. + - **Format**: Material Design Icons only, use format `mdi:icon-name` (for example, `mdi:home` or `mdi:download`). +- `progress_end_icon`: Icon displayed at the end of the progress bar. For example: `"mdi:battery"` + - **Format**: Material Design Icons only, use format `mdi:icon-name` (for example, `mdi:flag-checkered` or `mdi:check-circle`). +- `progress_tracker_icon`. Icon displayed in a circular badge that tracks the current progress position. For example: `"mdi:lightning-bolt"`. + - **Format**: Material Design Icons only, use format `mdi:icon-name` (for example, `mdi:car` or `mdi:walk`). + +**Icon colors** + +- `progress_start_color`. Color for the start icon. For example: `"#ff0000"`. + - **Default**: System accent color. +- `progress_end_color`: Color for the end icon. For example: `"#00ff00"`. + - **Default**: System accent color. +- `progress_tracker_color`. Color for the tracker icon. For example: `"#ffde03"`. + - **Default**: System primary color. + - `tracker` will be shown in a circle at the current progress + +```yaml +automation: + - alias: Notify of car charging progress + trigger: + ... + action: + - action: notify.mobile_app_ + data: + title: "Car is currently charged to 50%" + message: "Limit is set to 80%" + data: + progress: 50 + progress_segments: + - length: 80 + - length: 20 + color: "#ff0000" + progress_points: + - position: 80 + progress_start_icon: mdi:battery-10 + progress_end_icon: mdi:battery + progress_tracker_icon: mdi:lightning-bolt + progress_tracker_color: "#ffde03" + tag: progress_style_notification +``` + +This example will create a notification like the one shown here: +![Customized progress bar notification](/assets/android/progress_bar_customized.png) + ### Live Updates On Android 16.0+ you can create "Live updates" notifications. These notifications are pinned to the top of the notification shade and appear on the lockscreen and always-on display. They will also display as a chip in the status bar with an optional short text. This might vary by manufacturer. diff --git a/static/assets/android/progress_bar_customized.png b/static/assets/android/progress_bar_customized.png new file mode 100644 index 00000000000..cb39160d2cd Binary files /dev/null and b/static/assets/android/progress_bar_customized.png differ