Meu primeiro app Android

Neste momento é a hora de conhecer a estrutura (código e designer) e como um app Android funciona.

primeiro projeto android studio

Meu primeiro App Android

Depois de instalado o Android Studio e criado seu primeiro Projeto, o seu primeiro aplicativo (Hello Word!) estará criado automaticamente.

activity android

Embora o app seja simplório, possuindo uma tela com a frase “Hello Word!”, ele já carrega todos os atributos de um aplicativo. Você poderá simular no emulador do Android, se configurado, além no seu smartphone real.

Então vamos analisar a estrutura do seu primeiro app. Quando você acessa o app é exibida uma tela, geralmente lhe dando as boas vindas. No nosso exemplo, uma tela com a frase “Hello Word!”. Essa tela como as outras que aparecerem é chamado tecnicamente de “Activity”. Em tradução livre “Atividade”.

Em outras palavras é uma interface onde você executa ações, que também pode ser chamadas de atividades. É nela que recebe todos os elementos como botões, textos, imagens, widgets, etc., na qual você interage com o app.

Estrutura de uma activity.

Quando você abre um App, dá de cara com uma tela. Geralmente através de um menu ou botões você navega através de outras telas que vão se abrindo e empilhadas uma sobre as outras em segundo plano. Cada tela destas é uma activity. Em tradução livre “atividade”. Em outras palavras é uma interface onde você executa ações, que podem ser chamadas também de atividades.

Então activity pode ser chamada de tela, ou uma screen. É nela que recebe todos os elementos como botões, textos, imagens,etc. na qual você interage com o app.

Activity é o principal item de um app Android. Ele é formado por duas partes que, pode se dizer, ficam em camadas. Estas duas camadas você já teve contato. A primeira é a Main_Activity.java, como o nome já diz, a Activity Principal. Ela representa a codificação Java que faz a mágica de seu app funcionar. Por enquanto não se preocupe com eles. A medida que for avançando em seus estudos você compreenderá melhor o que eles fazem.

Abaixo reproduzimos o código Main_Activity.java do App “Appex”.


package com.example.mynameapp;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
   }
}

O importante no começo é saber que o Android Studio funciona como se fosse uma montadora de automóveis. A maioria das peças que compõe um automóvel são adquiridas de fornecedores externos, como os faróis, bancos, pneus, pastilhas de freio, embreagem, acessórios e outros. Quando montadas, formam uma unidade, um novo automóvel.

Assim também é que o arquivo Main_Activity.java, por exemplo, é montado. Importando (import) e estendendo (extends) recursos de outros arquivos, previamente instalados junto com o Android Studio.

A medida que você for avançando em seus estudos, irá se familiarizando com estes códigos e compreender como eles funcionam.

Conhecendo o arquivo activity_main.xml.

Acima da camada Main_Activity.java e interligado a esta, surge a activity_main.xml. Esta é responsável por configurar a aparência da activity. Esta parte também pode ser dividida em duas. A parte gráfica, isto é, o designer e a codificação em xml que torna todos os itens da activity visíveis.

O que é XML?

Neste momento você pode estar se perguntando o que é XML. XML é uma linguagem de marcação usada para definir padrões e formatos de exibição dentro de um documento. Em resumo, funcionam para definir como um determinado conteúdo vai ser visualizado na tela ou como os dados serão distribuídos. Essa codificação é feita pelo uso de marcadores ou tags.

Se você já teve contato com HTML, então você já tem noção o que é uma linguagem de marcação w já sabe o que é uma tag.

No quadro abaixo reproduzimos o código activity_main.xml que foi criado automaticamente quando criamos o aplicativo. Sem perceber, todos estes códigos foram escritos, quando criamos uma tela apenas utilizando os recursos de arrastar e soltar os componentes na 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:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Hello World!"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Hello Word

A linha 1 é uma tag de abertura especial indicando o uso da linguagem XML. Neste caso ela se inicia e se encerra na mesma linha, através dos caracteres ‘<' e '>‘. Portanto toda a tag e aberta pelo caractere ‘<' e fechada pelo caractere '>‘.

Dentro desta tag XML incluem alguns atributos ou propriedades. A primeira é a versão e a outra (encoding =”utf-8”) configura para que o app entenda os caracteres especiais da língua portuguesa. Isto permite, por exemplo, que não haja erro ao utilizar acentuação nos textos aplicados no seu app.

Linha 2 abre a configuração da tag do elemento ContraintLayout. Esta tag se estende até a linha 8 onde ocorre seu fechamento. Nestas linhas são incluídos diversos atributos que configura a ContraintLayout funcione corretamente.

Nas linhas 6 e 7, por exemplo, tratam da largura do layout (layout_width) e altura do layout (layout_height) do componente ContraintLayout deve ocupar na tela do celular. O atributo “match_parent” indica que deve ser na sua totalidade, isto é, 100% na largura e altura da tela respectivamente.

Na linha 8 (tools:context=”.MainActivity”) é usado em arquivo xml que indica qual arquivo de origem java é usado para acessar este arquivo xml. significa mostrar esta visualização xml para arquivos Java, neste exemplo: .MainActivity. No código acima, a necessidade básica de “tools: contexto” é dizer a qual activity o arquivo de layout está associado por padrão.

As linhas 10 a 17 o componente TextView (Texto) é configurado:

Linha 10 identifica onde a tag denominada TextView é aberta. Das linhas subsequentes, isto é, da linha 11 à 17 carregam os atributos da tag TextView.

Linhas 11 e 12 indicam que a largura (layout_width) e altura (layout_height) do componente (TextVew) devem ser o suficiente para abrigar o seu conteúdo obedecendo o atributo (wrap_content).

A linha 13 o atributo “android:Text” indica o que vai ser escrito no componente TextView. Neste caso “Hello Word!”;

Das linhas 14 a 17 ancoram o componente TextView nos pontos do layout indicados: A parte inferior do componente seja ancorada a parte inferior do layout, É o que significa (Layout_constraintBottom_toBottomOf). Por analogia a linha 15 o lado esquerdo, a linha 16 o lado direito e a linha 17 o lado de cima. Desta forma o componente fica centralizado, não importando a posição do smartphone, seja retrato ou paisagem.

Finalmente a linha 19 fecha a tag ContraintLayout.

As imagens abaixo demonstram onde e como acessar o código activity_main.xml tanto no modo code, como design assim como os dois simultaneamente.

Observe que você pode modificar os atributos de uma tag diretamente no código, como até mesmo inserir um elemento na tela apenas escrevendo o código.

Experimente acessar o código activity_main.xml e o modo design clicando em Split que divide a tela com os dois modos.

Modifique o atributo text para “Alô Mundo!” e veja que no modo design o texto “Hello Word!” e modificado. Da mesma forma acontece se modificar diretamente no lado design. Edite para “Hello Word!” e veja o resultado.

Identifique o elemento “button” e arraste para a tela. Observe que no lado do código uma tag “button” surge automaticamente. Se você inserir este código manualmente, teria o mesmo resultado.

Saiba Mais…