Skip to content

Conversation

Copy link

Copilot AI commented Dec 20, 2025

Adaptive icon resources were rendering as legacy “dinner plate” artifacts, causing shrunken, clipped logos and white margins.

  • Adaptive layers: Rebuilt foreground vectors with safe-zone scaling and centered pivots; set background to brand blue and adjusted gradients/monochrome to avoid clipping.
  • Assets: Regenerated all mipmap WebP densities from a single SVG source of the icon.
  • Docs: Added the canonical SVG (docs/icon.svg) and updated README to reference it instead of the WebP.

Example (foreground vector scaling):

<group
    android:scaleX="0.60"
    android:scaleY="0.60"
    android:pivotX="12"
    android:pivotY="12">
    <!-- Cloud + DAV paths -->
</group>
Original prompt

I am having issues with the icon of this app. Please read the attached documentation carefully and fix all icon resources in all directories within the app. Follow best practices and write idiomatic code. you can use the libwebp command line utilities to generate webp, and use other available command line utilities to handle the format conversion. Note that it is expected that we follow modern Android icon guidelines to provide the vectorized icon and follow best practices to ensure the icon is displayed correctly across all user configurations and environments. Think carefully. Also please update the README.md to use a SVG icon instead of using the webp icon.

===

Based on the provided screenshot, here is the identification of the design issues for the Letterbox (Letterboxd) and WebDAV icons, followed by a technical Design Document to resolve them.

1. Issue Identification

The two icons on the right (Letterbox and WebDAV) exhibit the classic "Legacy Icon" artifact, often referred to as the "Dinner Plate" effect or "White Margin" issue.

Feature Correct Implementation (e.g., Wise, Fitbit) Current Issue (Letterbox, WebDAV)
Masking Full-bleed design; the background fills the entire circle. Incomplete fill; the original square icon is shrunk and placed inside a white circle background.
Consistency shape matches the system (circle). Double Shape; a square shape is visible inside the system's circular mask, creating visual noise.
Scale Branding is large and legible. Reduced Scale; the actual logo is ~30% smaller because of the forced padding.

Technical Root Cause:
These apps likely lack a valid adaptive-icon XML resource in their res/mipmap-anydpi-v26 folder. The Android launcher detects a legacy (static) image file (PNG/JPG) and attempts to "adapt" it by scaling it down and placing it on a default white circular background to ensure uniform shape, resulting in the unappealing white borders.


2. Proposed Design Document: Adaptive Icon Update

Project: Icon Modernization for Android (Adaptive Support)
Target API: Android 8.0 (API 26)+
Objective: Eliminate white margins and ensure full-bleed masking across all device themes (Circle, Squircle, Rounded Square).

2.1. Design Specifications

To fix the "square-in-circle" look, the icon must be split into two separate layers:

  • Canvas Size: 108 x 108 dp
  • Safe Zone: Ø 66 dp (centered)
  • Export Format: SVG (Vector Drawable) preferred, or high-res PNG.
Layer Specs Design Instruction
Background (@color/background) 108x108 dp
Full bleed
Letterbox: Use the brand's dark distinct charcoal/black color (#14181C).
WebDAV: Use the brand's primary blue (#0057C8). This layer must contain no logos, just color/texture.
Foreground (@drawable/ic_foreground) 108x108 dp
Logo size: ~60dp
Letterbox: The orange/green/blue dots (logo) must be centered within the 66dp safe zone.
WebDAV: The "DAV" text/cloud symbol must be centered in the safe zone.

2.2. Safe Zone Compliance

The system will apply a mask that can clip up to 33% of the outer canvas.

  • Do Not: Place critical branding (like the corners of the "L" or text) outside the central 66dp circle.
  • Do: Allow the background color to extend all the way to the 108dp edge to prevent white slivers when the user scrolls (parallax effect).

2.3. Technical Implementation (XML)

File Path: res/mipmap-anydpi-v26/ic_launcher.xml

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 1. The solid background color (fixes the white border) -->
    <background android:drawable="@color/ic_launcher_background" />
    
    <!-- 2. The isolated logo w/ transparent background (fixes the double shape) -->
    <foreground android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>

2.4. Before & After Simulation

  • Current (Letterbox): A tiny dark square floating inside a white circle [1].
  • Proposed Fix: A full dark circle (or squircle) with the three colored dots prominently displayed in the center, matching the visual weight of the "Wise" and "Fitbit" icons on the left.

1
2
3
4
5
6
[7](http...


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Co-authored-by: MinecraftFuns <[email protected]>
Copilot AI changed the title [WIP] Fix icon resources in app directories Modernize adaptive launcher icon and README preview Dec 20, 2025
Copilot AI requested a review from MinecraftFuns December 20, 2025 15:53
@MinecraftFuns MinecraftFuns marked this pull request as ready for review December 20, 2025 16:10
@MinecraftFuns MinecraftFuns merged commit a8eae3e into master Dec 20, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants