Criando uma Calculadora - Parte 1

Continuando nossa série de tutorial Android, vamos aprender a criar nosso primeiro aplicativo no Android Studio. Criaremos uma calculadora com funções aritméticas simples.

Se você ainda não viu nosso ultimo tutorial, onde nós explicamos basicamente como criar o projeto, clique aqui.

Primeiramente abra o AndroidManifest.xml que está dentro da pasta manifests, e nele se você criou o projeto com o nome Tutorial como ensinamos  no post passado, você pode ou trocar o nome  do label apenas da activity, ou do app em geral. Se for apenas da activity, você deve colocar um android:label="Calculadora" dentro do da <activity android:name=".MainActivity". Já se você planeja mudar de todo o app, você pode alterar a área android:label"@string/app_name" para "Calculadora", ou obedeça as boas práticas de programação, abra o value/string e no campo app_name altere o "Tutorial" para "Calculadora".

Agora podemos adicionar uma logo do nosso app para ser visualizada no launcher de um dispositivo. Para isso, na área de suas pastas, clique com o botão direito, vá em New - Imagem Asset.

Escolha a sua logo e personalize como quiser, nós fizemos um modelo de logo que você pode utilizar [LOGO], e arredondamos as bordas, e para isso foi necessário colocar o background de cor #3B3838.

Depois de confirmar a sua logo, ainda no AndroidManifest.xml, troque o android:icon="@mipmap/ic_launcher" para "@mipmap/nomequevocesalvou" para as mudanças sofrerem efeito.

Agora dentro da pasta res/layout abra o layout activity_main.xml e adicione um TextView na área de Design para ser a tela de impressão de resultado. Entre no modo Texto, adicione este código:

<TextView
        android:layout_width="wrap_content"     O TextView se adaptará a tela
        android:layout_height="50pt"                     O TextView tem 50pt de altura
        android:background="#b7b7b7"                 Cor do fundo
        android:textSize="100dp"                             Tamanho do Texto
        android:textStyle="bold"                               Estilo do Texto Bold
        android:textAlignment="viewEnd"             O texto aparecerá do canto direito
        android:layout_alignParentRight="true"    Alinhar o TextView
        android:layout_alignParentEnd="true"       Alinhar o TextView
        android:layout_alignParentLeft="true"       Alinhar o TextView
        android:layout_alignParentStart="true"     Alinhar o TextView
        android:id="@+id/RESULTSCREEN"/>        Nome de Indentificação

(Retire os comentários)

Agora temos que configurar os botões, e para isso você só precisará adicionar um Button, e na parte de Texto configura-lo da seguinte maneira:

<Button
        android:layout_width="wrap_content"       O Button se adaptará a tela
        android:layout_height="40pt"                     O Button tem 50pt de altura
        android:text="7"                                      O Texto exibido no Button será o numero 7
        android:textSize="40dp"                             Tamanho do Texto
        android:id="@+id/button7"                         Nome de Indentificação
        android:layout_marginTop="15dp"             Criar margem
        android:layout_below="@+id/RESULTSCREEN"   Alinhar o Button
        android:layout_alignParentLeft="true"      Alinhar o Button
        android:layout_alignParentStart="true"    Alinhar o Button
        android:clickable="true" />                         O Botão é clicável

(Retire os comentários)

Tendo um botão configurado, você só precisará copiar e colar os outros, e reorganizar-los, recomendo utilizar ao invés do campo Texto, o campo Design onde você terá mais controle.

Com isso o nosso arquivo de layout está pronto,

Importante: Se você configurar um app pelo preview de um virtual dispositivo, notará que se você mudar este dispositivo, alguns itens podem perder sua organização. Isto é consequente do RelativeLayout que estamos utilizado no main_activity.xml. Explicaremos em tutoriais futuros todos os tipos de Layouts e as vantagens de cada um. 

Agora precisamos fazer com que todos os elementos do layout sejam reconhecidos pelo código, e para isso abriremos o MainActivity.class que está na primeira pasta dentro de java. Abrindo o documento você verá o onCreate, é a primeira função a ser executada em uma Activity, e nela podemos setar variáveis, layouts, etc.

Então em onCreate iremos lincar todos os nosso elementos ao código, para isso iremos criar uma variavel do tipo TextView e ela receberá o View pelo ID que setamos no layout.

      TextView RESULTSCREEN = (TextView) findViewById(R.id.RESULTSCREEN);

Será a mesma coisa para os buttons:

      Button ButtonSoma = (Button) findViewById(R.id.buttonsoma);

Ao final, o onCreate terá os seguintes elementos:

Agora para testar o seu app, você deve criar um Emulador, para isso clique em Run, e na janela que abrir, clique em Create New Emulator, escolha o modelo do seu Android e a versão do sistema. Quando criar o Emulador, é só clicar em Run e escolher o que vc criou, que o programa vai começar a compilar o programa e instalar um apk no emulador.

Disponibilizamos o projeto do aplicativo até agora pelo GitHub, para que vocês possam fazer Download/Clone do repositório. Quando fizermos a parte 2 do tutorial, divulgaremos o projeto completo. Link do GitHub: http://github.com/MNascimentoS/App-Calculadora