Se você desenvolve para Android, sabe que implementar leitura de códigos de barras pode variar de "uma tarefa simples" a "um pesadelo de UX". Recentemente, tenho trabalhado em um scanner utilizando o ML Kit da Google e decidi elevar o nível da interface usando Canvas no Jetpack Compose.
🧠 Por que ML Kit Nativo?
O ML Kit se tornou o padrão ouro para processamento de visão no Android por ser leve, gratuito e funcionar totalmente offline.
Vantagens:
Velocidade Incrível: Processamento em tempo real com baixa latência.
Inteligência: Detecta múltiplos códigos simultaneamente e em ângulos difíceis.
Baixo overhead: Não infla o tamanho do APK como bibliotecas legadas.
Ecossistema Google: Integração perfeita com CameraX.
Desvantagens:
Dependência de Google Play Services: Em dispositivos sem serviços Google (raros, mas existem), requer configuração adicional.
Curva de Aprendizado de UI: A API te entrega as coordenadas, mas desenhar a "mira" ou o feedback visual fica totalmente por sua conta.
🎨 O Diferencial: Customização com Canvas
É aqui que o projeto fica interessante. Em vez de usar um layout estático, estou utilizando o Canvas do Jetpack Compose para desenhar os bounding boxes (caixas de detecção) em tempo real.
Como mostro no código abaixo (veja o snippet na imagem), o desafio é o mapeamento de coordenadas. O ML Kit retorna as dimensões baseadas na resolução da imagem da câmera, que geralmente é diferente da resolução da tela do celular.
O que estou implementando:
Lógica de Escala (Fill_Center): Calculo o fator de escala para que o desenho no Canvas coincida exatamente com a posição do QR Code na prévia da câmera.
Offsets Dinâmicos: Ajuste de centralização para garantir que o retângulo verde (Color.Green) contorne o código com precisão milimétrica.
Feedback Visual Imediato: Assim que o dado é processado, um Card informativo aparece exatamente sobre a posição do código.
🛠️ Snapshot do Código (Compose + Canvas)
No trecho de código que estou desenvolvendo, utilizo maxOf para calcular a escala e aplico transformações de left, top, right e bottom para transpor as coordenadas da imagem para os pixels da tela. O resultado? Uma interface fluida onde o retângulo "persegue" o código.
📈 Conclusão
Usar ferramentas nativas não significa ter uma interface genérica. Com a combinação de ML Kit + CameraX + Compose Canvas, conseguimos o melhor dos dois mundos: a robustez do Google e a liberdade criativa de uma UI totalmente customizada.
O que você tem usado para leitura de códigos nos seus projetos? Zxing ainda é uma opção ou o ML Kit já domina seu stack? 👇
AndroidDevelopment #Kotlin #JetpackCompose #MLKit #GoogleAI #MobileDevelopment #CodingLife
Top comments (0)