Android Support Library v22.1 – Como Comecar

Standard

No último post e o primeiro da  nova secção do blog, fiz a introdução a nova biblioteca do support v22.1 que veio melhorar a vida dos programadores permitindo implementar o material design e passar uma experiência única para todos  os dispositivos incluindo os que antecedem ao lolipop.

Para quem não teve a oportunidade de ler sobre as bibliotecas de suporte e  que novas ferramentas estão disponíveis pode fazer aqui.

Como o último post foi apenas sobre uma visão geral das novidades adicionadas,  neste post iremos olhar para o tópico de forma mais técnica e criar um novo projecto. Sendo assim, este post estará divido nas seguintes partes:

  • Como colocar as dependências para a nova biblioteca de suporte.
  • Como configurar o tema para implementar o Material design.
  • Implementar o Toolbar e Navigation Drawer.
  • Mudar cor do icon da linha seleccionada no Navigation drawer utilizando a classe DrawableCompat.

Para começar com a parte divertida do post vamos criar um novo projecto .No momento de escolher o minimumSDK, escolham a API 8 pois é do nosso interesse levar as funcionalidades novas para as versões mais antigas.

Depois de criar o projecto, temos de ir até a pasta app e clicar no ficheiro build.gradle para adicionar ou modificar as dependências de forma que possamos utilizar a nova versão da biblioteca de suporte.

Como nos criamos um novo projecto é possível ver dentro da secção dependencies { }  a linha compile ‘com.android.support:appcompat-v7:22.1.0’  como mostra a figura abaixo que indica que já temos esta dependência incluída por defeito. Para quem esta a modificar um projecto existente, basta substituir a linha similar caso exista ou copiar e colar caso não.

build.gradle

build.gradle

De seguida basta só fazer save no projecto e clicar em syncnow que aparece no canto superior direito do editor para que o gradle comece a fazer a resolução das dependências. SIMPLES 🙂

Com a nova biblioteca de suporte incluída no projecto, vamos continuar a construção do projecto passando para o passo seguinte que é a definição do tema da nossa aplicação seguindo as guidelines do material design.

Para definir temas na nossa aplicação, devemos criar um ficheiro themes.xml  que é onde estará o nosso código xml com a definição do tema.

Create Theme xml file

O ficheiro que acabamos de criar, irá conter os atributos do tema, que são suportados pelas versões que antecedem o lolipop. De forma a fazer com que o mesmos temas tenham o comportamento  incluindo as funcionalidades somente existentes no lolipop, devemos  criar uma pasta com o nome values-v21  dentro da pasta res e copiar para dentro da mesma o ficheiro themes.xml que criamos acima.

Create Values 21 folder

Criado o ficheiro, vamos colocar o conteúdo neles e definir o tema que utilizaremos na nossa aplicação e para tal  vamos copiar o código disponível nos seguintes gists: values->themes.xml e values-v210->themes.xml.

Na construção destes ficheiros, é preciso ter em conta que todas as tags <style>  tem os atributos name parent  que representam o nome que vai identificar o tema e o pai de quem herdar os atributos respectivamente.

De seguida temos de utilizar a  tag item de forma a definir os atributos do tema. Os atributos mais importantes a ter em conta são:

  • primaryColor: Define a cor principal que será  utilizada no toolbar  ou outra área que ocupe muito espaço.
  • primaryColorDark: Define a versão mais escura da primary color que será utilizada no status bar.
  • colorAccent: Define a cor de contraste que é utilizado para colorir acções que precisam da atenção do utilizador.

NB: A Paleta de cores assim como as regras que ditam que tons escolher para cada um dos atributos encontra-se aqui!

Com o tema definido, resta-nos só ir até ao ficheiro androidManifest e definir que a aplicação deve utilizar o tema criado como na figura baixo.

ChangeTheme

Ate então, se clicarmos no botão do Run para executar o projecto, a nossa aplicação ira abrir e só será possível ver uma tela branca com o status bar da cor que definida e para a grande surpresa, SEM ACTIONBAR.

A ActionBar não aparece  pois dentro do ficheiro themes.xml  nós definimos que iríamos herdar os atributos do tema AppCompat.NoActionBar que significa que o tema não terá um actionBar. Herdamos este tema de forma que no lugar do Actionbar possamos utilizar o novo componente introduzido no material design chamado Toolbar.

