# Android Custom Drawing Canvas

> Use when creating custom UI components, charts, shaders, or hardware-accelerated drawing in Android with Jetpack Compose Canvas.

- **Type:** Skill
- **Install:** `agentstack add skill-prasad-vennam-awesome-android-ai-agent-skills-android-custom-drawing-canvas`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [prasad-vennam](https://agentstack.voostack.com/s/prasad-vennam)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [prasad-vennam](https://github.com/prasad-vennam)
- **Source:** https://github.com/prasad-vennam/Awesome-Android-AI-Agent-Skills/tree/main/skills/android-custom-drawing-canvas

## Install

```sh
agentstack add skill-prasad-vennam-awesome-android-ai-agent-skills-android-custom-drawing-canvas
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Android Custom Drawing & Canvas ✏️🎨

Advanced strategies for high-performance, pixel-level custom UI components, data visualization, and creative graphics in Jetpack Compose.

## ⚡ When to Use
- **Custom Charts**: Drawing pie, bar, or line charts with precise control.
- **Complex UI Elements**: Building circular progress bars or custom sliders.
- **Graphic Effects**: Applying shaders (AGSL), gradients, or masks.
- **Dynamic Graphics**: Hand-drawn signatures or interactive shapes.
- **Particle Systems**: Drawing lightweight, dynamic visual effects.

## 🏗️ Drawing with `Canvas`

- **Rule**: Use `Modifier.drawBehind { ... }` or `Canvas(modifier = ...) { ... }`.
- **Coordinate System**: (0,0) is TOP-LEFT.
- **Draw Scope**: Access built-in methods like `drawRect`, `drawCircle`, `drawPath`.

### 1. Drawing a Circular Progress Bar
```kotlin
Canvas(modifier = Modifier.size(100.dp)) {
    val strokeWidth = 8.dp.toPx()
    drawArc(
        color = Color.LightGray,
        startAngle = 0f,
        sweepAngle = 360f,
        useCenter = false,
        style = Stroke(width = strokeWidth)
    )
    drawArc(
        color = Color.Blue,
        startAngle = -90f,
        sweepAngle = progress * 360f,
        useCenter = false,
        style = Stroke(width = strokeWidth, cap = StrokeCap.Round)
    )
}
```

### 2. The `Path` API
- Use for complex shapes (Stars, Polygons, Waves).
- Use `Path()` and methods like `moveTo`, `lineTo`, `cubicTo`.
- **Rule**: Reuse the `Path` object if possible to avoid allocations in the drawing loop.

## 🚀 Performance & Tips

- [ ] **Avoid Object Allocation**: Never create `Paint`, `Path`, or `Brush` objects inside `drawBehind`. Create them with `remember` outside.
- [ ] **Use `graphicsLayer`**: Move drawing into a separate layer for better hardware acceleration and cacheability.
- [ ] **Pixel Conversion**: Use `toPx()` carefully within the `DrawScope`. Keep dimensions consistent.
- [ ] **AGSL Shaders**: For Android 13+, use `RuntimeShader` for professional-grade effects (Blur, Wave, Noise).

## 📐 Chart Design Best Practices

- **Labels**: Don't draw complex text with `drawText` if you can use `Text` composables with `Layout`.
- **Interactivity**: Use `detectDragGestures` or `detectTapGestures` to make your custom drawings interactive.
- **Smoothness**: Use `animateFloatAsState` to animate chart values during transitions.

## 🧪 Testing and Verification

- **Screenshot Testing**: ALWAYS use screenshot tests for custom Canvas components to catch pixel-level regressions.
- **Layout Inspector**: Verify that your Canvas component isn't causing excessive recompositions.
- **Hardware Profile**: Ensure the "GPU rendering" bar doesn't cross the threshold during complex animations.

## 📜 Checklist for Canvas Components

- [ ] **Accessibility**: Does the canvas component have a `clearAndSetSemantics` entry with a proper description?
- [ ] **Theming**: Does the drawing use `MaterialTheme.colorScheme` colors?
- [ ] **Density Independence**: Does it look correct on both low and high-density screens?
- [ ] **Performance**: Are expensive path calculations cached?

## 🔗 Related Resources
- [Compose Graphics Documentation](https://developer.android.com/jetpack/compose/graphics)
- [AGSL Shaders Guide](https://developer.android.com/develop/ui/views/graphics/agsl)
- [Screenshot Testing Skill](../android-screenshot-testing/SKILL.md)

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [prasad-vennam](https://github.com/prasad-vennam)
- **Source:** [prasad-vennam/Awesome-Android-AI-Agent-Skills](https://github.com/prasad-vennam/Awesome-Android-AI-Agent-Skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-prasad-vennam-awesome-android-ai-agent-skills-android-custom-drawing-canvas
- Seller: https://agentstack.voostack.com/s/prasad-vennam
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.