Programación: 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.

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.

Ejemplo:

Código fuente 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/>TodoAndroidd.wordpress.com<br/><br/><img src='https://todoandroidd.files.wordpress.com/2012/07/logophotoshop11.png' />";

        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;
    }

}

Codigo Fuente xml:

<strong> </strong></pre>
<?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">
 <TextView android:text="TextView" android:id="@+id/main_menu_textview"
 android:layout_height="wrap_content" android:padding="10dip"
 android:layout_gravity="center" android:gravity="center"
 android:textSize="20dip" android:layout_width="fill_parent">
 </TextView>
</LinearLayout>

Descargar projecto AQUI

Acerca de Guillermo Navarro

Creador de TodoAndroid y Androtoall

Publicado el 1 de agosto de 2012 en Programación, Tutoriales. Añade a favoritos el enlace permanente. 1 comentario.

  1. Como puedo asignarle el evento onclick a cada imagen?

    Saludos!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: