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

Criando uma calculadora IMC Android

Neste capítulo você verá como inserir alguns componentes na interface de um aplicativo e produzir ações através de codificação Java.

calculadora android imc

Criando uma calculadora IMC Android

No capítulo anterior, Meu primeiro Aplicativo Android, criamos um app simples onde é exibida uma frase no centro da tela, a famosa “Hello Word!”. Ainda aprendemos um pouco como as regras de restrições funcionam no elemento ConstraintLayout.

Em cima deste app, vamos criar a Calculadora de IMC. Será necessário abrir este projeto no Android Studio para efetuarmos as edições e assim criar o aplicativo.

modelo-basico-app

Esta calculadora será simples, isto é, ela irá fornecer apenas três medidas que não é suficiente para que nos ajudem a montar ações de saúde, no entanto será o suficiente para iniciarmos a aprendizagem de como criar e montar uma interface de um app.

Ao concluir este capítulo, você terá adquirido conhecimento suficiente para construir uma calculadora completa. Se esta for a sua vontade, acesse a página “IMC: aprenda a calcular e veja a tabela” e saiba o que é IMC, os cálculos e como usar os resultados para melhorar a saúde.

Configurando a interface da Calculadora

Com o projeto appex aberto, acesse a interface em modo design;

Selecione componente textView (referente ao texto “Hello Word!”) e exclua pressionando o botão delete;

Acesse os componentes em palette logo a esquerda da área de visualização da tela do app;

Selecione em Common o componente textView e arraste para a tela do app, centralizando na parte superior horizontal. Para facilitar seu trabalho são exibidas linhas guias na horizontal e vertical as quais indicam quando o componente está alinhado na horizontal e na vertical;

Ainda com o componente textView selecionado, clique no botão Infer Contraints. Serão exibidas graficamente as contraints criadas. Isto irá garantir que o componente textView fique centralizado independente da posição da tela ou tipo de dispositivo.

Com componente posicionado e selecionado, observe na área imediatamente a direita referente aos atributos (Attributes). Nesta área você poderá configurar todas as características do componente selecionado;

Em Common Attribute selecione o atributo text e mude a inscrição textView para Calculadora IMC. Observe que ao clicar enter o texto no componente é alterado;

Localize o atributo textSize e altere seu valor para 24p. Isto altera o tamanho da fonte e a deixa um pouco maior.

Agora vamos alterar o atributo textStyle. Localize e clique na seta para expandir os estilos de fonte disponíveis. Clique em bold para habilitar o estilo negrito.

configurando interface calculadora android imc

Corrigindo erros (warnings and erros).

À medida que criamos um app e inserimos componentes na tela, podem ser exibidos no canto superior direito acima da tela de visualização, ícones de avisos e erros. Isto acontece quando inserimos o título “Calculadora IMC”, onde aparece um símbolo (triangulo amarelo como ponto de exclamação).

warnings and erros

Embora este tipo de aviso ou erro, não signifique que seu app não irá funcionar é algo que a IDE aconselha que seja verificado, para que o padrão de app seja o mais elevado possível.

Ao clicar no ícone, ele irá exibir os avisos e erros na parte inferior da tela. Neste caso o id do erro é “Hardcoded Text” ou na Codificação do Texto. Um dos problemas que a IDE sugere é que seu app, desta forma, não poderá ser traduzido corretamente para outros idiomas.

Uma sugestão seria utilizar o recurso @string, porque codificar um texto diretamente no layout , como fizemos, não é uma boa prática. Assim seria interessante colocar o texto dentro dos arquivos string.xml. Estes arquivos estão na aba à esquerda (Resouser Mananager) > app > res > values > strings.xml. Bem no final das informações sobre essa falha, existe uma sugestão de correção. Quando clicamos em “FIX” (consertar ou corrigir), é exibida uma caixa de mensagem com algumas informações.

  • Resource Name : calculadora_imc;
  • Resource value: Calculadora IMC;
  • Source set: main;
  • File name: strings.xml.

Ao clicar OK, será criado recursos específicos na pasta strings.xml que irá fazer o aviso desaparecer.

Observe também lá nos atributos em text, mudou para @string/calculadora_imc, que significa o nome da string criada em strings.xml. Isto cria várias possibilidades.

