Skip to content

11 juillet 2010 | Rédigé par Axon

45

Faire un navigateur Web [Tutoriel Android n°9]

Grâce à ce tutoriel Android, nous allons voir comment utiliser les requêtes HTTP (GET) et les WebView. Les requêtes HTTP de type GET sont intéressantes pour récupérer des informations présentent sur un serveur à partir d’une URL donnée. Les WebViews quant à eux, peuvent faciliter la mis en page de vos applications grâce à des fichiers HTML.

Nous allons donc réaliser un petit navigateur Web. Grâce à une requête HTTP de type GET, nous allons récupérer le code HTML d’une page et grâce au WebView, nous allons afficher la page correspondante à l’URL que l’on aura saisi.

Créez un projet, appelez-le comme vous le souhaitez, personnellement j’ai utilisé la version 1.6 d’Android. Une fois le projet créé, ouvrez le fichier AndroidManifest.xml et rajoutez la ligne suivante pour autoriser l’accès à Internet à notre application :

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

Code XML

Notre interface sera composée d’un EditText qui nous permettra de jouer le rôle de la barre d’adresse, d’un Button permettant de lancer la requête HTTP en utilisant l’URL que l’on aura indiqué dans l’EditText et un WebView qui se chargera d’afficher la page Web. Voici donc mon fichier main.xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
 
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        >
	    <EditText android:id="@+id/EditText"
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_gravity="bottom"
                android:text="http://"
	    	/>
 
	    <Button android:id="@+id/Button"
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content"
	    	android:text="Go"
	    	/>
    </LinearLayout>
 
    <WebView android:id="@+id/WebView"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
    	/>
 
</LinearLayout>

Comme vous le voyez, il n’y a pas de difficulté dans ce fichier main.xml, néanmoins comme d’habitude si quelqu’un a des problèmes je serais heureux de pouvoir l’aider à mieux comprendre.

Code JAVA

Comme à mon habitude, j’ai commenté mon code je pense que cela suffira pour comprendre, mais toutes les questions, remarques ou suggestions sont les bienvenues, alors n’hésitez pas à laisser un petit commentaire.

package com.tutomobile.android.requetehttp;
 
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.URI;
 
import org.apache.http.HttpResponse;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.DefaultHttpClient;
 
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.EditText;
 
public class Tutoriel7_Android extends Activity {
 
    private static final String LOG_TAG = "Log : ";
    private final String mimeType = "text/html";
    private final String encoding = "utf-8";
    private String url;
    private String pageWeb;
    private WebView webView;
    private EditText editText;
    private  Button button;
 
