Componente Listview no Android Studio

Veja nesse artigo como criar um aplicativo em Android trabalhando com listas através do componente ListView com menus, eventos e chamadas de novas janelas pelo ambiente de desenvolvimento Android Studio.

O ListView é um componente visual utilizado para o Android onde sua finalidade é de armazenar uma ampla quantidade de informações e com o poderio de atualizar, receber e enviar eventos dinamicamente. Nesse artigo o ambiente de desenvolvimento a ser utilizado é o Android Studio, que além de possuir uma estrutura poderosa dividida em layouts de tela e de códigos, é muito leve e de fácil manipulação do usuário. O objetivo desse artigo é criar um aplicativo através de uma lista contendo menus e eventos em cada um, configurar permissões para internet e chamadas telefônicas e também desenvolver uma tela “Sobre” para a prática na navegação entre telas.

O emulador da máquina virtual compatível com o Android Studio e recomendado é o Genymotion, com o dispositivo virtual Google Nexus 5 – 5.0.0 – API 21 – 1080x1920 e também é necessário ter o JDK (Java SE Development Kit) com a versão 7 ou superior instalado na máquina.

Um Pouco sobre Android

Android é um sistema operacional voltado para dispositivos móveis. Possui interface por manipulação direta através de touch e seus elementos são de forma robusta, mudança de orientação de tela, os seus aplicativos em sua maioria estão na loja Google Play, tem alta recepção no mercado, o seu gerenciamento de memória por padrão é com economia de energia.

Algumas das vantagens do Android são: segurança, privacidade, possibilidade de uso em modo anônimo e seu código é aberto.

A arquitetura do Android é dividida em camadas, ou seja, cada parte é responsável por gerenciar seus respectivos processos. Essas camadas podem ser divididas em níveis zero, um, dois e três.

Nível 3: Camada de Aplicações

Nível 2: Camada de Framework de Aplicação

Nível 1: Bibliotecas

Nível 1: Runtime

Nível 0: Kernel (Linux)

Genymotion

Genymotion é um software de emulação do Android onde permite que o usuário execute o sistema operacional do Google no Windows.

A vantagem desse aplicativo é que ele oferece imagens de edições diversas desse sistema operacional incluindo Jelly Bean, posteriormente denominado Nexus S e suas evoluções, dentre outros dispositivos.

Quando o Genymotion é emulado, ele não apenas roda o Android na máquina, ele também conta com suporte para redes de conexão à internet (Wi-Fi), recursos como GPS, ADB e integrações com Android Studio e Eclipse.

Talvez a única 'desvantagem' seja ter que fazer cadastro, mas depois de feito isso, poderá fazer downloads necessários. Para usar o Genymotion, basta autenticar a inicialização do programa inserindo os dados de login recém-criados.

Após isso, o aplicativo exibe uma tela com a lista de imagens do Android disponíveis. Tem que selecionar a versão requerida e carregá-la. Após o término desse processo, para iniciar a emulação, é só clicar em 'Play' ou 'Start' em outras versões. Feito todos esses procedimentos, é só esperar o carregamento do sistema

O Projeto

Tendo o Android Studio instalado, será criado o projeto clicando no menu Quick Start, bastando clicar em “Start a new Android Studio project", como mostra a Figura 1.

Figura 1. Janela de configuração inicial Quick Start

Será apresentada a janela seguinte para configurar as seguintes sugestões:

Veja como fica na Figura 2.

Figura 2. Janela de configuração para o novo projeto

Ao clicar em Next, será apresentada uma janela para escolher a plataforma do projeto. Vamos usar a Phone/Tablet, como mostra a Figura 3.

Figura 3. Tela para configuração do Layout

Escolha a opção Blank Activity para iniciarmos. Clicando em Next vai aparecer a janela para colocar o nome da Atividade, o nome do layout, título e o nome do recurso. Para o nosso projeto pode deixar por padrão o que foi gerado automaticamente. Finalize clicando em Finish.

Hierarquia das Partes no Android Studio

Após ter criado o projeto, será gerada uma hierarquia pronta para desenvolvimento, como mostra a Figura 4.

Figura 4. Arquitetura do Projeto organizada em hierarquia

Os nossos arquivos principais são activity_main.xml (na pasta layout) e a Atividade Principal: MainActivity (no diretório listas.devmedia.br.listas).

Já na parte central da tela do Android Studio será apresentado a estrutura da Figura 5.

Figura 5. Estrutura com os componentes visuais Widgets/Layouts