Por exemplo, se você for usar o título ”Calculadora IMC” em várias partes do seu app, ao invés de escrever o título propriamente dito no campo text, deverá utilizar @string/calculadora_imc. Isto possibilita que caso você queira mudar o título para “Calculadora de Massa Corporal” basta alterar lá em strings.xml e o título será modificado em todos os lugares em que ela for configurada. Por isso uma das vantagens de se adotar estes procedimentos é facilidade de manutenções futuras em seu app.

warnings-page

Inserindo mais elementos na interface.

Depois de inserir o título do app (Calculadora IMC), vamos inserir os campos principais altura e peso, que iram gerar o resultado do cálculo do IMC.

Primeiro vamos inserir um novo campo tipo textView, logo abaixo do título na margem esquerda. Ao inserir, você percebe os ícones de avisos e erros (aqueles que citamos no bloco anterior – corrigindo “warnings and erros”).

São exibidos dois erros. O primeiro é sobre a falta de Constraints.

Quando você insere um componente em uma posição na tela, você a visualiza em tempo de design. O editor de layout permite que você coloque componentes em qualquer lugar na tela e grava a posição atual com atributos de tempo de design, exatamente onde você os coloca. Mas esses atributos não são aplicados em tempo de execução, portanto, se você executar o seu app, os componentes podem aparecer em um local diferente do mostrado no editor, neste caso irá pular para posição (0,0). Agora aquelas lições de matemática podem fazer falta. Aquelas em que temos as coordenadas X e Y. Então a posição (0,0) corresponde as (X,Y).

Para corrigir isso, certifique-se de que o componente tenha restrições horizontais e verticais, ou sendo mais técnico contraints.

Com o campo inserido selecionado, clique no botão Infer Constraint para inserir regras. Observe que aparecem alguns gráficos com números indicando as margens que foram aplicadas no campo em relação ao topo “margin-top” e a margem esquerda “margin-left”.

Veja na aba atributes (atributos) à direita da visualização da tela do app, em Declared Attributes (Atributos declarados), as margens aplicadas também são apresentadas em “layout_marginLeft” e “Layout_marginTop”, além disto a mensagem de erro quanto à constraints, desapareceu

As mesmas informações das margens estão apresentadas no gráfico na parte “Layout” imediatamente abaixo (Constraints Widget). São aqueles números dentro de caixinhas na parte de cima e a esquerda do quadro maior.

Tanto em um ou em outro onde são apresentadas as margens, você pode alterar os parâmetros. Altere os dados e observe as mudanças no layout da tela do app. Desta forma você pode fazer ajustes finos na posição dos componentes.

Outro falha apresentada é a respeito do “Hardcoded Text” relativo ao último componente textView inserido. Este erro você já aprendeu como corrigi-lo. Mude o atributo “text” para “altura” e em seguida acesse o erro através do ícone, expanda o texto e procure o botão FIX. Ao clicar nele você irá corrigir a falha além de incluir automaticamente o recurso @string.

Agora vamos inserir o componente de texto editável textPlan que permite que o usuário entre com valores de altura.

Clique na guia do palette dos componentes text e selecione textPlan. Arraste e solte o componente abaixo do textView Altura. Lembre-se que ao efetuar esta operação, guias são exibidas como ajuda no posicionamento do componente.

inserindo campos calculadora android imc

Configurando componente textPlan – campo editável.

Ao inserir o campo textPlan são exibidos quatro mensagens de erro. Você pode exibi-las clicando no ícone de “show warning and erros”.

Missing contraing in ContraintLayout;

A primeira “Missing contraing in ContraintLayout;” você já sabe como corrigir. Insira regras de restrições através do botão “Infer Constraints”. Desta vez linhas aparecem indicando que o campo textPlan foi associado ao textView altura em relação às constraints. Agora ao executar o campo será exibido exatamente onde foi configurado.

Autofill;

A segunda sugestão é usar o recurso de preenchimento automático (autofill).

Preencher formulários é uma tarefa demorada e propensa a erros. Os usuários podem se frustrar facilmente com apps que exigem ações como essa. A estrutura de preenchimento automático melhora a experiência do usuário fornecendo alguns benefícios.

