Eventos

GDG DevFest Sul 2015

Posted by rlecheta on novembro 14, 2015
Android, Eventos / 4 Comments

Olá pessoal, o objetivo deste tutorial é mostrar passo a passo como criar o app (vídeo abaixo) demonstrado no DevFest Sul 2015.

Este tutorial será bem prático, então vamos lá!

1) Criar o projeto no Android Studio:

Utilize o o wizard > File > New Project.

Atenção: No wizard digite br.com.devfestsul no campo Company Domain, pois assim todas as classes e código-fonte que forem copiados durante este tutorial vão funcionar prontamente.

Screen Shot 11-13-15 at 05.32 PM

Selecione qualquer API Level. Eu deixei com a opção padrão.

Screen Shot 11-13-15 at 05.32 PM 001

Selecione o template para criar o Navigation Drawer que é o menu lateral.

Screen Shot 11-13-15 at 05.32 PM 002

No final do wizard, aceite o padrão que é criar a MainActivity e clique em Finish.

Screen Shot 11-13-15 at 05.33 PM

2) Execute o projeto no emulador.

O resultado deve ser como a figura abaixo. O wizard do Android Studio já criou o Nav Drawer (menu lateral).
a

3) Faça o download dos arquivos para ajudar na digitação do código.

Para auxiliar a execução do exercício, este arquivo contém algumas activities e fragments para mostrar uma lista de planetas e uma tela de detalhes.

https://raw.githubusercontent.com/rlecheta/DevFestSul2015/master/Resources.zip

Este arquivo não tem nada de mais, e vou explicar cada classe quando chegar o momento.

Ao descompactar o arquivo você verá algumas pastas.

Screen Shot 11-13-15 at 05.54 PM

Entre na pasta resources-1.

Screen Shot 11-13-15 at 05.54 PM 001

Copie ambas as pastas java e res (Fazendo Ctrl+C) e cole (CTRL+V) no Android Studio.

Mas para colar, deixe o Android Studio no modo de navegação Project, e com a pasta /app/src/main selecionada, conforme mostra a figura.

d

Ao colar (CTRL+V), alguns arquivos serão substituídos, como por exemplo, o arquivo colors.xml. Clique em Override for all para confirmar.

Screen Shot 11-13-15 at 05.55 PM 001

Depois de copiar os arquivos você verá várias classes. Não vou explicar cada uma pois isso é Android básico.

A única coisa que você precisa saber é que o fragment PlanetaListFragment mostra uma lista de planetas. Ao clicar em algum planeta, a activity PlanetaActivity é aberta para mostrar os detalhes. Esta activity insere no seu layout o fragment PlanetFragment.

Eu gosto de utilizar este modelo: a activity controla a navegação de telas e os fragments controlam o conteúdo.

Screen Shot 11-13-15 at 05.55 PM 002

Depois de copiar os arquivos, volte o modo de visualização para Android, pois a visualização fica mais enxuta, sendo mais fácil de encontrar os arquivos.


e

4) Adicionando o fragment que lista os planetas.

O layout da activity main mostra apenas um TextView, portanto em seu lugar vamos adicionar um layout de marcação para adicionar o fragment da lista.

  • app_bar_main.xml

Altere esta linha:

 
<include layout="@layout/content_main" />

Por esta:

<LinearLayout
 android:id="@+id/fragContainer"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 app:layout_behavior="@string/appbar_scrolling_view_behavior" />

Adicione o fragment pela API na classe MainActivity, lá no final do método onCreate(bundle).

  • MainActivity.java
if(savedInstanceState == null) {
 getSupportFragmentManager().beginTransaction().add(R.id.fragContainer,new PlanetaListFragment(),null).commit();
}

O código que lista os planetas está usando algumas libs como RecyclerView e CardView do Material Design. Então vamos adicionar estas bibliotecas (e outras) no app/build.gradle.

