ImageView Android: Como utilizar o ImageView para exibir imagens

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.

**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.

**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.

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.

Relacionado: Curso de Android: Como criar minha primeira aplica��o em Android

Links �teis

N�meros m�gicos: O que s�o e como corrigir: Confira o que s�o n�meros m�gicos e como reconhecer a presen�a dessa m� pr�tica de programa��o em c�digos.
Planejamento e governan�a em Data Warehouses: Este artigo apresenta os conceitos de uma arquitetura em um Data Warehouse, Staging Area e ETL, com exemplos em SQL Server e SSIS.

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.

Tecnologias:

Confira outros conte�dos:

Programador Mobile

Desenvolvimento de aplicativos para...

Conceitos b�sicos para programar para...

Assista grátis a nossa aula inaugural

Perguntas frequentes

Quem somos?

Por que a programação se tornou a profissão mais promissora da atualidade?

Como faço para começar a estudar?

Em quanto tempo de estudo vou me tornar um programador?

Sim, você pode se tornar um programador e não precisa ter diploma de curso superior!

O que eu irei aprender estudando pela DevMedia?

Principais diferenciais da DevMedia

Qual o investimento financeiro que preciso fazer para me tornar um programador?

Como funciona a forma de pagamento da DevMedia?

Por Weslley Em 2013

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

Jos� Lucas

Obrigado DevMedia, nunca presenciei uma plataforma de ensino t�o presente na vida acad�mica de seus alunos, parab�ns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia h� cerca de 1 ano e meio... Hoje estou h� 1 ano empregado trabalhando 100% com React!

Adauto Junior

J� fiz alguns cursos na �rea e nenhum � t�o bom quanto o de voc�s. Estou aprendendo muito, muito obrigado por existirem. Est�o de parab�ns... Espero um dia conseguir um emprego na �rea.

Ver todos os casos de sucesso

Utilizando ImageView no Android

Veja neste artigo como utilizar o componente ImageView para exibir imagens na sua aplica��o Android.