In questo articolo vediamo come realizzare un semplice browser utilizzando una WebView visualizzando al suo interno il contenuto di una pagina web.
Avviamo eclipse e creiamo un nuovo progetto cliccando su File –>New->Android Application Project , si aprirà una finestra con diversi campi nella quale andremo ad inserire il nome della nostra applicazione:
Clicchiamo su Next e andiamo avanti, nella stessa finestra si aprirà un’ altra schermata che ci mostrera’ alcuni parametri di configurazione. Potremmo scegliere se creare un’ icona personalizzata per il lancio dell’ app, creare l’activity principale e dove posizionare il contenuto del progetto all’ interno di un Workspace:
Togliamo la spunta sul campo create custom launcher icon lasciando ad eclipse di impostare come icona quella predefinita.Clicchiamo su next e passiamo alla schermata successiva nella quale sceglieremo di utilizzare una blank Activity :
Con la configurazione iniziale abbiamo fatto, clicchiamo su Finish e visualizziamo subito l’ anteprima della schermata della nostra app :
Il layout dell‘activity creato in automatico lo troviamo all’interno del file “activity_main.xml” seguendo il percorso “res/layout/” del nostro progetto. Avremo due modi per aprire il file: attraverso l’editor che ci permette di visualizzare la struttura xml, oppure in modalità visuale usando la scheda “Graphical layout”. Scegliamo la modalita’ visuale, eliminiamo subito il campo “Hello World” che a noi non serve ed inseriamo i componenti necessari per realizzare il nostro browser. Avremo bisogno di un campo di testo (EditText), un bottone (Button) ed una WebView per visualizzare il contenuto della pagina web. Possiamo vedere ora comè composto l’xml:
activity_main.xml
[code lang=”xml”]
<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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<EditText
android:id="@+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:ems="10" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/editText1"
android:layout_alignBottom="@+id/editText1"
android:layout_toRightOf="@+id/editText1"
android:text="Search" />
<WebView
android:id="@+id/webView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignLeft="@+id/editText1"
android:layout_below="@+id/editText1" />
</RelativeLayout>
[/code]
MainActivity.java
Apriamo adesso il file MainActivity.java che si trova sotto il percorso “src/com.apps.browser/” e lo modifichiamo come tale:
[code lang=”java”]
package com.apps.browser;
import android.os.Bundle;
import android.app.Activity;
import android.webkit.WebView;
import android.widget.EditText;
import android.widget.Button;
import android.view.View;
import android.view.View.OnClickListener;
public class MainActivity extends Activity {
WebView webView;
EditText search;
Button button;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.webView);
search = (EditText) findViewById(R.id.editText1);
button =(Button) findViewById(R.id.button1);
button.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
webView.loadUrl(search.getText().toString());
}
});
}
}
[/code]
Nella classe MainActivity abbiamo dichiarato tre variabili relative ai tre oggetti dell’interfaccia:
WebView webView; EditText search; Button button;
alle quali nel metodo onCreate assegnamo tramite il metodo findViewById l’id della view. Al click sul bottone “Search” chiameremo il metodo loadUrl che ci permettera’ di visualizzare nella webView la pagina web cercata.
Potete scaricare il sorgente dell’ applicazione qui.