Pesquise algo no blog

segunda-feira, 20 de abril de 2015

Curso Android Aula 06 - TextView


Introdução


Esta aula é a sexta aula do curso, porém é a primeira aula de uma série destinada ao estudo dos componentes Widget do Android. Nesta aula nosso foco será o Widget TextView

Com o exemplo que será criado e com as explicações para manipular propriedades de um TextView, você será capaz rapidamente de aplicar os mesmos conceitos em outros Widget. 

A documentação oficial contém maiores detalhes sobre o TextView.

Objetivo


O objetivo desta aula, é usar o TexView em um formulário XML de Layout, atribuir valores para propriedades tais como tamanho do texto, cor do texto, tipo padrão de dados para entrada de informações, como e-mail, telefone, nome, etc.

Ao final desta aula você será capaz de criar um formulário utilizando o Widget TextView e entenderá o processo para trabalhar com os seus parametros.

Especificamente nesta aula, estarei executando passo-a-passo todo o procedimento para criar um projeto com o Android Studio. Nas próximas aula, estes passos não serão mais abordados.

Criando o projeto exemplo utilizando o Android Studio

O Android Studio agora é a IDE oficial para o desenvolvimento Android. O suporte ao ADT Eclipse está sendo descontinuado. Portanto, é altamente recomendável que você passe a utilizar o Android Studio. 

Passo 01 - Criar o projeto

Com o Android Studio carregado, seleciona a opção Start a new Android Studio project.



Passo 02 - Dar nome ao projeto

Informe o nome da Aplicação, que para esta aula será CursoAndroidAula05. Em seguida, informe o nome do domínio que para este projeto será foo.maddo. É importante você saber que em projeto reais, o nome do domínio é significativo e deve ser informado corretamente conforme o projeto. Não é possível publicar na Loja Google Play, em uma mesma conta de desenvolvedor, mais de um projeto com o mesmo nome de domínio.

A pasta para o projeto, ou Project Location, informe a que você utiliza normalmente e cliente em Next.


Passo 03 - Selecionar a API do projeto

Agora devemos selecionar a versão da API que será suportada pelo projeto que estamos criando. A escolha do SDK mínino, irá refletir no conjunto de devices compatíveis com seu projeto. Note que se selecionar o SDK para a API 9, teremos conforme o exemplo na data da criação desta aula, aproximadamente compatibilidade com 99.5% de celulares Android em todo o planeta. Selecionado a API clique em Next.


Passo 04 - Selecionar o template para o Layout Inicial do projeto

O próximo passo será selecionar um modelo de Layout para o projeto, que no nosso caso será Blank Activity. Selecione e clique em Next.



Passo 05 - Nomear a Activity principal

Agora temos que dar um nome para a Activity Principal do projeto. Deixe o default por enquanto, ou seja, chamaremos de MainActivity. basta clicar em Next e não altere mais nenhuma informação.

Lembrando que existe uma aula detalhando a estrutura de um projeto Android.


Passo 06 - Finalização e criação do Projeto.

O próximo e último passo será executado automaticamente e consiste em criar o projeto pelo Wizard do Android Studio.  No vídeo desta aula, que está disponível no Canal YouTube do curso, irei comentar alguns pontos importantes deste projeto.


Passo 07 - Visualizar o Layout Criado

O próximo e último passo será executado automaticamente e consiste em criar o projeto pelo Wizard do Android Studio.  No vídeo desta aula, que está disponível no Canal YouTube do curso, irei comentar alguns pontos importantes deste projeto e comum a todos os projetos Android. 

Para visualizar o Layout no formato de Preview, expanda com um duplo clique: res -> layout -> activity_main.xml.


Passo 08 - Adicionando um TextView ao Layout

Ao visualizar o Preview do Layout, podemos ter uma idéia real de como o mesmo será apresentado na tela do dispositivo. Note que temos duas abas disponíveis, uma para visualizar o preview, no caso Display, e outra para visualizar o código XML que gera a tela.

