Google Chart API: Criando apps com gr�ficos para o Android

Fique por dentro

Este artigo apresenta um estudo de caso de utilizaç�o da Google Chart API em aplicaç�es Android. Para isso, desenvolveremos uma aplicaç�o de acompanhamento de calorias consumidas a cada refeiç�o. O estudo da Google Chart API � �til porque ela disponibiliza uma s�rie de gr�ficos que podem ser facilmente incorporados em nossas aplicaç�es. Sem o uso dela ter�amos um grande trabalho para criar, do zero, gr�ficos para representar dados matem�ticos para os usu�rios.
Autores: Gilso Manfredi e Robison Cris Brito

A geraç�o de gr�ficos matem�ticos no Android, como gr�ficos de linhas, colunas, barras ou pizza, pode ser feita hoje utilizando recursos nativos do ambiente gr�fico, usando desenho de baixo n�vel na tela do device a partir de recursos de canvas. Esse processo pode ser bastante custoso, em especial do ponto de vista de tempo de desenvolvimento, ainda mais que, dependendo do aplicativo m�vel, o mesmo pode ter muitos gr�ficos e o retrabalho pode ser muito grande.

Com a falta de uma API nativa para a geraç�o de gr�ficos e a fim de facilitar esse trabalho, � necess�rio utilizar ferramentas de terceiros. Entre os exemplos de framework, alguns podem ser utilizados de forma off-line, sendo que esses costumam ser bastante limitados. Nesse cen�rio, destaca-se o HolographLibrary, o qual permite o desenvolvimento de gr�ficos, mesmo que simples, para a plataforma Android sem a necessidade de conex�o � internet.

J� a Google Chart API � uma ferramenta muito �til e interessante para quem desenvolve aplicaç�es web e quer gerar gr�ficos de uma forma din�mica. Essa API se caracteriza pela facilidade de utilizaç�o e implementaç�o, n�o sendo necess�ria a instalaç�o de qualquer software ou framework. Para a sua utilizaç�o, basta a URL da API, na qual ser�o referenciados os dados e caracter�sticas necess�rias para gerar o gr�fico pretendido.

Na Figura 1, temos um exemplo dos gr�ficos que geraremos em nosso estudo de caso.

Figura 1. Gr�ficos gerados pela Google Chart API

Como a conectividade est� cada vez mais presente no dia a dia das pessoas, ferramentas que, assim como a Google Chart API, possuem a caracter�stica de trabalhar totalmente online passaram a ser uma opç�o para os softwares na plataforma Android. Essa API, ao contr�rio da maioria das APIs off-line, fornece v�rias opç�es de tipo de gr�fico. Seu uso � bastante simplificado, bastando na requisiç�o HTTP enviar os par�metros para geraç�o do gr�fico. No seu retorno ser� enviada uma p�gina web din�mica, a qual pode ser apresentada pela aplicaç�o por meio de um componente WebView.

Este artigo tem o objetivo de apresentar um estudo de caso de utilizaç�o da Google Chart API em aplicaç�es Android. O exemplo desenvolvido apresentar� de forma gr�fica a quantidade de calorias consumidas a cada refeiç�o do dia pelo usu�rio do aplicativo m�vel, assim como a quantidade de calorias necess�rias para cada dia. Para o desenvolvimento desse estudo de caso, foi utilizada a vers�o 1.5 do Android Studio.

Estudo de caso

Primeiramente, no Android Studio, vamos criar um novo projeto. Para isso, escolhemos a opç�o �File > New > New Project...�. Na primeira tela, deve-se informar o nome do projeto e do dom�nio (sugere-se para o primeiro GraficosComGoogleCharts e para o segundo graficoscomgooglecharts.android.manfredi.com.br).

Na pr�xima tela informamos a vers�o m�nima do SDK � para o exemplo foi utilizada a API 15. Em seguida ser�o apresentados os modelos de telas dispon�veis para o aplicativo Android, onde selecionamos a Empty Activity para criaç�o de uma tela inicial sem conte�do. Na �ltima tela informamos no campo �Activity Name� o valor TaxaMetabolicaActivity, sendo esse o nome da classe que tratar� da tela principal. Por fim, finalizamos a criaç�o do projeto com Finish.

A tela principal ser� utilizada para obter as informaç�es para o c�lculo da quantidade de calorias necess�rias para um corpo se manter vivo, realizado a partir da taxa metab�lica basal. Resumidamente, esse valor � calculado com base na altura, peso, idade e sexo da pessoa, considerando para o c�lculo tamb�m o n�vel de atividade f�sica da mesma (se � sedent�ria ou atleta, por exemplo).

Começaremos com o layout da tela, que foi definido no arquivo activity_taxa_metabolica.xml. Nele devemos inserir os campos que receber�o as informaç�es para o c�lculo da taxa metab�lica basal, conforme o feito na Listagem 1. � importante citar que para o exemplo foi utilizado o padr�o de interfaces do Android (os componentes do pacote android.view).

