Animações no Android Part 1 – View Animations

Standard

Com o surgimento do material design no android L vários princípios de design foram criados e dentre eles um dos mais interessantes e o Meaningful Motion.

De forma muito rápida e resumida, Meaningful Motion ou em uma tradução directa, Movimentações com sentindo explica que em uma app, os componentes devem mover-se de forma que dêem uma pista visual ao utilizador sobre o efeito causado pela sua interacção com um determinado componente. Como exemplo disto podemos olhar para a animação que acontece no momento em que fazemos swipe para a direita para marcar  em um e-mail para marcar como lido no inbox, facilmente temos uma pista visual de que aquele elemento esta a sair de cena devido ao movimento do componente para a direita e seu desaparecimento.

A pesar deste principio ter sido muito enfatizado nos últimos meses com a introdução do Material design e boom de apps com animações super interessantes como mostra este showcase das melhores apps com material design em 2015, o android ja possuía mecanismos de animação de componentes bem antes do material design que no fundo consistem na base por detrás dos novos mecanismos utilizados nas super animações em algumas apps no video acima.

Como mencionei acima, o android possui 2 sistemas de animações nomeadamente:

Property Animation que nos permite animar as propriedades de um certo objecto sem que seja necessariamente um componente que ira aparecer na nossa UI(Uma view) e View Animation que é especificamente para animar Views(TextViews,Buttons, etc).

Este post está divido em 3 partes e irá consistir basicamente na explicação dos dois primeiros sistemas de animação mencionados acima e exemplos de como implementar animações cools como as que temos hoje em dia.

View Animation

Para este primeiro post, iremos falar sobre o View animation.

Como brevemente explicado acima, o View Animation System permite-nos animar propriedades de uma View como alpha(visibilidade), scale(tamanho), rotation(rotação), translation(movimentação) de forma individual ou ainda coordenar a animação destas diferentes propriedades de forma sequencial ou simultânea.

A razão pelo qual escolhi este primeiro sistema para iniciar a série, é pelo simples facto deste sistema estar disponível no framework desde as versões mais antigas do framework e acredito que seja a forma mais simples de estabelecer o contacto com um mundo das animações.

Para realizar uma animação sobre uma view utilizando este sistema, podemos fazer de 2 maneiras diferentes:

Definindo a animação no XML

Definir animações pelo XML e super simples e para o fazer basta:

  1. Criar uma pasta dentro da pasta res com o nome anim onde ficaram guardados os ficheiros de xml que definem uma animação.

animfodler

2. Criar um ficheiro XML dentro da pasta anim como mostra a imagem acima. É neste ficheiro que iremos definir qualquer animação que queiramos aplicar sobre uma view. A tag de raiz deste ficheiro pode ser uma animação em especifico como <alpha>(visibilidade), <scale>(tamanho),<rotate>(rotação), <translate>(movimentação horizontal no eixo do X ou vertical no eixo do Y) ou <set> que permite definir e coordenar diferentes animações.

Olhando para a imagem acima e explicando só a animação de visibilidade ou alpha, termos o ficheiro fade_animation.xml com a seguinte estrutura e conteúdo:

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1"
    android:toAlpha="0"
    android:duration="500"
    >
</alpha>

Como mencionei acima este ficheiro represente uma só animação e temos como a tag de raiz, a animação que pretendemos com atributos específicos que iram definir o seu comportamento. Neste exemplo, os atributos fromAlpha, toAlpha e duration representam a visibilidade  da View no inicio da animação que pode variar de 0(transparente) a 1(totalmente opaco), a visibilidade no fim da animação e a duração  da animação em milisegundos. Cada tipo de propriedade que podemos animar contem atributos diferentes e podem ver com mais detalhes no código disponibilizado no fim do post.

3. No nosso código java, temos só de carregar esta animação utilizando o método loadAnimation disponível na classe AnimationUtils como mostra o sample abaixo:

/*inicia uma animacao sobre uma view passando a view e o id da animacao que e o 
nome do ficheiro xml na pasta anim.*/
public void runAnimationFromXml(View view, int animResId){
    Animation animation = AnimationUtils.loadAnimation(this,animResId);
    view.startAnimation(animation);
}

E com 3 simples passos, vimos como definir e aplicar uma animação sobre uma view.

Uma limitação deste sistema de animações é que ele aplica animação sobre a view mas não modifica ou actualiza os valores no final da animação , isto é, se estivermos a fazer uma animação em que movemos um botão na horizontal 200dp, o botão ira movimentar-se e no fim ao clicar na nova posição em que conseguimos ver o botão,nada ira acontecer pois este não foi realmente desenhado na nova posição que deveria estar.