Iremos trabalhar no modo Display por ser mais simples, mas no vídeo da aula, irei demonstrar como editar o arquivo XML para adicionar ou remover Widget do Layout.

Widget TextView Disponíveis


Nome que temos um grupo de componentes, inteligentemente organizados por tipo e características comuns. O grupo Widget contém os componentes alvos desta aula, e são eles:

  • Plain TextView
  • Large Text
  • Medium Text
  • Smal Text
Iremos adicionar todos eles ao Layout criado, logo abaixo do "Hello word!".

Para adicionar, você deve clicar no componente e arrastar e posicionar onde deseja. O posicionamento so é permitido em layouts do tipo RelativeLayout, que é o caso deste exercício.

Arraste os componentes na ordem de forma que você obtenha como resultado a tela abaixo:



O que vai diferenciar o tipo do TextView é a propriedade android:textAppearance, isso pode ser facilmente observado mudando a visualização para Text. Compare as diferenças para entender o que muda entre um componente e outro.


Neste exemplo, esta propriedade muda para:

  • textAppearanceLarge
  • textAppearanceMedium
  • textAppearanceSmall
O que representa os tipos de TextView utilizados no formulário.


Editando propriedades de um TextView

Particularmente, eu prefiro editar as propriedades dos componentes Widget de Layout diretamente no arquivo XML, mas é possível utilizar o Component Tree do Android Studio para tornar esta tarefa extremamente fácil.


Rodando no Emulador

Execute seu projeto para ver o resultado no Emulador, você pode executar diretamente no seu smartphone, basta conectar ao seu computador e configurar seu celular corretamente.


Vídeo desta aula

Esta aula contém um vídeo demonstrando como adicionar os vários tipos de Widgets TextView comentados no decorrer da aula.


Conclusão

Trabalhar com os componentes TextView é simples como foi visto nesta aula. O Android Studio ainda apresenta alguns bugs, mas nada de muito grave quando trabalhamos com layouts simples. No caso de Layouts mais sofisticados eu recomendo a edição direta no arquivo XML.


segunda-feira, 20 de abril de 2015

Curso Android Aula 06 - TextView


Introdução


Esta aula é a sexta aula do curso, porém é a primeira aula de uma série destinada ao estudo dos componentes Widget do Android. Nesta aula nosso foco será o Widget TextView

Com o exemplo que será criado e com as explicações para manipular propriedades de um TextView, você será capaz rapidamente de aplicar os mesmos conceitos em outros Widget. 

A documentação oficial contém maiores detalhes sobre o TextView.

Objetivo


O objetivo desta aula, é usar o TexView em um formulário XML de Layout, atribuir valores para propriedades tais como tamanho do texto, cor do texto, tipo padrão de dados para entrada de informações, como e-mail, telefone, nome, etc.

Ao final desta aula você será capaz de criar um formulário utilizando o Widget TextView e entenderá o processo para trabalhar com os seus parametros.

Especificamente nesta aula, estarei executando passo-a-passo todo o procedimento para criar um projeto com o Android Studio. Nas próximas aula, estes passos não serão mais abordados.

Criando o projeto exemplo utilizando o Android Studio

O Android Studio agora é a IDE oficial para o desenvolvimento Android. O suporte ao ADT Eclipse está sendo descontinuado. Portanto, é altamente recomendável que você passe a utilizar o Android Studio. 

Passo 01 - Criar o projeto

Com o Android Studio carregado, seleciona a opção Start a new Android Studio project.



Passo 02 - Dar nome ao projeto

Informe o nome da Aplicação, que para esta aula será CursoAndroidAula05. Em seguida, informe o nome do domínio que para este projeto será foo.maddo. É importante você saber que em projeto reais, o nome do domínio é significativo e deve ser informado corretamente conforme o projeto. Não é possível publicar na Loja Google Play, em uma mesma conta de desenvolvedor, mais de um projeto com o mesmo nome de domínio.

A pasta para o projeto, ou Project Location, informe a que você utiliza normalmente e cliente em Next.