Listagem 1. Campos para a tela de c�lculo da taxa metab�lica


  001. <?xml version="1.0" encoding="utf-8"?>
  002. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  003.   xmlns:tools="http://schemas.android.com/tools"
  004.   android:layout_width="match_parent"
  005.   android:layout_height="match_parent"
  006.   android:paddingBottom="@dimen/activity_vertical_margin"
  007.   android:paddingLeft="@dimen/activity_horizontal_margin"
  008.   android:paddingRight="@dimen/activity_horizontal_margin"
  009.   android:paddingTop="@dimen/activity_vertical_margin"
  010.   tools:context="br.com.manfredi.android.graficoscomgooglecharts.TaxaMetabolicaActivity">
  011. 
  012.   <TextView
  013.     android:id="@+id/tv_sexo"
  014.     android:layout_width="wrap_content"
  015.     android:layout_height="wrap_content"
  016.     android:layout_alignParentLeft="true"
  017.     android:layout_alignParentStart="true"
  018.     android:layout_alignParentTop="true"
  019.     android:text="@string/tv_sexo"
  020.     android:textAppearance="?android:attr/textAppearanceMedium" />
  021. 
  022.   <RadioGroup
  023.     android:id="@+id/group_sexo"
  024.     android:layout_width="match_parent"
  025.     android:layout_height="wrap_content"
  026.     android:layout_alignParentLeft="true"
  027.     android:layout_alignParentStart="true"
  028.     android:layout_below="@+id/tv_sexo"
  029.     android:gravity="center"
  030.     android:orientation="horizontal">
  031. 
  032.     <RadioButton
  033.       android:id="@+id/rb_feminino"
  034.       android:layout_width="wrap_content"
  035.       android:layout_height="wrap_content"
  036.       android:layout_marginRight="10dp"
  037.       android:checked="true"
  038.       android:text="@string/rb_feminino" />
  039. 
  040.     <RadioButton
  041.       android:id="@+id/rb_masculino"
  042.       android:layout_width="wrap_content"
  043.       android:layout_height="wrap_content"
  044.       android:layout_marginLeft="10dp"
  045.       android:checked="false"
  046.       android:text="@string/rb_masculino" />
  047. 
  048.   </RadioGroup>
  049. 
  050.   <TextView
  051.     android:id="@+id/tv_idade"
  052.     android:layout_width="wrap_content"
  053.     android:layout_height="wrap_content"
  054.     android:layout_alignParentLeft="true"
  055.     android:layout_alignParentStart="true"
  056.     android:layout_below="@+id/group_sexo"
  057.     android:text="@string/tv_idade"
  058.     android:textAppearance="?android:attr/textAppearanceMedium" />
  059. 
  060.   <EditText
  061.     android:id="@+id/et_idade"
  062.     android:layout_width="match_parent"
  063.     android:layout_height="wrap_content"
  064.     android:layout_alignParentLeft="true"
  065.     android:layout_alignParentStart="true"
  066.     android:layout_below="@+id/tv_idade"
  067.     android:ems="10"
  068.     android:hint="@string/et_idade"
  069.     android:inputType="numberSigned" />
  070.
  071.   <!-- trecho omitido -->
  072. 
  073.   <TextView
  074.     android:id="@+id/tv_nivel_atividade"
  075.     android:layout_width="wrap_content"
  076.     android:layout_height="wrap_content"
  077.     android:layout_alignParentLeft="true"
  078.     android:layout_alignParentStart="true"
  079.     android:layout_below="@+id/et_altura"
  080.     android:text="@string/tv_nivel_atividae_fisica"
  081.     android:textAppearance="?android:attr/textAppearanceMedium" />
  082. 
  083.   <Spinner
  084.     android:id="@+id/spinner_atividade_fisica"
  085.     android:layout_width="match_parent"
  086.     android:layout_height="wrap_content"
  087.     android:layout_alignParentLeft="true"
  088.     android:layout_alignParentStart="true"
  089.     android:layout_below="@+id/tv_nivel_atividade" />
  090. 
  091.   <Button
  092.     android:id="@+id/btn_informar_calorias"
  093.     android:layout_width="match_parent"
  094.     android:layout_height="wrap_content"
  095.     android:layout_alignParentLeft="true"
  096.     android:layout_alignParentStart="true"
  097.     android:layout_below="@+id/spinner_atividade_fisica"
  098.     android:onClick="btnCaloriasOnClick"
  099.     android:text="@string/btn_informar_calorias"
  100.     android:textAllCaps="false" />
  101. 
  102. </RelativeLayout>
"

[...] continue lendo...

Google Chart API: Criando apps com gr�ficos para o Android

Este artigo apresenta um estudo de caso de utilização da Google Chart API em aplicativos Android. O estudo dessa API é útil porque ela disponibiliza uma série de gráficos que podem ser facilmente incorporados em nossas aplicações.

Artigos relacionados