compile 'com.android.support:recyclerview-v7:23.1.1'
compile 'com.android.support:cardview-v7:23.1.1'
compile 'com.android.support:palette-v7:23.1.1'
compile 'org.parceler:parceler:1.0.4'
compile 'org.parceler:parceler-api:1.0.4'
compile 'com.squareup.picasso:picasso:2.5.2'

A última configuração é adicionar a activity PlanetaActivity no arquivo de manifesto.

  • AndroidManifest.xml
<activity android:name=".activity.PlanetaActivity" android:theme="@style/AppTheme.NoActionBar" />

Feito isso execute o projeto novamente. O resultado será a lista de planetas (PlanetaListFragment).
c
Ao clicar em algum planeta você verá a tela de detalhes (PlanetaActivity / PlanetaFragment).

Repare que a system bar (barra superior onde mostra o relógio) está transparente na tela do planeta, e isso está errado.
d

Isso acontece porque utilizamos o tema AppTheme.NoActionBar para a activity PlanetaActivity, pois era preciso remover a action bar, a fim de adicionar a Toolbar.

Caso não conheça a Toolbar, sugiro reforçar o conceito antes de continuar.

O problema é que o Android Studio criou um único tema para a 1ª tela que mostra o Nav Drawer e para as demais activities. Porém, este recurso de deixar a barra de sistema transparente deveria ser utilizado apenas pela MainActivity, pois ela precisa disso para o Nav Drawer abrir em tela cheia, sobre a system bar.

Para corrigir o problema, vamos criar um tema mais elaborado, para isso vamos copiar o arquivo /res/values/styles.xml e /res/values-v21/styles.xml da pasta resources-2-styles.

Screen Shot 11-13-15 at 06.22 PM

Depois de substituir os arquivos no projeto, o arquivo de styles.xml será assim:

  • /res/values/styles.xml
<resources>

    <!-- Base application theme. -->
    <style name="BaseAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="colorControlHighlight">@color/colorControlHighlight</item>
    </style>

    <!-- Tema do projeto -->
    <style name="AppTheme" parent="BaseAppTheme" />

    <!-- Nav Drawer -->
    <style name="AppTheme.NavDrawer" parent="BaseAppTheme" />

    <!-- Toolbar -->
    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat" />

</resources>

Já o arquivo da pasta /res/values-v21 vai customizar o tema para o Android 5.0 ou superior.
Note que no AppTheme foi adicionado as propriedades para fazer a animação de transição entre activities. E no tema AppTheme.NavDrawer foi deixado a system bar transparente, algo que vamos usar apenas na MainActivity, pois somente ela mostra o Nav Drawer.

  • /res/values-v21/styles.xml
<resources>

    <!-- Activity Animations para API Level 21 -->
    <style name="AppTheme" parent="BaseAppTheme" >

        <!-- Activity Animations -->
        <item name="android:windowEnterTransition">@android:transition/fade</item>
        <item name="android:windowExitTransition">@android:transition/fade</item>

        <item name="android:windowAllowEnterTransitionOverlap">true</item>
        <item name="android:windowAllowReturnTransitionOverlap">true</item>
        <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
        <item name="android:windowSharedElementExitTransition">@android:transition/move</item>

    </style>

    <!-- Nav Drawer em full screen para API Levle 21 -->
    <style name="AppTheme.NavDrawer" parent="BaseAppTheme">
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>

</resources>

Uma vez que os temas estão configurados altere o AndroidManifest.xml para que o tema padrão na tag <application> seja AppTheme. Deixe apenas a MainActivity com o tema AppTheme.NavDrawer. O restante das activities não precisam declarar o tema, pois será utilizado o tema padrão definido na tag <application>.

A figura abaixo mostra como tem que ficar a configuração:

tema

Pronto! Execute o projeto novamente e desta vez a tela do planeta estará com a system bar com a cor azul primaryDark definida no tema e no arquivo colors.xml.

Lembrando que a MainActivity utiliza o outro tema, pois o Nav Drawer abre sobre a system bar, e por isso que neste caso ela precisa ser transparente.

e

