O ImageView, como o próprio nome diz, é um componente que nos permite trabalhar com imagens. Iremos mostrar dois exemplos em que podemos aplicar esse componente, o primeiro será o exemplo que irá baixar uma imagem da internet através de uma URL e no segundo exemplo iremos fazer uma espécie de catálogo, onde as imagens irão passar de acordo com as setas de avançar e voltar.

Criando um novo Projeto

Para começarmos teremos que criar um novo projeto no Eclipse clique em File > New > AndroidProject e coloque o nome do projeto como quiser, o deste exemplo irá se chamar ImageViewAndroid.

Na nossa Activity principal iremos colocar uma lista. Primeiramente iremos criar um array de string com o nome OPCOES, ele terá a primeira posição como Carregar Imagens e a segunda será Exibir Imagens. Nossa classe ira utilizar um extends de ListActivity, pois a mesma será uma lista. Criaremos também um array de string com o nome ACOES, onde a primeira posição será chamada de TELA_IMAGEM e a segunda será chamada de TELA_EXI, como mostra a Listagem 1.


package devmedia.weslleynepomuceno;

import android.app.Activity;
import android.app.ListActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class ImageViewAndroidActivity extends ListActivity {
  private static final String[] OPCOES = {"Carregar Imagens", 
    "Exibir Imagens"  };
  
  private static final String[] ACOES = {"TELA_IMAGEM",
    "TELA_EXI"};
Listagem 1. Criando Arrays de String para alimentar a lista

Agora, no nosso onCreate, iremos criar nossa lista utilizando um ArrayAdapter e em seguida iremos implementar o clique da lista para que possamos ter acesso às demais telas. Veja como irá ficar na Listagem 2.


@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(
            this, android.R.layout.simple_list_item_1, OPCOES);
        setListAdapter(adapter);
    }
  
  @Override
  protected void onListItemClick(ListView l, View v, int position, long id) {
    super.onListItemClick(l, v, position, id);
    Intent it = new Intent(ACOES[position]);
    startActivity(it);    
  }
}
Listagem 2. Criando a lista de acesso as demais telas e implementando o clique na mesma

Criando a tela de carregar imagens

Para desenharmos a nossa tela para carregar imagens, teremos que criar na pasta layout do nosso projeto um arquivo XML. Para isso, clique com o botão direito do mouse na pasta layout, escolha a opção New > Other... ,vá à pasta Android e escolha a opção Android XML Layout File e dê o nome que você desejar ao XML, o deste exemplo irá se chamar tela_url_img.

Criado o nosso XML, iremos agora desenhar a tela. Vejam na Figura 1, como ficará nossa tela de carregar imagens.

Tela para realizar download de imagens da internet
Figura 1. Tela para realizar download de imagens da internet

O código para deixar a tela dessa forma está na Listagem 3.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Digite a URL de uma Imagem"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:ems="10" >

        <requestFocus />
    </EditText>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Baixar Imagem" 
        android:onClick="baixarImagemClick"/>

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/ic_launcher" />

</LinearLayout>
Listagem 3. XML da tela de carregar imagens

Criando a tela de exibir imagens

Agora para desenharmos a nossa tela para exibir imagens, teremos que criar na pasta layout do nosso projeto o arquivo XML. Para isso, clique com o botão direito do mouse na pasta layout, escolha a opção New > Other..., vá à pasta Android e escolha a opção Android XML Layout File e dê o nome que você desejar ao XML, o deste exemplo irá se chamar detalhesproduto.

Criado o nosso XML, iremos agora desenhar a tela. Vejam na Figura 2 como ficará nossa tela de exibir imagens.

Tela para exibir imagens ao clicar no avançar ou voltar
Figura 2. Tela para exibir imagens ao clicar no avançar ou voltar

O código para deixar a tela dessa forma está na Listagem 4.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/formum"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView7"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Imagens de Pratos"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#1E90FF" />

    <TextView
        android:id="@+id/textView11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="__________________________________"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#000000" />

    <LinearLayout
        android:id="@+id/linearLayout5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >


        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="0.73"
            android:onClick="anterior"
            android:src="@drawable/voltar" />



        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="166dp"
            android:layout_height="382dp"
            android:src="@drawable/ic_launcher" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="0.74"
            android:onClick="proximo"
            android:src="@drawable/avancar" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout6"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#000000"
            android:gravity="center"
            android:text="Produto"
            
            android:textAppearance="?android:attr/textAppearanceLarge" />
    </LinearLayout>

