---
title: 'Material Design na barra de navegação & status do Chrome'
authors: Joédyson Bezerra
type: post
date: 2015-04-27
excerpt: Saiba como customizar a barra de navegação do Chrome no Android usando apenas HTML.
url: /material-design-na-barra-de-navegacao-status-chrome/
categories:
  - HTML
  - Mobile
  - Técnicas e Práticas
  - UX
tags:
  - android
  - chrome
  - metatag

---
Recentemente muitos aplicativos já estão seguindo essa nova tendência de aplicar o material design do google no seus aplicativos mas meu foco hoje não são os aplicativos mas sim em sites responsivos, o que isso de aplicar material de design na barra de navegação?

[<img class="alignnone size-full wp-image-48412" src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2015/04/img.png" alt="img" width="401" height="200" />][1]

Pois bem vamos aplicar essa barra de status alterada e a barra de navegação também (Obs: Só vai pegar em Android 5.0 ou superior com Chome instalado)

Eu estava navegando em uma matéria do Tecmundo e quando o site terminou de carregar me deparei com a barra do Chrome customizada nas cores do site. Essa técnica está sendo cada vez mais usados por sites aí fora, não vi ainda websites brasileiros usando a barra customizada, até agora, só percebi no Tecmundo.

[<img class="alignnone size-full wp-image-48413" src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2015/04/Screenshot_2015-04-23-19-34-26.png" alt="Screenshot_2015-04-23-19-34-26" width="720" height="1280" />][2]

Comecei então a procurar como isso pode ser feito e me assustei com a facilidade: basta inserir uma metatag e pronto: a barra superior do Chrome do Android 5.0 fica customizada.

<pre class="lang-html">&lt;meta name="theme-color" content="#ea2f4a"&gt;
</pre>

Esse é o resultado:

[<img class="alignnone size-full wp-image-48414" src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2015/04/Screenshot_2015-04-23-21-41-17.png" alt="Screenshot_2015-04-23-21-41-17" width="720" height="1280" />][3]

 [1]: https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2015/04/img.png
 [2]: https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2015/04/Screenshot_2015-04-23-19-34-26.png
 [3]: https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2015/04/Screenshot_2015-04-23-21-41-17.png