A forma de resolver isto seria calcular o valor da posição onde o botão estará e actualizar o botão invalidando a posição anterior e desenhando a nova no método onDraw()(Não liguem para isto agora). Este é um dos tópicos que irei abordar com mais detalhes no próximo post sobre o outro sistema de animações e demonstrar porque este é melhor que o que acabamos de ver.

A segunda forma de definir animações directamente pelo código java, passa por utilizar as classes disponíveis como AlphaAnimation, TranslateAnimation dentre outras que seguem o mesmo padrão <nomeDaPropriedade>+Animation para atingir o mesmo efeito. Neste post não irei falar sobre esta forma pois apesar de não ser muito prática, acho que deixa o código muito feio algo que podemos evitar com o primeiro método:)

E de forma muito simples e rápida conseguimos introduzir a um dos tópicos considerado complicado no android(ja foi para mim).
Espero por vocês para as próximas partes e ate la deixem o vosso comentário e partilhem com um amigo que acham que gostaria de ler este post 🙂

Aqui vai um gist com as partes relevantes e mais exemplos : https://gist.github.com/realdm/40ad4b0d121066be499c

DM

Advertisements

Material Goodies – Utilizando o CoordinatorLayout com o Toolbar

Standard

Hello Devs,  sejam todos muito bem vindos a mais um post sobre desenvolvimento para android. Com este post, vamos começar uma serie chamada Material Goodies, em que iremos implementar aqueles pequenos detalhes do material design que tornam apps incríveis e que os utilizadores não terão outra opção senao amar:).

Durante o IO15, foi anunciada e lançada a android design support library com o intuito de facilitar a vida dos desenvolvedores ao oferecer formas simples, rápidas e práticas de implementar o material design para que sejam compatíveis as versões anteriores ao Lolipop.  Esta biblioteca veio cheia de novidades como o NavigationView  que é uma forma fácil de implementar o NavigationDrawer( Usaremos no próximo post para actualizar o post anterior sobre a support library), a SnackBar, FAB(Floating Action Button), CoordinatorLayout o componente que utilizaremos neste post dentre outros.

Começaremos o material utilizando o CoordinatorLayout, pois foi um dos primeiros componentes da design support library que utilizei no momento em que ia implementar o Details screen da segunda fase da app do nanodegree do android e o resultado foi  o seguinte:

Screenshot_20150715-203246

Screenshot_20150715-203231

Entrando ja para os detalhes de implementação irei começar por falar sobre o CoordinatorLayout. O CoordinatorLayout  é um componente introduzido no android design support library e é um layout que permite maior controle dos eventos de cliques e animações na UI isto significa que podemos controlar como cada componente na UI ira se comportar ao receber um evento de click ou scroll em relação a todos os outros componentes  na UI. Este componente pode ser usado de diferentes formas fazendo com que o limite esteja apenas na cabeça do desenvolvedor.

O primeiro passo antes de passar para o código e garantir que temos as dependências bem especificadas no nosso build.gradle do module app como vem abaixo:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.1'
    compile 'com.android.support:design:22.2.0'
    compile 'com.squareup.picasso:picasso:2.5.2'
    compile 'com.android.support:cardview-v7:22.2.0'
    compile 'com.android.support:recyclerview-v7:22.2.0'
}

Para atingir o objectivo super cool das imagens acima, neste post iremos utilizar o CoordinatorLayout e a AppBar que era antigamente conhecida como ActionBar e agora é composta pela statusBar, Toolbar, Tab/Search Bar e Um Flexible Space como mostra a imagem abaixo tirada das especificações no GUIDE criado pela google(Aconselho que se de uma vista de olhos).

O link acima e as imagens não são referentes a um guide do AppBar mas sim a scrolling techniques  que explica como cada parte do AppBar se deve comportar ao fazer o scroll de forma a oferecer uma boa experiência de utilizador. Volto a aconselhar que entrem para o link e vejam os vídeos associados a cada possível técnica :).

Dado isto, o primeiro passo para criar este efeito incrivel é definir o layout como mostra abaixo:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/details_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:padding="8dp"/>

    <android.support.design.widget.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:id="@+id/collapsingToolbar"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary">

            <include layout="@layout/layout_movie_details_header" android:id="@+id/headerLayout"
                app:layout_scrollFlags="scroll"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseParallaxMultiplier="0.7"
                app:layout_collapseMode="pin"/>
        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>


</android.support.design.widget.CoordinatorLayout>

Entrando em detalhes para o layout nesta imagem, encontramos o CoordinatorLayout como o layout mais alto da hierarquia(parent) e dentro dele temos os seguintes componentes que são de extrema importância:

  • AppBarLayout: AppBarLayout e o layout onde encontramos o toolbar e todos outros componentes bem explicados acima e referenciados ao guide de scrolling techniques. Dentro do AppBar, encontramos um CollapsingToolbarLayout que é responsável por ajudar a criar transições e animações fixes dos componentes que colocamos dentro delas quando a activity recebem eventos de scroll.