5) Brincando com animações durante a transição de telas

No arquivo /res/values-v21/styles.xml o tema AppTheme foi customizado para habilitar as propriedades das animações das activities (no caso de Android >= 5.0).

O segredo para fazer a animação de transição de telas, é utilizar o método ActivityOptionsCompat.makeSceneTransitionAnimation(…) ao invés do clássico método startActivity(intent).

Faça o seguinte: Clique uma vez na raiz do projeto e depois utilize a tecla de atalho Ctrl+Shift+F (Find) para abrir o janela de busca. Na janela digite (1).

Isso vai encontrar no código três lugares onde deixei o comentário (1). A única coisa que você precisa fazer é descomentar o código como vou explicar a seguir.

Na classe PlanetaListFragment troque o startActivity(intent) pelo seguinte código:

  • PlanetaListFragment.java
String key = getString(R.string.transition_key);
ImageView img = holder.img;
ActivityOptionsCompat opts = ActivityOptionsCompat.makeSceneTransitionAnimation(getActivity(), img, key);
ActivityCompat.startActivity(getActivity(), intent, opts.toBundle());

Na classe PlanetaFragment remova o comentário da seguinte linha:

  • PlanetaFragment.java
// (1) Chave da animação
 ViewCompat.setTransitionName(img, getString(R.string.transition_key));

E na classe PlanetaAdapter também remova o comentário:

  • PlanetaAdapter.java
// (1) Chave da animação
ViewCompat.setTransitionName(holder.img, context.getString(R.string.transition_key));

O que fizemos foi ativar a chave compartilhada (transition key) do ImageView entre a tela da lista (adapter) e a tela de detalhes.

Como o ImageView possui a mesma chave de transição entre as duas telas, a transição entre as duas activities será animada.

Portanto vá em frente e execute o código. O resultado será a animação que você viu no vídeo no início deste tutorial.

Por padrão a animação de transição de uma activity é desfeita ao clicar no botão voltar.

Porém, também por padrão, se você clicar no botão up navigation da toolbar (aquele lá em cima com a seta para a esquerda) a animação não acontece.

Mas como eu já chamei o método supportFinishAfterTransition() ao clicar no botão up navigation (android.R.id.home) esta animação foi feita (por isso funcionou). Moral da história, sempre chame o método supportFinishAfterTransition() no lugar do finish() para executar a animação inversa ao sair da tela.

Screen Shot 11-13-15 at 08.59 PM

6) Adicionando as Tabs + ViewPager

A lib do Material Designa possui o componente TabLayout que facilita a criação das tabs, e o melhor de tudo é que ela funciona de forma integrada ao ViewPager.

Neste exemplo vou criar duas tabs, Planetas e Constelações. Porém para facilitar a explicação, vou adicionar o mesmo fragment dos planetas em ambas as tabs ahha. Sendo assim, se quiser melhore o exemplo depois.

Então mãos a obra!

No arquivo app_bar_main.xml, troque o layout de marcação “fragContainer” que adicionamos anteriormente pelo ViewPager:

  • app_bar_main.xml
<android.support.v4.view.ViewPager
 android:id="@+id/viewPager"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:layout_behavior="@string/appbar_scrolling_view_behavior" />

E no mesmo arquivo, logo abaixo da toolbar adicione as Tabs.

<android.support.design.widget.TabLayout
 android:id="@+id/tabLayout"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 />

Se precisar confira como ficou o layout do arquivo aqui:

https://github.com/rlecheta/DevFestSul2015/blob/master/Planetas/app/src/main/res/layout/app_bar_main.xml

Na MainActivity, vamos remover o código que adicionava o fragment da lista de planetas:

if(savedInstanceState == null) {
      getSupportFragmentManager().beginTransaction().add(R.id.fragContainer,new PlanetaListFragment(),null).commit();
}

No lugar deste código vamos adicionar o método setupViewPagerTabs();

Este método deverá ser criado na classe MainActivity:

  • MainActivity.java