	/** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        //On récupère l'EditText, le WebView, et le Button grâce au ID
        editText = (EditText) findViewById(R.id.EditText);
        webView = (WebView) findViewById(R.id.WebView);
        button = (Button) findViewById(R.id.Button);
 
        //On affecte un évènement au bouton
        button.setOnClickListener(
        	new OnClickListener() {
			@Override
			public void onClick(View v) {
				//on récupère l'url présente dans l'EditText
				url = editText.getText().toString();
 
				try {
					//on récupère le code HTML associé à l'URL que l'on a indiqué dans l'EditText
			        	pageWeb = Tutoriel7_Android.getPage(url);
 
			        	//on charge les données récupérées dans le WebView
			        	webView.loadData(pageWeb, mimeType, encoding);
				} catch (ClientProtocolException e) {
					e.printStackTrace();
				} catch (IOException e) {
					e.printStackTrace();
				}
			}
		}
        );
 
    }
 
    public static String getPage(String url) throws ClientProtocolException, IOException{
    	StringBuffer stringBuffer = new StringBuffer("");
    	BufferedReader bufferedReader = null;
 
    	try{
    		//Création d'un DefaultHttpClient et un HttpGet permettant d'effectuer une requête HTTP de type GET
    		HttpClient httpClient = new DefaultHttpClient();
    		HttpGet httpGet = new HttpGet();
 
    		//Création de l'URI et on l'affecte au HttpGet
    		URI uri = new URI(url);
    		httpGet.setURI(uri);
 
    		//Execution du client HTTP avec le HttpGet
    		HttpResponse httpResponse = httpClient.execute(httpGet);
 
    		//On récupère la réponse dans un InputStream
    		InputStream inputStream = httpResponse.getEntity().getContent();
 
    		//On crée un bufferedReader pour pouvoir stocker le résultat dans un string
    		bufferedReader = new BufferedReader(new InputStreamReader(inputStream));
 
    		//On lit ligne à ligne le bufferedReader pour le stocker dans le stringBuffer
    		String ligneCodeHTML = bufferedReader.readLine();
    		while (ligneCodeHTML != null){
    			stringBuffer.append(ligneCodeHTML);
    			stringBuffer.append("\n");
    			ligneCodeHTML = bufferedReader.readLine();
    		}
 
    	}catch (Exception e){
    		Log.e(LOG_TAG, e.getMessage());
    	}finally{
    		//Dans tous les cas on ferme le bufferedReader s'il n'est pas null
    		if (bufferedReader != null){
    			try{
    				bufferedReader.close();
    			}catch(IOException e){
    	    		Log.e(LOG_TAG, e.getMessage());
    			}
    		}
    	}
 
    	//On retourne le stringBuffer
    	return stringBuffer.toString();
    }
}

Voilà normalement si vous compilez et lancez l’application, vous obtiendrez un petit navigateur Web. Il se peut que certains sites ne fonctionnent pas, je ne sais pas trop pourquoi, il semble que l’envoi des infos soit bloqué. Si quelqu’un sait pourquoi, qu’il n’hésite pas à nous le dire. Merci !

Tutoriel inspiré de Android-France et du livre Programmation Android (Edition Eyrolles)

Découvrez d'autre articles de la catégorie Tutoriels Android

Encore un peu de lecture :

45 Commentaires Poster un commentaire
  1. Bricesou
    11 juil 2010

    Super, aucun problème !

  2. 12 juil 2010

    Content que tout fonctionne !

  3. 13 juil 2010

    Excellent post, very informative thanks! Keep up the good work.

  4. salimdz
    11 août 2010

    bonjour,
    Excellent poste, il n’y a pas une fonction pour lancer directement le navigateur internat de l’android

  5. 11 août 2010

    @salimdz : oui il existe un moyen de lancer directement le navigateur internet. Il faut procéder ainsi :
    String url = “http://www.tutomobile.fr&rdquo;
    Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
    startActivity(intent);

  6. salimdz
    11 août 2010

    bonjour,
    merci pour la réponse rapide
    a+

  7. cad13
    14 août 2010

    Axon, j’ai un soucis :
    je réutilise ton code pour afficher une page web, mais au lieu de faire un HttpGet, je fais un HttpPost (je dois envoyer des identifiants pour accéder à la page web), et là j’ai « page web non disponible » dans la webview…
    Pourtant, si j’affiche la string contenant la page html, j’ai bien la page correcte.
    Est-ce que ça ne fonctionne que pour un HttpGet ?
    Merci d’avance.

  8. cad13
    15 août 2010

    Je pense que ce n’est pas en rapport avec un Get ou un Post, mais plutôt à cause du format de ma page html…

  9. 15 août 2010

    Effectivement ce n’est pas en rapport avec un GET ou un POST comme je l’avais écrit dans le tuto : « Il se peut que certains sites ne fonctionnent pas, je ne sais pas trop pourquoi »

    Bon la bonne nouvelle c’est que je crois avoir trouvé pourquoi mais je n’en suis pas encore sûr donc dès que j’en suis sûr je corrigerai le tuto et je te dirai comment faire cad13 ! ;)

  10. cad13
    15 août 2010

    Tu es trop bon !!!!

  11. cad13
    15 août 2010

    Pour info, voici les premières lignes de ma page html :

    Planning

  12. cad13
    15 août 2010

    les balises ne passent pas dans les commentaires…

  13. cad13
    15 août 2010

    En fait, ma page web est un fichier aspx… et pas html

    Par hasard (et sans bien comprendre le pourquoi du comment), j’ai trouvé la solution pour résoudre mon problème :

    il suffit de changer
    webView.loadData(pageWeb, mimeType, encoding);
    par
    webView.loadDataWithBaseURL(« fake://not/needed », pageWeb, mimeType, encoding, «  »);

  14. fichten jeremie
    26 oct 2010

    Bonjour

    j’essaye d’utiliser le tuto afin de lancer une page web que je connai via une liste view

    la seule modif que j’ai apporter est celle la :

    if(map.get(« titre »)== »Calendrier »)
    {

    //on récupère le code HTML associé à l’URL que l’on a indiqué dans l’EditText
    pageWeb = « http://www.perdu.com »;

    //on charge les données récupérées dans le WebView
    webView.loadData(pageWeb, mimeType, encoding);
    }

    mais l’applis crash systematiquement

  15. 26 oct 2010

    @fichten jeremie : pour comparer des chaines de caractère on ne fait jamais == on fait : « Calendrier ».equals(map.get(« titre »)) je pense que l’erreur vient de là. Si ce n’est pas ça tiens moi au courant.

  16. fichten jeremie
    26 oct 2010

    je ne pense pas que cela vienne de la

    comme je débute j’ai testé ma listeview avec des show dialog
    et j’arrive bien a afficher dedans chaque titre de la listeview concernée quand celui ci est clické.

    mais je vais tenter la modif quand meme

  17. fichten jeremie
    26 oct 2010

    Mais je pense que je vais essayer via le tuto numéro 11 qui semble plus correspondre a mes attentes

    en tout cas le site est super et on assimile vite les choses grâce a tes tutos

  18. 26 oct 2010

    @fichten jeremie : Tiens moi au courant quand même si ça ne marche toujours pas. En tout cas merci pour tes encouragements.

  19. fichten jeremie
    28 oct 2010

    ca fonctionne parfaitement j’avais un peu mélanger les pinceaux mais tout est ok

  20. 28 oct 2010

    @fichten jeremie : Bon alors tout est parfait ! ;)

  21. Cédric
    2 nov 2010

    Bonjour,

    je suis tombé sur ton tutorial qui est très intéressant en cherchant une façon de coder une application que j’aimerai faire.

    En fait j’aimerai faire une appli android qui reprend des sections d’un site et les affiche à sa sauce mais sans me connecter directement à la base de donnée (j’aimerai que la solution envisagée permette de développer des applications sur d’autres plateformes).
    Au début j’ai pensé à la création de web services, et en demandant conseils à un ami développeur windows il m’a conseillé d’opter par la création de code xml dans des fichiers php (donc côté serveur) auxquels j’accèderai par mon appli android

    Donc je voulais savoir quelle solution te paraissait le mieux (en supposant que j’ai été assez clair ^^ ) et est-ce que la solution des fichiers xml est gérable, si oui comment interroger les pages générées depuis mon appli pour ensuite faire l’interface à ma sauce ^^ ?

    Merci d’avance.

  22. 2 nov 2010

    @Cédric : Web services ou fichier xml cela dépend de ce que tu veux réellement faire avec les infos que tu vas transmettre. Quoiqu’il en soit la solution des fichiers xml est gérable tu devras récupérer ta page puis parser son contenu.

  23. Cédric
    3 nov 2010

    Merci pour ta réponse, dans un premier temps je ne compte pas envoyer de données donc passer par des fichier xml me paraît être une solution assez rapide à mettre en place n’y connaissant rien en webservice…
    je vais voir de quelle manière m’y prendre pour parser du xml

    merci!

  24. 3 nov 2010

    @cedric : tu trouveras plein de parser xml en java sur la net. C’est pas très difficile ;)

  25. Cédric
    12 nov 2010

    Bonjour,

    je me demandais comment dans une application télécharger un fichier mp4… J’ai bien essayé avec un inputStream de mon url, suivi d’un FileOutputStream en précisant un chemin d’accès « bidon » (dans le sens où je pensais, peut-être naïvement, que cela créerai l’arborescence nécessaire) mais j’ai l’impression que mon appli ne fait rien…

    Donc je me demandais s’il y avait moyen de voir depuis l’émulateur si je télécharge bien mon fichier en effet…

    Merci beaucoup

  26. yvan
    13 nov 2010

    Le site de google ne s’affiche pas avec ce mini-navigateur :o
    Blague à part, j’ai remarqué que les pages qui ne s’affichent pas sont généralement celles qui ont du contenu affiché avec javascript (genre un slideshow jQuery), mais il y a des exceptions, et il doit surement y avoir d’autres cas aussi …

    Merci pour les supers tutos en tout cas, simples à comprendre et très instructifs ! ;)

  27. 16 nov 2010

    @yvan : tu as raison pour le javascript il faut rajouter une ligne je ne l’ai pas sous la main je te la donne quand je la retrouve ! ;)

  28. 16 nov 2010

    @yvan : Pour que la plupart des page fonctionne il faut utiliser ce bout de code :

    //on autorise le JavaScript dans la WebView webView.getSettings().setJavaScriptEnabled(true);

    //on charge les données récupérées dans la WebView webView.loadDataWithBaseURL(« fake://not/needed », pageWeb, mimeType, encoding, «  »);

  29. NAS
    24 nov 2010

    saluté
    c’est possible de bloquer l’orientation d’une appli en mode portrait ?

  30. 25 nov 2010

    Oui il me semble que tu dois ajouter ceci dans ton fichier AndroidManifest.xml : android:screenOrientation= »landscape »
    NB: il faut l’ajouter pour toutes les activités où tu souhaites bloquer le mode portrait

    Je n’ai pas tester donc tiens moi au courant stp ;)

  31. 29 déc 2010

    Bonsoir,
    tout d’abord je tenais à te féliciter Axon pour tous ces tutos aussi intéressants les uns que les autres.
    Je me retourne vers toi, car je suis face à un problème des plus bloquants. Je suis en train de faire une appli qui utilise les lib httpclient au sein d’Android. Tout se passe correctement pour les requêtes POST avec authentification sur un site distant, par contre lorsque je souhaite récupérer une page (GET), je ne la récupère que partiellement. J’avoue que j’ai utilisé toutes les méthodes présentes sur le net, même la tienne ne m’affiche qu’une partie de la page.
    As-tu déjà rencontré ce problème ?
    Merci d’avance, et bonne continuation

  32. 10 mar 2011

    Bonjour, j’ai suivi votre tuto, je n’ai pas d’erreur.
    J’installe l’appli sur mon emulateur android mais inpossible de la trouver dans la page des appli, je ne comprend pas pourquoi.
    J’ai vérifier que l’appli est bien installé dessus et elle est bien dedans.
    Merci d’avance de ta réponse

  33. florian
    6 juil 2011

    Salut,
    ton tuto est super !
    Peux tu le compléter avec le cas où une authentification au serveur est nécessaire ? Je n’arrive pas à comprendre les quelques tutos anglais qui trainent.. merci à toi et bon courage

  34. majed
    6 juil 2011

    salut tt le monde
    le programme marche mais par exemple si je tappe http://www.google.com ca marche pa pour qoui??

    merci d’avence

  35. 28 août 2011

    J’ai essayé l’application du tuto mais lorsque je teste sur mon site internet (http://www.petitsjobs.ch), tout ce que je vois c’est le texte : aucun design.

    Comment cela se fait-il ? L’application ne lit pas le css ?

  36. Steeven
    8 nov 2011

    salut a tous,

    je suis actuellement en train de suivre les tuto’s iPhone. J’etais sur les webView iOS quand je suis tomber sur ce tuto android.

    Je pense qu’il y a beacoup plus simple pour charger une simple url dans une webView :

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.web);

    _webview = (WebView) findViewById(R.id.webViewChat);
    _webview.setWebViewClient(new myWebViewClient());
    _webview.getSettings().setJavaScriptEnabled(true);
    _webview.loadUrl(Constants.URL_TO_LOAD);
    }

    @Override
    protected void onResume() {
    super.onResume();

    }

    private class myWebViewClient extends WebViewClient
    {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url)
    {
    view.loadUrl(url);
    return true;
    }

    @Override
    public void onPageFinished(WebView view, String url)
    {
    _progress.setVisibility(View.GONE);
    _layout.setVisibility(View.GONE);
    }
    }

  37. samsung
    2 déc 2011

    Comment faire pour gerer un historique s’l vous plaît?

  38. hpprobook
    2 déc 2011

    Bonjour,

    lorsque je clique sur GO j’ai cette erreur dans le logcat:
    org.apache.http.conn.BasicManagedEntity

    Et donc le navigateur n’atterris sur aucune page

    Aidez moi s’il vous plait!

  39. Erroll
    20 déc 2011

    Salut,

    la doc montre une page sur les webviews : http://developer.android.com/resources/tutorials/views/hello-webview.html

    peut-être plus simple?

    merci en tout cas pour les tutos

  40. biskoka
    16 jan 2012

    bonjour; moi je développe un projet sous android dans lequel l’user doit s’authentifier pour se connecter. mon problème est que je n’arrive pas récupérer les valeurs saisis par l’user afin de pouvoir faire une verification sur la BDD si l’user existe. NB: la base de donnée est sur un serveur distant.

  41. LO
    22 jan 2012

    Je suis débutant en prog, je migre de Visual studio C# à android via Eclipse et je suis pommé total!! :(
    -> les annotations (//….) sont toutes en erreur
    -> editText = (EditText) findViewById(R.id.EditText);
    « id » : id cannot be resolved or is not a field
    Pas d’interface graphique, dommage.
    si quelqu’un pouvait me donner un coup de pouce, merci,
    @++

  42. Thelast
    26 déc 2012

    Bonjour Axon! Merci pour le tuto. C’est vraiment génial et très gentil de votre part!
    Mais j’ai un problème avec les CSS des pages! Comment faire pour activer les CSS??

  43. yanssine
    13 mar 2013

    salut ,ou je vais exécutet le premier code et merci!!

Trackbacks & Pingbacks

  1. Les WebApps KESAKO | Tuto Mobile
  2. InTechShare » Encapsuler browser dans appli native Android

Une question, une suggestion, une opinion? Partagez ce que vous pensez, laissez un commentaire.

(obligatoire)
(obligatoire)

Note: Votre adresse email ne sera jamais publiée.

Suivez les réponses aux commentaires