</LinearLayout>
Listagem 4. XML da tela de exibir imagens

Criando a classe para carregar imagens

Agora teremos que criar a nossa classe que irá baixar as imagens da internet, para isso clique com o botão direito do mouse no pacote da aplicação, escolha a opção New > Class.

Nossa classe terá como objetivo realizar download de imagens de acordo com a URL que estiver no nosso EditText e exibi-la no nosso ImageView. Para isso iremos utilizar uma AsyncTask, o download da imagem será via URL Connection e usará o requestMethod Get. Olhando o código vocês entenderão melhor, vejam como ficará o nosso código na Listagem 5.


package devmedia.weslleynepomuceno;

import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;

import android.app.Activity;
import android.app.AlertDialog;
import android.app.ProgressDialog;
import android.content.SharedPreferences;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageView;

public class CarregarImagemUrl extends Activity {

  private EditText edtUrl;
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    
    setContentView(R.layout.tela_url_img);
    edtUrl = (EditText)findViewById(R.id.editText1);
    // Obtendo a ultima URL digitada
    SharedPreferences preferencias = getSharedPreferences(
        "configuracao", MODE_PRIVATE);
    String url = preferencias.getString("url_imagem", "http://");
    edtUrl.setText(url);
  }
  
  @Override
  protected void onDestroy() {
    super.onDestroy();
    // Salva a URL para utiliza-la quando essa tela for re-aberta
    SharedPreferences preferencias = getSharedPreferences(
        "configuracao", MODE_PRIVATE);
    SharedPreferences.Editor editor = preferencias.edit();
    editor.putString("url_imagem", edtUrl.getText().toString());
    editor.commit();
  }
  
  public void baixarImagemClick(View v){
    new DownloadImagemAsyncTask().execute(
        edtUrl.getText().toString());
  }
  
  
  class DownloadImagemAsyncTask extends 
    AsyncTask<String, Void, Bitmap>{
    
    ProgressDialog dialog;
    
    @Override
    protected void onPreExecute() {
      super.onPreExecute();
      dialog = ProgressDialog.show(
          CarregarImagemUrl.this, 
          "Aguarde", "Carregando a  imagem...");
    }
    
    @Override
    protected Bitmap doInBackground(String... params) {
      String urlString = params[0];
      
      try {
        URL url = new URL(urlString);
        HttpURLConnection conexao = (HttpURLConnection)
            url.openConnection();
        conexao.setRequestMethod("GET");
        conexao.setDoInput(true);
        conexao.connect();
        
        InputStream is = conexao.getInputStream();
        Bitmap imagem = BitmapFactory.decodeStream(is);
        return imagem;
        
      } catch (Exception e) {
        e.printStackTrace();
      }
      return null;
    }
    
    @Override
    protected void onPostExecute(Bitmap result) {
      super.onPostExecute(result);
      dialog.dismiss();
      if (result != null){
        ImageView img = (ImageView)findViewById(R.id.imageView1);
        img.setImageBitmap(result);
      } else {
        AlertDialog.Builder builder = 
            new AlertDialog.Builder(CarregarImagemUrl.this).
            setTitle("Erro").
            setMessage("Não foi possivel carregar imagem, tente 
            novamente mais tarde!").
            setPositiveButton("OK", null);
        builder.create().show();
      }
    }
  }
}
Listagem 5. Realizando download de imagen e exibindo-a no ImageView

Criando a classe para exibir imagens

Agora teremos que criar a nossa classe que irá baixar as imagens da internet, para isso clique com o botão direito do mouse no pacote da aplicação e escolha a opção New > Class.

Nessa classe iremos exibir imagens que estão salvas dentro do nosso projeto. As imagens do projeto estão na pasta drawable do código fonte disponível nesse artigo.

Após ter criado a classe que irá exibir as imagens, teremos que criar nosso ImageView e um TextView, pois ao clicarmos na setinha de avançar ou voltar será atualizada no nosso ImageView a imagem seguinte que será determinada na codificação da nossa classe. Veja como ficaria o código completo da nossa Activity na Listagem 6.


package devmedia.weslleynepomuceno;

import android.app.Activity;
import android.content.pm.ActivityInfo;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

public class PratosExibir extends Activity {

  ImageView pro;

  TextView nome;

  String cod;

  int cont;

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

    this.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