Para continuar com o post, vamos de seguida definir o Toolbar e colocar o navigation drawer  no nosso layout. Para poder ter o navigation Drawer, temos de ter como raiz o LayoutManager DrawerLayout disponível no pacote android.support.v4.widget.DrawerLayout e dentro dele colocamos a ListView, o Toolbar e o FrameLayout que será utilizado para trocar os fragments ao selecionar uma determinada opção no Drawer. O código do layout da main activity encontra-se AQUI.

Passando para o código java correspondente a MainActivity disponível aqui, temos de dar especial atenção ao seguintes pontos:

  • a nossa Activity  passou a extender a AppCompatActivity devido a depreciação da ActionBarActivity na versão nova da biblioteca de suporte.
  • no método inicializarToolbar, pegamos o Toolbar pelo seu id, e podemos definir o título, subtítulo etc como faríamos em uma ActionBar normal.

Pouco antes do lançamento desta biblioteca, era comum definir o ActionBar apartir do Toolbar fazendo  setSupportActionBar(Toolbar toolbar)  e passávamos a ter uma actionbar bastando fazer getSupportActionBar().

Mas Porque no Material design o conceito ActionBar foi deixado para trás, neste post nos utilizamos o Toolbar para definir o titulo, definir o icon do navigation drawer fazendo setNavigationIcon passando o Drawable do icon e por fim definir um evento para ficar a espera de clicks no icon utilizando setNavigationOnClickListener.

  • no método inicializarDrawer
    • começamos por pegar o DrawerLayout e a ListView pelos id’s.
    • Inicializar o ActionBarDrawerToggle e um listener para que possamos saber quando o drawer esta aberto ou fechado pelos métodos que temos implementar onDrawerOpened ou onDrawerClosed respectivamente.
    • definir o listener criado no passo anterior ao DrawerLayout
    • Criar um Adapter para a Lista do NavigationDrawer.( A criação do adapter e feita como neste Post. A grande diferença neste adapter é que temos na mesma lista dois tipos de linhas diferentes em que o primeiro tipo representa o Header com um background e o espaço para uma foto de perfil e o segundo tipo é apenas uma linha com um icon e um texto.)
    • Definir o adapter na lista.
    • Para terminar este método, registamos um listener que irá ficar a espera dos clicks nos itens da  lista.

A parte interessante deste post, é a que se segue em que ao clicar em um item do navigation drawer, mudamos a cor do texto da linha assim como a cor do icon mudam utilizando a nova classe DrawableCompat.

Para atingir tal objectivo, temos de:

  • criar duas variáveis globais( mPosicaoSelecionada mUltimaPosicaoDoDrawer) para guardar a posição do item seleccionado no drawer e a posição do item seleccionado anteriormente. Estas duas variáveis começam com o mesmo valor mas ficam diferentes depois que um item é clicado pela primeira vez e é invocado o método onItemClick  do listener da lista.
  • Depois de definir as variáveis, fechamos o drawer utilizando mDrawerLayout.closeDrawer(mListaDrawer).
  • Implementar o método para  mudar as cores da linha seleccionada( pintarItems ) dentro do callback onDrawerClosed pois é o único momento em que não temos o drawer aberto e podemos fazer as mudanças sem que utilizador note antes da próxima vez que ele abrir o drawer. Na implementação do método pintarItems :
    •  pegamos a view da lista correspondente a posição passada no método.
    • pegamos a view que contem o icon e o texto o texto das linhas
    • pegamos o drawable definido como background na view do icon e fazemos o wrap pelo DrawableCompat.
    • verificamos com o boolean passado se estamos a querer pintar ou colocar a linha na cor normal e definimos a devida cor.
    • Mudamos a cor do texto do Textview e fazemos o tint do drawable fazendo DrawableCompat.setTint(drawable,color).

Feitos os últimos passos, completamos a nossa aplicação e ao executa-la, temos o navigation drawer a funcionar devidamente e a mudar a cor do icon da opção seleccionada utilizando o DrawableCompat e eliminando o sofrimento de ter Drawables de cores diferentes para gerir os diversos estados que podemos querer representar.

PostSupportPic0 PostSupport002

Desta forma chegamos ao fim do post e mais uma vez espero que acima de tudo tenham se divertido e dado mais um passo para que se possam tornar desenvolvedores Ninjas.

Até a próxima 🙂

DM!

Links:

-Github: https://github.com/realdm/PostSupportLibrary

Advertisements

4 thoughts on “Android Support Library v22.1 – Como Comecar

  1. Sousa Júnior

    Post super cool Dário, veio aajudar-me na implementação do MD.
    Tenho uma sugestão para a série de Material Design. Para além do blog, podia fazer tutoriais em vídeo.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s