SUMÁRIO Introdução ao universo dos Apps Android Criando um novo projeto no Android Studio Meu primeiro aplicativo Android ConstraintLayout. Conhecendo um pouco mais... Criando uma calculadora IMC Android

SiteBook

Desenvolvimento de aplicativos para Android

Projeto App Android: Portal de Notícias G1

Neste Projeto vamos reproduzir o portal de notícias G1. Desta forma vamos lidar com alguns que já tivemos contato como inserção de componentes, além disto, aprender customização de temas, criação e navegação entre activityies, menus

G1 - Portal de Notícias

O que é Projeto Android: Portal de Notícias G1?

G1 é um portal de notícias brasileiro mantido pelo Grupo Globo e sob orientação da Central Globo de Jornalismo, disponibiliza o conteúdo de jornalismo das diversas empresas do Grupo Globo, além de reportagens próprias em formato de texto, fotos, áudio e vídeo (fonte Wikipédia).

Neste projeto vamos reproduzir parte do app do Portal de Notícias G1, assim poderemos aprender e praticar a inserção de componentes em uma tela, customização de temas, criação e navegação entre activities, além de menus.

Então, mãos a obra.

Customização de Temas.

A primeira coisa que devemos fazer e criar um novo Projeto Android que vamos denominar simplesmente de G1. Com o Projeto G1 criado, vamos customizar o tema, isto é, alterar as cores do app para que fique semelhante ao original G1.

Antes de aplicarmos a configuração do tema, temos de saber como o Android Studio atua nesta personalização.

O Android Studio centraliza tudo que utiliza em um local específico, que chamamos de recursos (resources em inglês). Podemos localizar parte de recursos na aba a esquerda no menu Android. Neste ponto acesse a pasta res (de resources) e em seguida em values terá acesso a três itens (arquivos xml).

  • Colors.xml;
  • Strings.xml;
  • Styles.xml.

No capitulo Criando uma Calculadora IMC Android já tivemos uma noção de como o arquivo Strings.xml funciona. Agora veremos os outros dois que trabalham juntos, o Colors.xml e o Styles.xml.

Em resumo o arquivo Colors.xml cria cores que serão utilizadas pelo app. Estas cores são guardadas e centralizadas neste arquivo para facilitar a manutenção do código do app, da mesma forma o arquivo Styles.xml tratam dos estilos dos temas a ser usado.

Tela App Android.

Para compreender melhor acesse o código styles.xml. Ele terá aparência do que é exibido abaixo:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>
  • Na linha 1: Há abertura de uma tag chamada resourses. Dentro dela foi criada uma tag chamada style (estilo);
  • Na linha 3 vemos a tag style foi chamada de “appTheme”. Em seguida temos a definição do atributo parent, que se refere a um estilo padrão aplicada a este tema específico.
  • Para entender avancemos para linhas de 5 a 7 foram criados três itens que correspondem a cores diferentes. Estas cores são aplicadas em diferentes partes do app identificadas na imagem “Tela App Android”. Na verdade, nestas linhas o tema aplicado na linha 3 através do atributo ‘parent’ é customizado, como indica a linha 4.
  • Na linha 5 temos a “colorPrimary”, que aplicamos a cor da barra de ações (ActionBar);
  • Já a linha 6 configuramos que chamamos de “colorPrimaryDark”, a cor da Barra de Status;
  • A cor configurada na linha 7 “colorAccent” é utilizada em alguns botões específicos do app;
  • As linhas 8 e 9 fecham respectivamente as tags styles e resources.

Por questão de organização que permitem uma melhor administração do código do app, as cores utilizadas nos itens da tag style, foram geradas pelo arquivo colors.xml. Acessando este código você se depara com estas mesmas cores criadas, com seus respectivos nomes e códigos em hexadecimal correspondente à cores.

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#6200EE</color>
<color name="colorPrimaryDark">#3700B3</color>
<color name="colorAccent">#03DAC5</color>
</resources>

Se você observar estes recursos são acessados pela tag style através da codificação do nome da tag color antecedida pelo símbolo arrouba (@). Desta forma @color/colorPrimary do arquivo styles.xml acessa a cor colorPrimary configurado no arquivo colors.xml, que determina a cor da Barra de Ação do app (ActionBar).

Tela App Android
Tela App Android

Configurando de Tema do App G1.

Agora que já temos noção como é configurado um tema em um app android, podemos modificar os atributos para as cores do app G1.

Primeiro vamos criar as cores. Existem várias maneiras de fazer isto. Uma delas e acessando o arquivo colors.xml. Copie e cole uma linha com o nome de colorPrimaryDark.

Modifique este nome da nova cor, para colorStatusBarG1, por exemplo. Lembre-se, você pode usar o nome que quiser, mais não deve repetir nenhum existente.

Agora modifique a cor. Para isto clique no quadrinho correspondente a esquerda da nova cor, isto irá abrir um editor de cor. Edite a cor para um cinza claro, cujo código hexadecimal seja #E32DA.

Repita o processo para criar uma cor nova para a actionBar. Uma sugestão para o nome é colorActionBarG1. A cor é um branco, cujo código hexadecimal é #FFFFFF.

criando-cores-app

Criado a cores no arquivo colors.xml, ele terá esta aparência:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
    <color name="colorStatusBarG1">#E3E2DA</color>
    <color name="colorActionBarG1">#FFFFFF</color>
</resources>

Depois das cores criadas, além da cor de fundo (cinza claro), aplique-as no tema.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorActionBarG1</item>
        <item name="colorPrimaryDark">@color/colorStatusBarG1</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

Aplicadas as cores ao tema, a tela do app já reproduz a aparência que desejamos, ou seja, a barra de status cinza claro, a barra de ação branca.

Outra configuração que podemos fazer é relativo a cor do fundo da janela de exibição do app. Para isto, clique no gráfico da tela do app e na guia atributo pesquise por background (fundo).

Neste item (conta-gotas) você verá se não houver nenhuma cor definida, um ícone igual a um conta-gotas. Ao clicar nele você poderá personalizar uma cor. Ao customizar a cor assim como a opacidade através dos controles disponíveis, você tem o valor em hexadecimal quando definida e assim utilizar nos códigos como em colors.xml. Clicando no ícone de forma retangular mais à direita você tem acesso a outros recursos de cores.

Para finalizar temos de inserir a logo do G1.

Tela App Personalizada
Tela App Tema G1