Na parte centralizada da figura vemos o dispositivo móvel pronto para receber os elementos. Na parte superior estão as configurações do smartphone e a versão do Android instalado. Na parte inferior temos as abas Design e Text (programação).

Tela 'Sobre'

Vamos criar uma nova atividade para tela Sobre da nossa aplicação. Para isso, basta clicar com o botão direito no diretório listas.devmedia.br.listas e ir em NewActivityBlank Activity. Será aberta uma nova janela e configure de acordo com os dados a seguir:

Veja como fica na Figura 6.

Figura 6. Configuração para a nova Atividade

Clique em Finish para confirmar as configurações. No arquivo menu_main.xml devemos inserir os códigos referentes a Listagem 1, responsável por nomear o diretório atual, tornar a página MainActivity como principal, criar um botão denominado Setting (configurações) e outro botão denominado Gravar, demonstrando que é possível criar botões dentro do menu principal.

<menu 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" tools:context=".MainActivity"> <item android:id="@+id/action_settings" android:title="@string/action_settings" android:orderInCategory="100" app:showAsAction="never" /> <item android:id="@+id/action_gravar" android:title="Gravar" android:orderInCategory="101" app:showAsAction="always" /> </menu>
Listagem 1. Menu_main.xml

No arquivo menu_actSobre.xml será colocado o código referente a Listagem 2, responsável por manter o controle de navegação e identidade de esquemas com relação a tela Sobre, e permitir receber eventos.

<menu 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" tools:context="br.unoeste.listas.ActSobre"> <item android:id="@+id/action_settings" android:title="@string/action_settings" android:orderInCategory="100" app:showAsAction="never" /> </menu>
Listagem 2. Menu_actSobre.xml

No arquivo activity_act_sobre.xml, localizado no caminho res/layout, acrescente o código da Listagem 3, responsável em definir as dimensões da altura e largura do layout, além de definir a orientação superior, inferior direita e esquerda da tela. Além disso, inserimos um componente TextView (texto), onde está configurado um texto para exibição, a largura, altura, tamanho, cor e posições com relação a tela

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context="listas.devmedia.br.listas.actSobre"> <TextView android:text="Tela de Sobre DEVMEDIA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="30sp" android:textColor="#ff0e18ff" android:layout_alignParentTop="true" android:layout_alignParentRight="true" android:layout_alignParentEnd="true" /> </RelativeLayout>
Listagem 3. Activity_act_sobre.xml

No arquivo actSobre (localizado no diretório listas.devmedia.br.listas) será inserido o código referente a Listagem 4.

package listas.devmedia.br.listas; import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; public class actSobre extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_act_sobre); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_act_sobre, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } }
Listagem 4. Arquivo actSobre

Esse código é gerado automaticamente no momento da criação da Atividade Sobre e é responsável em manter um controle sobre as ações e interações do arquivo actSobre.

Tela Principal com Lista

No arquivo activity_main.xml na aba Text será colocado o código da Listagem 5.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <ListView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/lvopcoes" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_alignParentTop="true" /> </RelativeLayout>
Listagem 5. Arquivo activity_main.xml

Esse código é responsável por definir os controles sobre a tela e suas configurações. Além disso, é adicionado o componente ListView que contém suas especificações de altura, largura, id, dimensões e propriedades.

Implementação da Tela Principal

A tela principal será composta de uma lista onde cada item será responsável por um evento diferente. Dentro do arquivo MainActivity (localizado no diretório listas.devmedia.br.listas), coloque o seguinte código da Listagem 6.

package listas.devmedia.br.listas; import android.content.Intent; import android.net.Uri; import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.ListView; import android.widget.Toast; import java.util.ArrayList; import java.util.List; public class MainActivity extends ActionBarActivity { List<String> opcoes; ArrayAdapter<String> adaptador; ListView lvOpcoes; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); lvOpcoes = (ListView) findViewById(R.id.lvopcoes); opcoes = new ArrayList<String>(); opcoes.add("Navegar na Internet"); opcoes.add("Fazer uma ligação"); opcoes.add("Sobre"); opcoes.add("Sair"); adaptador = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1, opcoes); lvOpcoes.setAdapter(adaptador); lvOpcoes.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { switch (position){ case 0: navegarInternet(); break; case 1: fazerLigacao(); break; case 2: exibirSobre(); break; case 3: finish(); break; } } }); } private void exibirSobre() { Intent it = new Intent(MainActivity.this, actSobre.class); startActivity(it); } private void fazerLigacao() { Uri uri = Uri.parse("tel:0123456789012"); Intent itNavegar = new Intent(Intent.ACTION_DIAL,uri); startActivity(itNavegar); } private void navegarInternet() { Uri uri = Uri.parse("//www.devmedia.com.br"); Intent itNavegar = new Intent(Intent.ACTION_VIEW,uri); startActivity(itNavegar); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { if (item.getItemId() == R.id.action_settings) { Toast.makeText(this,"Selecionou em configuração",Toast.LENGTH_SHORT).show(); return true; } if (item.getItemId() == R.id.action_gravar) { Toast.makeText(this,"Selecionou em gravar",Toast.LENGTH_SHORT).show(); return true; } return super.onOptionsItemSelected(item); } }
Listagem 6. MainActivity