Como este recurso não fará tanta diferença neste caso, iremos configurá-lo o atributo autofill como “no”, isto é, como não. Para isto, expanda a mensagem de erro autofill e clique no botão FIX (Ser importantForAutofill = “no”).

Missing accessibility label;

“Missing accessibility label” se refere a falta do atributo “hint” ou “dica”. Uma dica em um campo editável ajuda o usuário com qual dado ele irá digitar. Neste caso insira no atributo “hint” a seguinte frase “Digite a sua altura”. Apague o texto “Name” do atributo “text”. Pronto! O erro será eliminado e a frase irá aparecer no campo e estará lá até que o usuário entre com algum dado.

Hardcoded Text;

Por fim está o Hardcoded Text, que você já está craque em resolver. Saiba que caso não queira fazer nada quanto a isto, não influenciara o funcionamento do seu app. No entanto ao corrigi-lo, será inserida uma linha no arquivo com uma string com nome “digite_a_sua_altura e o valor de hint irá mudar para @string/digite_a_sua_altura.

Inserindo restrições de layout manualmente.

Uma constraintLayout oferece uma série de recursos para inserir restrições de layout em um elemento como você aprendeu. Mas você pode inserir estas regras manualmente. Observe que nas laterais do elemento existem pequenos círculos. Eles representam os pontos onde você pode inserir uma constraint.

No exemplo abaixo demonstramos como inserimos uma constraint na lateral direita do componente txtAltura.

Ao clicar e arrastar para lateral direita, observe que surge uma linha em forma de mola. E é como uma mola que ela atua sobre o componente, esticando de lado e do outro o centralizando.

contraint-manual

Ao clicar e arrastar para lateral direita, observe que surge uma linha na caixa constraint widget. Clicando na linhas no centro, você pode expandir o componente ocupe todo a área horizontal.

Observe que o componente encosta totalmente na margem direita da visualização da tela. Mas você pode controlar a distância desta margem escolhendo ou digitando na caixa especifica. Neste exemplo fixamos em 15sp.

Configurando ID e o Tipo de Dados.

Existem dois atributos muitos importantes devem ser configurados. Um deles é o “id”.

ID é a sigla para identity, palavra inglesa que significa “identidade” na tradução literal para a língua portuguesa. No apps Androids ele serve para identificar um elemento como único, como se fosse seu CPF, que é único para cada cidadão brasileiro. Não existem duas pessoas com o mesmo CPF, viva ou morta.

O id será importante quando formos inserir a programação que irá produzir as ações, neste caso o calculo do IMC. Isto possibilitará que o app saiba quais os campos e como eles irão atuar nas operações efetuadas.

Toda vez que é criado um campo, um id é automaticamente criado. No caso do textPlain altura foi criado o id editTextTextPersonName. Troque o valor do atributo id para txtAtura.

O segundo é o inputType que indica o tipo de dados que será inserido no campo. Neste caso será um número decimal, neste caso o atributo será numberDecimal. Desta forma, quando o usuário for digitar os dados, este campo estará preparado para receber um número decimal, além disto, um teclado numérico será exibido, ao invés de um teclado virtual alfanumérico.

Inserindo o segundo campo peso.

Logo abaixo o campo altura, iremos configurar o campo “peso” o qual o usuário digitará o seu peso. Ele também terá um campo textView que será como um rótulo Peso. Siga as mesmas instruções utilizadas no campo altura para configurar o campo peso. A tela até este momento terá a aparência como demonstrado abaixo.

inserindo campo peso

Lembrando que o campo com id txtPeso é o do tipo textPlan e terá como dica como atributo hintDigite o seu Peso”.

Finalizando o layout da calculadora IMC

Agora vamos finalizar o layout da calculadora IMC inserindo os dois últimos componentes.

O penúltimo é um botão. Selecione no palette o item Buttons e em seguida arraste o componente Button para baixa do txtPeso. Clique em InferConstrains para inserir as restrições de layout. Dentro das caixas de margens do quadro Constraint Widget, regule as margens esquerda e direita para 15sp. Mude o atributo text para “Calcular IMC”. Corrija os erros de strings caso tenha, como você já aprendeu a fazer.

Finalmente arraste para baixo do botão calcular_imc o componente txtView com o atributo textResultado calculo IMC”. Insira a regras de layout e regule as margens para 15sp à esquerda e direita. Por último localize e altere o atributo padding para 10sp.