    nome = (TextView) findViewById(R.id.textView1);
    pro = (ImageView) findViewById(R.id.imageView1);

    cont = 0;

    if (cont == 0) {
      pro.setImageResource(R.drawable.ic_launcher);
      nome.setText(getIntent().getStringExtra("nome"));
    }

  }

  public void proximo(View v) {

    cont++;

    if (cont < 1) {
      cont = 1;
    }

    if (cont == 1) {
      pro.setImageResource(R.drawable.prato1);
      nome.setText("PRATO 1");

    }

    if (cont == 2) {
      pro.setImageResource(R.drawable.prato2);
      nome.setText("PRATO 2");
    }

    if (cont == 3) {
      pro.setImageResource(R.drawable.prato3);
      nome.setText("PRATO 3");
    }

    if (cont == 4) {
      pro.setImageResource(R.drawable.prato4);
      nome.setText("PRATO 4");
    }

    if (cont == 5) {
      pro.setImageResource(R.drawable.prato5);
      nome.setText("PRATO 5");
    }

    if (cont > 5) {
      cont = 5;
    }
  }

  public void anterior(View v) {

    cont--;

    if (cont < 1) {
      cont = 1;
    }

    if (cont == 1) {
      pro.setImageResource(R.drawable.prato1);
      nome.setText("PRATO 1");

    }

    if (cont == 2) {
      pro.setImageResource(R.drawable.prato2);
      nome.setText("PRATO 2");
    }

    if (cont == 3) {
      pro.setImageResource(R.drawable.prato3);
      nome.setText("PRATO 3");
    }

    if (cont == 4) {
      pro.setImageResource(R.drawable.prato4);
      nome.setText("PRATO 4");
    }

    if (cont == 5) {
      pro.setImageResource(R.drawable.prato5);
      nome.setText("PRATO 5");
    }

    if (cont > 5) {
      cont = 5;
    }

  }
}
Listagem 6. Exibindo imagens que estão na nossa pasta drawable

Declarando informações no AndroidManifest.xml

Como teremos que utilizar a internet para baixar imagens de uma URL, então vamos ter que colocar no nosso AndroidManifest uma permissons de Internet. Além disso, lembre que na nossa ListActivity criamos um Array de Strings que continha ACOES. Pois bem, essas ações será vinculadas as nossas Activitys, tanto de Carregar imagem como de Exibir Imagem, para isso iremos declarar nossas Activitys no Manifest e acrescentar a tag na Activty CaregarImagemUrl (isso para este exemplo caso que possui a classe com esse nome) e acrescentar a tag &ly;action android:name = “TELA_EXI” > na Activty PratosExibir.

Veja como irá ficar nosso AndroidManifest.xml na Listagem 7.


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android
.com/apk/res/android"
    package="devmedia.weslleynepomuceno"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="10" />
    <uses-permission android:name="android.permission
    .INTERNET"/>
    
    

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name=".ImageViewAndroidActivity"
            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=".CarregarImagemUrl"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="TELA_IMAGEM" />

                <category android:name="android.intent
                .category.DEFAULT" />
            </intent-filter>
        </activity>
        <activity
            android:name=".PratosExibir"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="TELA_EXI" />

                <category android:name="android.intent
                .category.DEFAULT" />
            </intent-filter>
        </activity>
                
    </application>

</manifest>
Listagem 7. XML do AndroidManifest.xml

Após isso, basta executar a nossa App. A tela principal (nossa ListActivity) será exibida da seguinte forma, como mostra a Figura 3.

Tela inicial da App
Figura 3. Tela inicial da App

Conclusão

Bom pessoal, vimos dois exemplos de uso da ImageView. Trabalhar com esse componente é muito bom e muito fácil, até mesmo para quem está iniciando com programação em dispositivos móveis.

Com isso finalizamos mais um artigo, muito obrigado pela atenção de todos. Dúvidas/Sugestões? Comentem...

Um forte abraço e até breve.

Links Úteis


Saiba mais sobre Android ;)

  • Cursos para Mobile: Aqui você encontra os melhores cursos sobre programação mobile. Aprenda a criar aplicativos mobile nativos e híbridos para Android, iOS e Windows usando Java, Cordova, Xamarin, Ionic e mais.
  • Guia de Android: O Android é a plataforma oficial para desenvolvimento de aplicativos mobile do Google. Neste guia você encontrará artigos, vídeos e cursos para aprender tudo sobre esse SDK, que domina o mundo dos dispositivos móveis.