Esse código é responsável por exibir uma lista de opções na tela.

Através de um List (denominado de opções) são armazenados os dados através de um ArrayList, que é um conjunto de menus.

O ArrayAdapter (com o nome de adaptador) é responsável por manter uma ligação entre os dados a serem inseridos na tela e o componente em si (localizado na parte layout).

O ListView (chamado de lvOpcoes) é o componente que recebe o adaptador e todos os seus eventos que passam a ser incrementados.

É criado um método onItemClick do tipo AdapterView que descrimina cada item da posição caso o usuário aperte em algum elemento da lista na tela. Assim, o método será chamado:

O método exibirSobre() ilustra um dos objetivos desse artigo que é chamar a outra tela Sobre que contém instruções de navegações de tela.

O método fazerLigacao() é responsável por chamar uma outra tela e ao mesmo tempo passar por parâmetro o número para fazer uma ligação. O código Intent.ACTION_DIAL é o que realiza essa interação.

O método navegarInternet(), que contém o código Intent.ACTION_VIEW, é responsável por fazer uma transição de tela onde o navegador de Internet entra em ação, passando por parâmetro (uri) o endereço do site.

O método onOptionsItemSelected(MenuItem item) passa por parâmetro o item que o usuário selecionou. Esse menu se localiza na parte superior da tela, onde é criada uma condição (if) na qual se é selecionado o item action_settings então surge uma mensagem afirmando que selecionou a Configuração, se é selecionado o item action_gravar, então aparece na tela afirmando que selecionou Gravar.

Arquivo ANDROIDMANIFEST.XML

O AndroidManifest.xml é o arquivo principal do projeto e nele ficam todas as configurações. Obrigatoriamente ele tem que ficar na pasta raiz do projeto e conter todas as configurações necessárias para executar o projeto, como o nome do pacote que está sendo utilizado, os nomes das classes de cada atividade e várias outras configurações.

No interior da tag é preciso declarar o pacote principal do projeto: por conta disso é utilizada a tag .

Cada activity do projeto deve ser obrigatoriamente declarada no arquivo AndroidManifest.xml. Caso não esteja, então não é possível utilizar a atividade. Ao declarar a activity é utilizada a tag , recebendo o nome da classe, que é sempre relativa ao pacote principal.

Nesse arquivo serão anexados o seguinte código da Listagem 7.

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="listas.devmedia.br.listas" > <uses-permission android:name="INTERNET" /> <uses-permission android:name="android.permission.CALL_PHONE" /> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name=".MainActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name=".actSobre" android:label="@string/title_activity_act_sobre" android:parentActivityName=".MainActivity" > <meta-data android:name="android.support.PARENT_ACTIVITY" android:value="listas.devmedia.br.listas.MainActivity" /> </activity> </application> </manifest>
Listagem 7. Arquivo AndroidManifest.xml

Para que o aplicativo utilize as permissões para Internet, então é implementado o código . Além disso, para que o aplicativo utilize as permissões de chamadas telefônicas, usamos o código .

O restante do arquivo foi gerado automaticamente desde a criação do projeto até a criação de novas atividades.

Para finalizar, basta iniciar o ambiente de virtualização Genymotion com o dispositivo virtual já instalado por fins de emulação. Execute o projeto indo no Android Studio e clicando em Run, localizado na parte superior do ambiente ou aperte as teclas de atalho Shift+F10.

A tela principal do aplicativo deve ficar idêntica a Figura 7.

Figura 7. Tela inicial do aplicativo onde mostra a lista com opções

Veja como é simples trabalhar com o Android Studio, pois boa parte da programação é gerada pelo mesmo, ajudando na produtividade do programador.

Aprenda mais sobre Android

Ebook exclusivo
Dê um upgrade no início da sua jornada. Crie sua conta grátis e baixe o e-book

Artigos relacionados