[Tutoriel] : Afficher une image à partir un URL en Android

Dans ce tutoriel , nous allons voir comment afficher une image dans notre application à partir une image stocké dans le web. Parmi les contraintes du système Android est la mémoire. Donc si on a plusieurs images à utiliser dans notre application , on les stocke dans un serveur d'images et on les récupére via leurs emplacements.

On va tester avec une seule image qui sera afficher dans un "ImageView" .
Il y en a plusieurs méthodes pour faire ça mais la meilleur c'est d'utiliser AsyncTask (Éviter le traitement lourd à l'application)

#1. Création d'une application Android:
Application Name: Loading Picture Android Url
Project Name: LoadingPictureAndroidUrl
Package Name :com.tutozone.loadingpictureandroidurl
Activity Name: MainActivity

Création d'un nouveau projet Android

On va ajouter un "ImageView" dans la layout de notre activité.

< ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
       />

Dans notre application, on a besoin de la permission "INTERNET", donc on ajoute la permission dans le fichier "AndroidManifest.xml"

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

Passons à notre activité maintenant ,on va créer une classe privé (à la fin de notre activité) qui étend de "AsyncTask" dont on ajoute un "ImageView" dans sa constructeur.

// AsyckTask to download image (url given )
 private class DownloadImageTask extends AsyncTask {
    ImageView bmImage;
    
    //constructor
    public DownloadImageTask(ImageView bmImage) {
        this.bmImage = bmImage;
    }
    
    // laoding picture and put it into bitmap 
    protected Bitmap doInBackground(String... urls) {
        String urldisplay = urls[0];
        Bitmap mIcon11 = null;
        try {
          InputStream in = new java.net.URL(urldisplay).openStream();
          mIcon11 = BitmapFactory.decodeStream(in);
        } catch (Exception e) {
            Log.e("Error", e.getMessage());
            e.printStackTrace();
        }
        return mIcon11;
    }
    
    //after downloading
    protected void onPostExecute(Bitmap result) {
        bmImage.setImageBitmap(result);
    }
  }

Pour tester l'asyncTask , on crée une instance dans la méthode onCreate() en passant l'imageView et l'url d'image à afficher .

// here we will load the picture into the imageView
new DownloadImageTask((ImageView) findViewById(R.id.imageView1))
     .execute("http://img4.hostingpics.net/pics/118117logoCopie.png");

#2. Résultat: 
 Vous pouvez mettre n'importe quel URL d'image dans le code  et après l'exécution voici le résultat:

Chargement d'image dans l'imageView à partir un URL

#3. Code complet:

Comme d’habitude , le code de notre application se trouve dans le site GitHub.
 

Code source

Vous avez aimé cet article ? alors suivez-nous sur Twitter, Google+ et Facebook, et partagez-le avec les boutons ci-dessous ! Vos commentaires sont les bienvenus.