Passo 03 - Selecionar a API do projeto

Agora devemos selecionar a versão da API que será suportada pelo projeto que estamos criando. A escolha do SDK mínino, irá refletir no conjunto de devices compatíveis com seu projeto. Note que se selecionar o SDK para a API 9, teremos conforme o exemplo na data da criação desta aula, aproximadamente compatibilidade com 99.5% de celulares Android em todo o planeta. Selecionado a API clique em Next.


Passo 04 - Selecionar o template para o Layout Inicial do projeto

O próximo passo será selecionar um modelo de Layout para o projeto, que no nosso caso será Blank Activity. Selecione e clique em Next.



Passo 05 - Nomear a Activity principal

Agora temos que dar um nome para a Activity Principal do projeto. Deixe o default por enquanto, ou seja, chamaremos de MainActivity. basta clicar em Next e não altere mais nenhuma informação.

Lembrando que existe uma aula detalhando a estrutura de um projeto Android.


Passo 06 - Finalização e criação do Projeto.

O próximo e último passo será executado automaticamente e consiste em criar o projeto pelo Wizard do Android Studio.  No vídeo desta aula, que está disponível no Canal YouTube do curso, irei comentar alguns pontos importantes deste projeto.


Passo 07 - Visualizar o Layout Criado

O próximo e último passo será executado automaticamente e consiste em criar o projeto pelo Wizard do Android Studio.  No vídeo desta aula, que está disponível no Canal YouTube do curso, irei comentar alguns pontos importantes deste projeto e comum a todos os projetos Android. 

Para visualizar o Layout no formato de Preview, expanda com um duplo clique: res -> layout -> activity_main.xml.


Passo 08 - Adicionando um TextView ao Layout

Ao visualizar o Preview do Layout, podemos ter uma idéia real de como o mesmo será apresentado na tela do dispositivo. Note que temos duas abas disponíveis, uma para visualizar o preview, no caso Display, e outra para visualizar o código XML que gera a tela.

Iremos trabalhar no modo Display por ser mais simples, mas no vídeo da aula, irei demonstrar como editar o arquivo XML para adicionar ou remover Widget do Layout.

Widget TextView Disponíveis


Nome que temos um grupo de componentes, inteligentemente organizados por tipo e características comuns. O grupo Widget contém os componentes alvos desta aula, e são eles:

  • Plain TextView
  • Large Text
  • Medium Text
  • Smal Text
Iremos adicionar todos eles ao Layout criado, logo abaixo do "Hello word!".

Para adicionar, você deve clicar no componente e arrastar e posicionar onde deseja. O posicionamento so é permitido em layouts do tipo RelativeLayout, que é o caso deste exercício.

Arraste os componentes na ordem de forma que você obtenha como resultado a tela abaixo:



O que vai diferenciar o tipo do TextView é a propriedade android:textAppearance, isso pode ser facilmente observado mudando a visualização para Text. Compare as diferenças para entender o que muda entre um componente e outro.


Neste exemplo, esta propriedade muda para:

  • textAppearanceLarge
  • textAppearanceMedium
  • textAppearanceSmall
O que representa os tipos de TextView utilizados no formulário.


Editando propriedades de um TextView

Particularmente, eu prefiro editar as propriedades dos componentes Widget de Layout diretamente no arquivo XML, mas é possível utilizar o Component Tree do Android Studio para tornar esta tarefa extremamente fácil.


Rodando no Emulador

Execute seu projeto para ver o resultado no Emulador, você pode executar diretamente no seu smartphone, basta conectar ao seu computador e configurar seu celular corretamente.


Vídeo desta aula

Esta aula contém um vídeo demonstrando como adicionar os vários tipos de Widgets TextView comentados no decorrer da aula.


Conclusão

Trabalhar com os componentes TextView é simples como foi visto nesta aula. O Android Studio ainda apresenta alguns bugs, mas nada de muito grave quando trabalhamos com layouts simples. No caso de Layouts mais sofisticados eu recomendo a edição direta no arquivo XML.