material-components / material-components/material-components-android

[CircularProgressIndicator] Full circle track has seam artifact due to cap overlap at 0°

Open
#5,027 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug Widget: ProgressIndicator
Dominant language
Java
Stars
17.4k
Forks
3.2k
PR merge metrics
No merged PRs in 30d

Description

## Description

When `CircularDrawingDelegate.drawArc()` draws a full circle (360°) track, there is a visible seam artifact at the 0° position where the start and end points overlap.

## Root Cause

`drawArc()` always has a start/end point. When `cornerRadius > 0`:
- **With `Cap.ROUND`**: Two round caps overlap at 0°, creating a visible bump
- **With `drawRoundedBlock`**: Two rounded blocks overlap at the same position

The `ROUND_CAP_RAMP_DOWN` logic extends the arc beyond 360° to hide caps, but anti-aliasing still produces a visible rendering artifact at the seam.

https://github.com/user-attachments/assets/4fb64601-e2d7-4a72-bb3a-31bd461d12fc

## Expected Behavior

A full circle track should render as a perfect circle with no visible seam or artifact.

## Proposed Fix

When `arcDegree >= 360f` and the path is not wavy, use `canvas.drawOval()` instead of `canvas.drawArc()`. `drawOval` has no start/end point concept, so the seam artifact is eliminated entirely.

| | `drawArc` (current) | `drawOval` (proposed) |
|---|---|---|
| Start/end point | Exists (0° seam) | None |
| Cap needed | ROUND/BUTT + roundedBlock | Unnecessary (BUTT suffices) |
| 360° rendering | Cap overlap artifact | Perfect circle |

Partial arcs (indicators) continue to use the existing `drawArc` logic unchanged.

## Affected Component

`CircularDrawingDelegate.java` - `drawArc()` method

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in CircularDrawingDelegate.java at the drawArc() method and trace how full-circle and partial-arc paths are rendered, including the non-wavy condition. Verify that full-circle tracks render without a seam while partial arcs retain their existing behavior; the issue's attached comparison illustrates the expected visual result.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, java
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.