Como mostrar imagen img scr en formato HTML con fromHTML

Objetivo:

Mostrar una imagen usando fromHTML, de forma que podremos cogerla de una internet con la etiqueta img de HTML.

Antes de este tutorial, aunque muy básico, puede que desees familiarizarte con fromHTML. Para ello puedes pasarte por un ejemplo en el que sólo se utiliza texto en HTML en este tutorial. En él se muestra el hipertexto en un AlertDialog, pero es igualmente sencillo asignarlo a un TextView.

Cuando deseamos utilizar HTML en un TextView, por ejemplo, podemos llamar al paquete android.text.html, dejando que él actúe sobre nuestro texto, aplicando la vista indicadas en las etiquetas que le dan formato. En este HTML podemos incluso utilizar llamadas a imágenes con la tag img src.

Creamos  mini-aplicación para coger el HTML y lo aplicamos a un TextView para mostrarlo. Para ello, debemos crear una aplicación desde el principio,  crear un TextView para insertar el hipertexto en HTML (con imagen incluida en este caso), y finalmente llamar a la clase android.text.html. Para que las imágenes en el HTML aparezcan debemos implementar la función getImageHTML, que devolverá una instancia de la clase ImageGetter, necesaria para ello.

Vemos una captura de la mini-aplicación:

Imagen en fromHTML by TutorialAndroidcom

Y a continuación mostramos el texto comentado:

Código fuente Java:

[sourcecode language=”java”]
package fromHtml.image.tutorialandroid.com;
import java.io.IOException;
import java.io.InputStream;
import java.net.MalformedURLException;
import java.net.URL;
import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.text.Html;
import android.text.Spanned;
import android.text.Html.ImageGetter;
import android.util.Log;
import android.widget.TextView;

public class HtmlFromHtmlImageActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

String html = "Tus ejemplos en<br/>TutorialAndroid.com<br/><br/><img src=’http://www.tutorialandroid.com/tutorialandroidcom.jpg’ />";

Spanned s = Html.fromHtml(html,getImageHTML(),null);
TextView txt = (TextView)findViewById(R.id.main_menu_textview);
txt.setText(s);
}

public ImageGetter getImageHTML(){
ImageGetter ig = new ImageGetter(){
public Drawable getDrawable(String source) {
try{
Drawable d = Drawable.createFromStream(new URL(source).openStream(), "src name");
d.setBounds(0, 0, d.getIntrinsicWidth(),d.getIntrinsicHeight());
return d;
}catch(IOException e){
Log.v("IOException",e.getMessage());
return null;
}
}
};
return ig;
}

}
[/sourcecode]

Descárgate el código aquí

En el código descargable se encuentra el proyecto completo.

¡Espero que os sirva de ayuda, sobre todo a ti Ricardo Klein!

¡Saludos!

Como utilizar formato HTML en textos

Objetivo:

Utilizar HTML para obtener textos formateados en nuestra aplicación Android.

Hay situaciones en las programando en Android, tenemos un texto HTML y deseamos incluirlo en nuestra aplicación, aprovechando el formato que tiene.

En esas situaciones, podemos llamar al paquete android.text.html, dejando que él actúe sobre nuestro texto, aplicando la vista indicadas en las etiquetas que le dan formato.

Vamos a crear una mini-aplicación para dar formato HTML al texto que se encuentra en un aviso (Alert). Para ello, debemos crear una aplicación desde el principio, saber como crear un AlertDialog (aunque en el enlace se muestra como hacerlo junto con XML y aquí lo crearemos con Java directamente), y finalmente llamar a la clase android.text.html.

Vemos una captura de la mini-aplicación:

TutorialAndroid - Ejemplo escribir en HTML

Y a continuación mostramos el texto comentado:

Código fuente Java:

[sourcecode language=”java”]
package com.htmlenalertas.tutorialandroid;

import android.app.Activity;
import android.app.AlertDialog;
import android.os.Bundle;
import android.text.Html;