final-layout-imc

O código activit_main.xml que formata o tela do app Calculadora IMC será semelhante ao exibido abaixo. Você poderá acessá-lo clicando em no ícone Code ou em Split que monstrará tanto código como a tela.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"/>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/calculadora_imc"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="70dp"
        android:text="@string/altura"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/txtAltura"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="6dp"
        android:layout_marginEnd="15dp"
        android:layout_marginRight="15dp"
        android:ems="10"
        android:hint="@string/digite_a_sua_altura"
        android:importantForAutofill="no"
        android:inputType="numberDecimal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="1dp"
        android:layout_marginLeft="1dp"
        android:layout_marginTop="6dp"
        android:text="@string/labelPeso"
        app:layout_constraintStart_toStartOf="@+id/txtAltura"
        app:layout_constraintTop_toBottomOf="@+id/txtAltura" />

  <EditText
        android:id="@+id/txtPeso"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="6dp"
        android:layout_marginEnd="15dp"
        android:layout_marginRight="15dp"
        android:ems="10"
        android:hint="@string/digite_o_seu_peso"
        android:importantForAutofill="no"
        android:inputType="number"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/textView2"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="11dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:onClick="btnCalcularOnClick"
        android:text="@string/calcular_imc"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txtPeso" />

    <TextView
        android:id="@+id/lblResultado"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="15dp"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="15dp"
        android:layout_marginEnd="15dp"
        android:layout_marginRight="15dp"
        android:padding="10sp"
        android:text="@string/resultado_calculo_imc"
        android:textSize="18sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button" />

</androidx.constraintlayout.widget.ConstraintLayout>

Inserindo código Cálculo IMC.

Chegou a hora da diversão. Vamos inserir o código que vai calcular o IMC quando o usuário entrar com os dados e clicar no botão Calcular IMC.

Mas antes temos de entrar com um atributo importante no Botão Calcular IMC que acessará um método quando o botão for acionado. Para isto procure nos atributos do botão por onClick e insira btnCalcularOnClick.

Agora temos que criar este método. Acesse a guia MainActivity.java. Lá você já vai encontrar um código já pronto com algumas linhas.

Observe que depois da abertura do método onCreate “protected void onCreate(Bundle savedInstanceState)”, Logo em seguida existe uma chave que abre e linhas abaixo, uma fechando. Tudo que está entre as chaves, faz parte de método onCreate.

O que vamos fazer agora é criar o nosso próprio método que será referente aquele que inserimos no Botão btnCalcularIMC no atributo onClick: btnCalcularOnClick.

Para isto vamos começar a escrever o código logo abaixo da chave que fecha o método onCreate. Assim vamos o método através da instrução public void com o nome btnCalcularOnClick o qual trabalha através dos parâmetros View v.

public void btnCalcularOnClick(View v) {

}

Tudo que estiver entre os parênteses fará parte deste método.

Então primeiro vamos criar três varáveis através das seguintes instruções:

public void btnCalcularOnClick(View v) {
     TextView lblResultado = (TextView)findViewById(R.id.lblResultado);
     EditText txtPeso = (EditText) findViewById(R.id.txtPeso);
     EditText txtAltura = (EditText) findViewById(R.id.txtAltura);
}

A primeira varável é do tipo TextView com o nome lblResultado (linha 2) que recebe o valor que estiver escrito dentro daquele componente TextView que criamos com o atributo id lblResultado através do método findViewById.

Se você ler tudo que está depois do sinal de igual você percebe a estrutura da codificação. Entre parênteses está o tipo do componente (TextView). Depois vem o método utilizado findViewById que pega o valor (R) Referência do componente com o id lblResultado.

Analogamente criamos mais duas varáveis do tipo EditText com os nomes txtAltura e txtPeso (linhas 3 e 4) que recebem os valores inseridos respectivamente nos componentes txtAltura e txtPeso também utilizando o método findViewById e os seus ids.

Apesar de varáveis e componentes terem os mesmos nomes, a codificação Java os enxergam de modo diferente. Você poderia usar nomes diferenciados, mas vai perceber com o tempo, que dificilmente irá confundir um com outro, mantendo um padrão conhecido.