Ao CollapsingToolbarLayout e todos os componentes que queremos que se movam ao receber um evento de scroll, devemos definir o atributo layout_scrollFlags  que ira especificar como determinada view ira se comportar. As flags existentes são:

scroll: flag definida a todas as views que queremos que movam-se ao mover ao fazer scroll do conteúdo da activity.

enterAlways: flag que garante que ao fazer o scroll para baixo, a view voltara a ficar visível.

enterAlwaysCollapsed: flag que indica que a view sempre ira ser apresentada com o valor definida pelo atributo minHeight que representa a mínima altura que esta pode ter.

exitUntilCollapsed: flag que indica que ao fazer scroll do conteúdo no sentido que a view ira desaparecer, ela diminua o tamanho ate ao mínimo predefinido.

Seguindo o que esta acima, no ficheiro acima definimos as scroll flags para o CollapsibleToolbarLayout e o layout que representa o header(A imagem e o rating das figuras acima). Nota: E possivel escrever o layout do header directamente no ficheiro activity_main.xml mas por questões de performance especificamente falando da hierarquia profunda que isto causaria(possivel de ver no Hierarchy viewer) achei melhor fazer o include. A view do toolbar é a única que aparece sem o atributo do scrollFlag e por essa razão é o ultimo componente a ser colocado dentro desta hierarquia. Não temos o scroll no Toolbar porque não queremos que ele se mova e que esteja presente quando o header desaparecer no scroll. Para garantir que a toolbar fica sempre la, devemos definir o atributo layout_collapseMode=”pin”.

  • Content Container: Esta view, representada  no nosso exemplo pelo fragment, é que vai conter o conteudo que mandatoriamente deve estar dentro de um Layout com a possibilidade de fazer scroll como o RecyclerView e o NestedScrollView. Infelizmente utilizar o ListView ou GridView nao funciona para este caso e não é motivo de preocupação pois estes dois layouts podem ser implementados utilizando o RecyclerView e definindo o LayoutManager apropriado :). A este layout que ira receber o conteúdo, temos de sempre colocar a linha :
    app:layout_behavior="@string/appbar_scrolling_view_behavior"

    para informar que e desta view que estamos a espera e receber eventos de scroll.

chega a ser muito estranho ter de dizer que o essencial do post acaba aqui mas sim e exactamente isso para atingir o efeito das imagens acima não precisamos de mais código e nem mais configurações…SIMPLESMENTE SIMPLES :).

Para terminar o post e ter um exemplo funcional so nos restam duas coisas:

  1. Criar um fragment com um RecyclerView dentro a representar o conteúdo que um dia poderemos ter. gists : fragment_layout_dummy.xmlDummyFragmentlayout_dummy_card.xml
  2. Na classe da activity, preencher os dados do header(fotos e texto) e por fim colocar dinamicamente o fragment criado no FrameLayout da activity reservado ao conteúdo. Gist: MainActivity.java

Desta forma chegamos mesmo ao fim do primeiro post sobre Material Goodies e ficarei feliz em receber de voces requests de posts sobre alguma coisa incrivel do material design etc.

Espero por vocês no próximo post 🙂

Link : Código Completo

DM

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

A Nova Android Support Library V 22.1 – Visão Geral

Standard

Hello a todos os Devs e espero que estejam todos muito bem de saúde e com disposição para mais um post ! Depois de algumas semanas extremamente agitadas, finalmente tive a oportunidade de voltar a escrever!

A minha volta veio com algumas reestruturações no blog em que decidi organizar melhor os posts da série para os iniciantes no desenvolvimento de apps  para android, criando novas secções em que pudesse escrever sobre tópicos mais avançados ou novidades sobre o mundo do android. Para quem esta a ler o blog pela primeira vez e gostaria de iniciar o desenvolvimento de apps para android pode começar a serie AQUI ou escolher a secção “Android – Iniciantes”.

Esta nova secção com o nome “Android Geral” terá como objectivo, escrever sobre alguns temas, tutoriais mais avançados e específicos como a utilização de APIS( Google Maps, Places, Youtube, Google Cloud Messaging), animações, etc.  A decisão de criar essa nova secção foi baseada no desejo da vontade de me desafiar e partilhar conhecimentos mais avançados assim como organizar melhor os posts para que o pessoal que esta a começar possa ter uma melhor orientação e saber que caminho seguir no blog.

E para abrir este novo espaço, neste post irei falar sobre a nova versão da  Android Support Library V22.1 que veio para animar a festa e deixar os desenvolvedores com menos dor de cabeça.