private void setupViewPagerTabs() {
        // ViewPager
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
        viewPager.setOffscreenPageLimit(2);

        viewPager.setAdapter(new TabsAdapter(this, getSupportFragmentManager(),getIntent().getExtras()));
        // Tabs
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        // Cria as tabs com o mesmo adapter utilizado pelo ViewPager
        tabLayout.setupWithViewPager(viewPager);
        int cor = ContextCompat.getColor(this, R.color.white);
        // Cor branca no texto (o fundo azul foi definido no layout)
        tabLayout.setTabTextColors(cor, cor);
    }

Para o código compilar adicione a seguinte linha no arquivo colors.xml. Esta cor é utilizada para configurar a cor do título das tabs.

<color name="white">#ffffff</color>

Pronto, as Tabs + ViewPager já estão funcionando. Ao executar o projeto o resultado será o seguinte:

tabs

7) Brincando com Scroll.

No arquivo include_toolbar.xml adicione o seguinte atributo dentro da Toolbar:

app:layout_scrollFlags="scroll|enterAlways"

Screen Shot 11-13-15 at 09.17 PM

Isso fará com que a Toolbar suma da tela ao fazer o scroll da lista de carros. O print a seguir mostra este efeito ao fazer a rolagem. Se quiser veja no vídeo no início do tutorial que fica mais claro.

a

Ooops, você deve ter percebido algo de errado na figura, ou talvez no emulador. A toolbar invadiu o espaço da system bar e ficou meio pra fora da tela. Tem algo errado.

Isso acontece porque o wizard do Android Studio gerou o código do CoordinatorLayout com o atributo android:fitsSystemWindows=”true” que faz com que este layout ocupe a tela inteira. Mas isso está errado. Esse atributo só deve ser usado no DrawerLayout e NavigationView, lá dentro da MainActivity. Pois somente na tela inicial vamos utilizar o Nav Drawer.

Então remova o código indicado em amarelo na figura:

  • app_bar_main.xml

Screen Shot 11-13-15 at 09.21 PM

Feito isso, o código deve funcionar conforme o esperado.

8) Scroll e o botão FAB.

Outro efeito interessante que é comum encontrar neste tipo de tela, é animar (show/hide) o botão FAB (Floating Action Button) durante a rolagem. Isso pode ser feito implementando uma classe de Behavior customizada, pois o CoordinatorLayout permite que seus filhos reajam ao efeito de scroll por meio desta classe de comportamento.

Já existe no projeto a classe ScrollAwareFABBehavior, portanto basta adicionar a seguinte linha no botão FAB no arquivo app_bar_main.xml:

app:layout_behavior=”br.com.devfestsul.planetas.utils.ScrollAwareFABBehavior”

Screen Shot 11-13-15 at 09.34 PM

Com esta alteração, quando rolar a lista, o botão FAB vai executar a animação definida no arquivo /res/anim/fab_out.xml. E quando a lista rolar novamente para cima, a animação contrária será executada /res/anim/fab_in.xml.

Você pode ver a animação no vídeo mostrado no início do tópico, e como você pode ver o botão FAB vai sumir ao fazer a rolagem da lista e depois vai aparecer novamente.

9) Efeito de rolagem na tela de detalhes.

No vídeo você pode ver que na tela de detalhes o app está mostrando a foto do planeta na Toolbar.

Este efeito é chamado na documentação do Material Design de Flexible space with image.

Para construir este layout, você deve organizar seu layout +- com estes componentes.

15.006

Mas este desenho assusta mais do que o necessário. Na prática é bem simples.

Eu já deixei no projeto a classe CollapsingToolbarActivity que já faz toda a mágica. E o arquivo /res/layout/activity_collapsing_toolbar.xml contém o layout descrito nesta figura.

Você está duvidando que é simples? Então vamos lá.

  1. Altere a classe PlanetaActivity para ser filha de CollapsingToolbarActivity .
  2. Depois copie o fonte do arquivo activity_collapsing_toolbar.xml para o arquivo activity_planeta.xml. Ou utilize o layout activity_collapsing_toolbar.xml.
  3. Chame o método initViews() dentro do método onCreate(bundle).