public class HTMLenAlertActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
AlertDialog.Builder alertWithHTML=new AlertDialog.Builder(HTMLenAlertActivity.this);
alertWithHTML.setMessage(Html.fromHtml("<font color=#fff000> Escribo esto en HTML! "+"</font><br><strong>tutorialandroid.com</strong>"));
alertWithHTML.setPositiveButton("ok", null);
alertWithHTML.show();
}
}
[/sourcecode]

Descárgate el código aquí

Como programar un Webview

Objetivo:

Vamos a aprender a crear nuestro primer Webview.

Hay varias formas de hacerlo, pero nos centraremos en la más simple, dando una pautas al final con configuraciones mas avanzadas.

Vemos un resultado final antes.

Ejemplo Webview por tutorialandroid

 

Código fuente java (/src/com.webview/Principal.java):

[sourcecode language=”java”]
package com.webview;

//importaciones necesarias
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class Principal extends Activity {

//Nuestra vista necesaria para la web
private WebView mWebView;

@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);

//asociamos
mWebView = (WebView) findViewById(R.id.webview);

//cargo un .html que he situado en la carpeta asset/ del proyecto
mWebView.loadUrl("file:///android_asset/ejemploWebview.html");
}

}
[/sourcecode]

 

Código fuente XML (/res/layout/main.xml):

[sourcecode language=”xml”]
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Aplicacion ejemplo de un Webview"
android:padding="4dip"
android:textSize="16sp"
/>

<WebView
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
/>

</LinearLayout>
[/sourcecode]

 

Código fuente HTML (/asset/ejemploWebview.html):

[sourcecode language=”html”]
<html>

<!– Los estilos se proyectarán a nuestra aplicacion –>
<body style="text-align:center">

<strong> Ejemplo Webview, Por TutorialAndroid.com </strong> <br>

<p>Este es un ejemplo de p&aacute;gina web
con texto e im&aacute;genes y links.</p>

<!– Enlace con una imagen de Androide-Feeds –>
<a href="http://www.tutorialandroid.com/feed/">
<img src="http://www.tutorialandroid.com/androidFeed_.png"
height="128" width="128" border="0" alt="RSS"
title="http://www.tutorialandroid.com/feed/"></a>

<p>Link a la web
<a href="http://www.tutorialandroid.com">tutorialandroid.com</a></p>

</body>

</html>

[/sourcecode]

 

Descárgate el código aquí

 

Opciones más avanzadas:

  • Visionar una web situada en internet (y no en nuestro proyecto).
    Para ello debemos sustituir la ruta de carga de la Url por la deseada en el código Java:
    [sourcecode language=”java”]
    mWebView.loadUrl("http://www.tutorialandroid.com");
    [/sourcecode]

    Y no se puede olvidar proporcionar de conexión a internet a la aplicacion en el Manifest.xml (como hijo del tag <manifest>):

    [sourcecode language=”java”]
    <uses-permission android:name="android.permission.INTERNET" />
    [/sourcecode]

  • Permitir más compatibilidad con componentes, tal y como Javascript, simulación de cliente Chrome,  o aparición de un zoom en caso de ser necesario.
    En este caso debemos añadir el siguiente código al método onCreate:
    [sourcecode language=”java”]
    webSettings.setSavePassword(false);
    webSettings.setSaveFormData(false);
    webSettings.setJavaScriptEnabled(true);
    webSettings.setSupportZoom(false);
    mWebView.setWebChromeClient(new MyWebChromeClient());
    mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
    [/sourcecode]
    Y definimos una clase, dentro de la nuestra (Principal.java):
    final class DemoJavaScriptInterface {

    [sourcecode language=”java”]
    final class DemoJavaScriptInterface {

    DemoJavaScriptInterface() {
    }

    /**
    * No es llamada en la interfaz. Crea un runnable para invocar
    * loadUrl en la hebra de la interfaz.
    */
    public void clickOnAndroid() {
    mHandler.post(new Runnable() {
    public void run() {
    mWebView.loadUrl("javascript:wave()");
    }
    });

    }
    }

    /**
    * "alerta" para javascript. Util para depurar javascript.
    */
    final class MyWebChromeClient extends WebChromeClient {
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
    result.confirm();
    return true;
    }
    }
    [/sourcecode]