Agora temos de pegar aqueles valores que capturamos nas variáveis txtAltura e txtPeso e transformá-los em valores matemáticos que seja possível fazer as operações de cálculo de IMC.

Para isto vamos criar outras variáveis para receber estes parâmetros.

Uma para a altura tipo float: float altura = Float.parseFloat(txtAltura.getText().toString()); Em outras palavras criamos em variável altura tipo float que recebe o valor que pegamos (.getText()) como uma string (.toString()) do componente txtAltura e transformamos em um número tipo float através da instrução Float.pardeFloat.

Outra para o peso tipo int:int peso = Integer.parseInt(txtPeso.getText().toString()); Da mesma forma criamos em variável peso tipo int (número inteiro) que recebe o valor que pegamos (.getText()) como uma string (.toString()) do componente txtPeso e transformamos em um número tipo int através da instrução Integer.parseInt.

Agora vamos aos finalmente.

/* Primeiro vamos calcular o IMC que será configurado na variável
Resultado que é do tipo float */

float resultado = peso / (altura * altura);

/* A variável resultado é um índice que será tratado 
nas próximas linhas, que é autoexplicativo. */

if(resultado < 19){
    //abaixo do pesso
    lblResultado.setText(“Seu IMC é: “+ resultado + " Você está abaixo do peso!");
    }
    else if(resultado > 32){
    //obeso
    lblResultado.setText("Seu IMC é: "+ resultado +". Você está acima do peso!");
    }
    else{
    //Peso Ok
    lblResultado.setText("Seu IMC é: "+ resultado +". Seu peso está ok!");
}

Traduzindo, se você não entendeu:

Se (if) o resultado for menor que 19, então o valor que vai ser escrito como texto (setText) no componente lblResultado vai ser “Seu IMC é: resultado. Você está baixo do peso!“.

Se (if) o resultado for maior que 32, então o valor que vai ser escrito como texto (setText) no componente lblResultado vai ser “Seu IMC é: resultado. Você está acima do peso!“.

E se (if) o resultado for diferente das duas situações anteriores, então o valor que vai ser escrito como texto (setText) no componente lblResultado vai ser “Seu IMC é: resultado. Seu peso está Ok!“.

Por fim lembre-se das chaves de fechamento. Do método que criamos e do classe que já existente.

O código MainActivity.java será semenhante ao exibido abaixo.


package com.example.calculadora_imc;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void btnCalcularOnClick(View view) {
        TextView lblResultado = (TextView)findViewById(R.id.lblResultado);
        EditText txtPeso = (EditText) findViewById(R.id.txtPeso);
        EditText txtAltura = (EditText) findViewById(R.id.txtAltura);

        int peso = Integer.parseInt(txtPeso.getText().toString());
        float altura = Float.parseFloat(txtAltura.getText().toString());

        float resultado = peso / (altura * altura);

        if(resultado &lt; 19){
        //abaixo do pesso
        lblResultado.setText(“Seu IMC é: “+ resultado + &quot; Você está abaixo do peso!&quot;);
        }
        else if(resultado &gt; 32){
        //obeso
        lblResultado.setText(&quot;Seu IMC é: &quot;+ resultado +&quot;. Você está acima do peso!&quot;);
        }
        else{
        //Peso Ok
        lblResultado.setText(&quot;Seu IMC é: &quot;+ resultado +&quot;. Seu peso está ok!&quot;);
        }
    }
}

Criado o código, basta dar uma olhada geral para ver se não esquecemos nada e não há erros que possam impedir o funcionamento do app.

Tudo certo. Execute o app, insira o sua altura e peso e clique no Botão Calcular IMC e veja o resultado.

Se tudo deu certo e o resultado foi exibido no local correto, mas seu peso estiver fora do padrão de uma boa saúde, então leia Como Calcular o IMC e se cuide.

Mas se tudo estiver certo, parabéns! Você está no caminho certo. Nos vemos no próximo capítulo.

Saiba Mais…

  • Componente textView;
  • Interface Android Studio;
    • Aba Attributes (Atributos);
    • Aba Palette (Componentes Android);
  • ContraintLayout
  • Margin e Padding;
  • Tipo Float e Int (integer).
  • Programação Java