Confira como ficaram estas 3 alterações:

Screen Shot 11-13-15 at 09.57 PM

Ao executar o projeto e clicar no planeta Terra, o resultado será o seguinte:

No centro do layout a foto do planeta Terra será corretamente exibida, pois isso era o que a classe PlanetaFragment já fazia.

No layout da (AppBar / Toolbar / CollapsingToolbarLayout) está fixo um ImageView com a foto do planeta Marte.

terra

O que precisamos fazer é remover o ImageView do layout da classe PlanetaFragment. Isso deve ser feito tanto no layout XML quanto no código Java.

No arquivo fragment_planeta.xml basta comentar o ImageView como mostra nesta figura:

Screen Shot 11-13-15 at 10.07 PM

E no código da classe PlanetaFragment também remova o código do ImageView.

No lugar do ImageView, utilize o seguinte código (que vai setar a imagem diretamente na App Bar)

CollapsingToolbarActivity activity = (CollapsingToolbarActivity) getActivity();
activity.setAppBarImage(imgPlaneta);

Confira como ficou o código nesta figura:
Screen Shot 11-13-15 at 10.10 PM
Pronto! Execute o projeto e veja que a foto do planeta será mostrada no header da App Bar. E o melhor de tudo é que o scroll flexível já está funcionando. Você verá que afoto do planeta vai diminuir ou aumentar, conforme a rolagem é feita.

terra

10) Mostrando o nome do planeta na AppBar / Toolbar

Até o momento na tela de detalhes, o texto “Planetas” está fixo no header da CollapsingToolbarLayout, pois por padrão o nome do aplicativo é mostrado como título.

Para mostrar o nome do planeta no header, temos que passar o objeto Planeta como parâmetro para a próxima tela, pois atualmente estamos passando apenas o int que é a a referência ao recurso de uma imagem R.drawable.

Para passar parâmetros para a outra tela podemos fazer a classe Planeta implementar a interface Serializable, ou melhor ainda interface Parcelable (que é mais performática). Mas como implementar a interface Parcelable não é simples, vamos utilizar a lib parcels (já adicionada no build.gradle).

Para isso, adicione a anotação @Parcel na classe Planeta conforme indicado na figura.

Screen Shot 11-13-15 at 10.54 PM 001

Na classe PlanetaListFragment vamos trocar a forma de passar parâmetro de:

intent.putExtra("imgPlaneta", p.img);

Para:

intent.putExtra("planeta", Parcels.wrap(p));

Neste caso a classe Parcels faz a mágica de converter o objeto planeta para o tipo Parcelable.

A figura baixo mostra a alteração:
Screen Shot 11-13-15 at 10.59 PM
Na classe PlanetaFragment precisamos ler o objeto Planeta, portanto utilize o código abaixo. Neste caso a foto e o nome do planeta são mostrados na App Bar.

Planeta p = Parcels.unwrap(getArguments().getParcelable("planeta"));
if (p != null) {
	CollapsingToolbarActivity activity = (CollapsingToolbarActivity) getActivity();
	activity.setAppBarImage(p.img);
	activity.setAppBarTitle(p.nome);
}

Para sua validação, a figura abaixo mostra como o código tem que ficar:

Screen Shot 11-13-15 at 11.02 PM
Ao executar o projeto novamente veja que tanto a foto quanto o título do planeta aparecem na App Bar. Na prática este é o espaço do CollapsingToolbarLayout.

O nome CollapsingToolbarLayout é um tanto quanto sugestivo certo?

terra
11) Paleta de cores

Para melhorar ainda mais a brincadeira, vamos brincar com a paleta de cores. O objetivo é extrair a cor da foto do planeta e pintar o fundo da App Bar com esta cor.

Por exemplo, o fundo do planeta Terra ficará azul, mas do planeta Marte ficará meio laranja.