Para quem não sabe, a Android Support Library  é uma biblioteca desenvolvida pela Google que como o nome sugere oferece suporte a funcionalidades de API’s avançadas as API’s mais antigas, isto é, permite que os desenvolvedores possam desenvolver uma  certa funcionalidade disponível em uma das versões (Ex: Lolipop) e fazer com que funcione da mesma maneira em versões mais antigas (Ex: ICS). A Support Library  vem sendo desenvolvida já a muito tempo e um dos momentos mais marcantes foi  a possibilidade de utilizar o ActionBar que só era disponível para as API 11+ em aplicações que utilizavam as API’s inferiores.

Com o surgimento do Material design na versão 5 do android (Lolipop), novos padrões, componentes e funcionalidades foram adicionadas e desde o lançamento no ano passado, vários desenvolvedores tem vasculhado o código fonte para poder recriar  a experiencia do Lolipop nas versões anteriores. Tendo esta situação em mente, na altura a equipe do Google decidiu fazer pequenas actualizações na biblioteca de suporte já existente de forma enquanto preparavam o lançamento da mais recente Android Support Library V22.1

O lançamento desta biblioteca veio com varias funcionalidade novas, muito bem descritas no blog oficial AQUI mas para este post, apenas irei focar-me nos aspectos que mais me chamaram atenção e que considero  muito interessantes.

A primeira novidade  e a introdução do DrawableCompat, uma classe que permite fazer o Tint de drawables(Falei chinês). Com o Tint  de drawables quero dizer a possibilidade de poder mudar por exemplo a cor de um icon durante o tempo de execução sem ter de disponibilizar o mesmo icon com cores diferentes. Para quem tiver a app “Play Newsstand” poderá notar a  mudança de cor do icon de um item quando seleccionado no navigation drawer. Para poder utilizar a classe e fazer o Tint basta encapsular o Drawable no método DrawableCompat.wrap(Drawable) e de seguida invocar os métodos seleccionados como o setTint(), setTintMode etc.

A segunda novidade e a classe ColorUtils  que oferece ferramentas para melhor trabalhar com cores permitindo calcular a relação do contraste entre as cores, a opacidade de forma a manter um determinado contraste. (Estas ferramentas são perfeitas para manter um texto legível quando por cima de uma imagem).

A terceira novidade e a introdução de Interpolators, que permitem controlar  a variação de uma determinada animação. O Lolipop já veio com vários interpolators que permitiram criação de animações bem suaves e de diferentes tipos. Ainda nas animações, foi também adicionado o PathInterpolatorCompat  que permite a criação de curvas de beizel quadráticas e cúbicas(Para mais informações sobre Path e curvas de beizel veja AQUI)

Indo mais para o nível de Activities  e Widgets, existem 4 coisas que foram algumas modificadas e outras adicionadas:

  • Houve uma depreciação da ActionbarActivity para AppCompatActivity. Esta mudança não foi apenas no nome mas  na utilização da classe AppCompatDelegate que para vos ser sincero ainda estou a tentar entender o que  é e como funciona. Entretanto muitas das aplicações não precisam chegar ao detalhe de mexer com AppCompatDelegate pelo que no uso diário, convem extender a Activity da classe AppCompatActivity.
  • Adição do Material Design Dialogs permitiu a criação de dialogs(“pop ups) com o estilo do Material design utilizando a class AppCompatDialog e actualizando a antiga classe AlertDialog  para que tenha as mesmas capacidades.
  • Voltando ao primeiro aspecto sobre o Tinting falado acima, e possível (Finalmente =) )fazer o mesmo com widgets(Botões, TextView, CheckBoxes). Para tal, foram criados novos widgets com esta capacidade para substituir os antigos com os seguintes novos nomes:
    • AppCompatAutoCompleteTextView
    • AppCompatButton
    • AppCompatCheckBox
    • AppCompatCheckedTextView
    • AppCompatEditText
    • (Mais no blog oficial)
  • O quarto e o último aspecto é a capacidade que já tinha sido lançada no Lolipop de poder definir um tema para cada View, permitindo por exemplo colocar o Toolbar com um tema e cor diferente do tema da activity ou do resto dos componentes. Na versão antiga para definir o tema na Toolbar  era preciso definir o namespace app e na view  fazer app:theme=”<tema>” .O Atributo to theme foi adicionado ao android namespace permitindo que qualquer view na API 11+ possa definir seu próprio tema fazendo android:theme=”<tema>”.

Existem muito mais ferramentas como a Pallete , RecyclerView, RenderScript que foram adicionadas e que permitem a criação de novas  experiencias consistentes para todas as versões do android existentes.

Como desenvolvedor, fico grato a equipe da Google por lançar o update e espero que todos vocês façam uso destas novas ferramentas para desenvolver altas apps!

Caso tenha algum comentário ou questão, deixe ficar no comentário que poderemos continuar a conversa lá.

Muito Obrigado,

DM