O X do Xamarin Forms — Criando Ícones arredondados para o Xamarin.Android

Image for post
Image for post

Fala galera!

beleza?

As vezes lendo artigos ou pesquisando na internet (coisas bem diferentes do que eu encontro xD) eu encontro algumas coisas interessantes que acabo utilizando no meu dia a dia. Quando eu vejo que é muito louco (pelo menos pra mim é :P ) e não vejo a hora de escrever um artigo sobre.

Antes de mais nada, com o lançamento do Android Nougat 7.1, o Google definiu os ícones dos aplicativos como um padrão mais arredondado.

Se eu criar um ícone para meu app Xamarin.Forms hoje, o ícone ainda vai ser "angular", ou seja quadrado com a borda redonda.

Suponhamos que eu tenha este ícone e queira utilizar o mesmo no meu app Android

Agora apenas adicionado ele nas pastas de resource , vamos ver o que acontece no Emulador :

Image for post
Image for post

Viram ? Essa parte arredondada no design do meu ícone…Mas se mudou porque manter o padrão antigo? Simples, para ser possível gerar o app para versões mais antigas do android..

E como eu resolvo isso com uma solução rápida e eficaz?

Há um site útil (clique aqui para ver), e opensource, onde você pode facilmente e rapidamente gerar seus ícones do Android nas resoluções apropriadas.

Image for post
Image for post

Aqui você pode selecionar um ícone existente ou carregar sua própria imagem. Então você pode configurar o preenchimento, cores e sombras diferentes.

No Shape, você pode selecionar Círculo e obter os ícones de App redondos desejados :

Image for post
Image for post

Após escolher as configurações, cores e etc , basta escolher um nome e baixar os icones.

Ele vai baixar um pacote .zip com as resoluções corretas :

Image for post
Image for post

Muito louco não?

Certo, mas como eu faço o ícone circular aparecer nas versões mais atuais e o "angular" nas antigas ? Facil!

Antes de mais nada, verifique se o seu Target Android version, nas propriedades do projeto esta no mínimo na versão 7.1.No meu caso esta na 8.1.. Então tudo ok!

Image for post
Image for post

Agora adicione o ícone circular nas pastas corretas :

Image for post
Image for post

Tudo certo, vamos ao código.

Na MainActivity.cs vamos adicionar o código :

Image for post
Image for post

Referenciando onde esta e o nome do nosso ícone.

Vamos rodar!

Image for post
Image for post

Legal não ? Claro que você pode utilizar o Icone arredondado direto no APP, mas nos Androids mais antigos também ficara arredondado…

Com esse opção é possível utilizar os 2 modelos , e ainda com esse site incrível as possibilidades são infinitas :D

Quer ver outros artigos sobre Xamarin ? Clique aqui.

Espero ter ajudado!

Aquele abraço!

Written by

Microsoft MVP,Gamer, Desenvolvedor e apaixonado por tecnologia!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store