Esta parte é simples, portanto só copie o código do github:

https://github.com/rlecheta/DevFestSul2015/blob/master/Planetas/app/src/main/java/br/com/devfestsul/planetas/fragments/PlanetaFragment.java

Neste código a classe Palette é responsável por fazer a extração da cor. Veja que adicionamos esta biblitoteca no build.gradle no início do tutorial.

Screen Shot 11-13-15 at 11.11 PM

Na figura eu marquei com uma seta dois métodos da classe CollapsingToolbarLayout:

O método setBackgroundColor(color) define a cor de fundo extraída da figura.

O método setContentScrimColor(color) define a cor usada pela toolbar, quando a imagem é contraída. O código extrai a variação escura “dark” para esta cor. No vídeo fica bem claro a diferença de cores.

Você verá que no código também estou pintando cada TextView da tela do planeta com uma cor diferente, todas extraídas da foto por meio da paleta de cores. Por isso deixei 6 TextViews no layout.

12) Botão FAB na CollapsingToolbarLayout

Para fechar o tutorial, adicione este botão FAB no layout da tela do planeta. Veja que ele é ancorado na App Bar.

Screen Shot 11-13-15 at 11.28 PM

Ao executar o projeto, você verá o botão FAB com o símbolo de (+) na App Bar. Ele está lá pois o atributo layout_anchor (âncora) foi definido na App Bar. Simples não é? E o melhor de tudo, é que o botão FAB vai animar automaticamente durante a rolagem.

mais
É isso pessoal, espero que este tutorial tenha ajudado alguém, qualquer dúvida é só entrar em contato. Abs.

https://plus.google.com/+RicardoLecheta

https://www.facebook.com/ricardolecheta

https://twitter.com/rlecheta

Intel Software Day 2015

Posted by rlecheta on julho 02, 2015
Eventos / 2 Comments

Olá pessoal, o código-fonte do projeto com Material Design está no github.

https://github.com/rlecheta/IntelSoftwareDay2015

Está utilizando a Material Design Library lançada no Google I/O 2015.

CollapsingToolbar

Android Webconf- conferência on-line

Posted by rlecheta on setembro 26, 2013
Eventos / No Comments

Fique atento para o evento Android Web Conf (on-line), organizado pela revista Mundo Java.

Será realizado dia 8 de Novembro, sexta-feira na parte da manhã.

image001

Teremos 4 palestras.

1) Desenvolvendo aplicativos Android para multiplas telas

Renan Barbioni / XDS Extended Development Solutions

2) Consumindo dados via Web Service no Android

Alexandre Antunes / Bemobi

3) Testes Automatizados para Android

Leonardo Otto / Livetouch

4) Novas Funcionalidades da API de Localização

João Gouveia / Mobicare

Google I/O 2013 – resumo

Posted by rlecheta on maio 16, 2013
Android, Eventos / No Comments

Olá pessoal, fiquem por dentro das novidades e confiram o resumo do Google I/O 2013.

Fonte: http://www.tecmundo.com.br/google-i-o-2013/39773-google-i-o-2013-resumo-do-primeiro-dia.htm

MobileConf 2013 – GCM

Posted by rlecheta on abril 08, 2013
Android, Eventos / 1 Comment

Olá pessoal

O MobileConf 2013 estava show de bola, teve muitas palestras boas, sobre Android, iOS e Web Mobile.

Segue link dos slides da minha palestra sobre GCM – Google Cloud Messaging.

http://www.slideshare.net/rlecheta/mobile-conf-gcm2013lecheta

O código-fonte está no github.

https://github.com/rlecheta/MobileConf2013

 

 

Feliz Natal

Posted by rlecheta on dezembro 22, 2012
Eventos / No Comments

A equipe responsável pelo desenvolvimento da plataforma Android publicou hoje um vídeo na qual deseja a todos os consumidores um Feliz Natal. “Obrigado por fazer parte da comunidade Android em 2012. Boas festas!”, publicou a equipe do Google.