Tip Android #10: mostrar una imagen como background


VERSIONES

  1. 23/02/2013 (Primera publicación)
  2. 26/05/2014:
    • Añadido cómo definir trasparencias

android tip

Se puede ubicar en el fondo de una pantalla una imagen de tal modo que el resto de elementos de la interfaz se superpongan sobre ella recurriendo a FrameLayout. Este layout es muy simple y está pensado para mostrar un único elemento hijo, de tal modo que si incluye más de un widget éstos se superpondrían unos sobre otros siguiendo el orden en el que se definan formando una especie de pila (aunque podríamos posicionar los elementos dentro del layout con la propiedad gravity). Lo que vamos a hacer es que un FrameLayout contenga en primer lugar una imagen que se ajuste a todo el tamaño del layout, y a continuación un layout (Linear, Relative…) transparente con el resto de elementos de la pantalla. Mientras todos widgets/layouts sobre la imagen tengan el fondo o partes transparentes veremos el background.

En el siguiente ejemplo, vamos a centrar en una pantalla con mi avatar de fondo un par de campos de texto

<?xml version="1.0" encoding="utf-8"?>

    <FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/background"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="center_vertical"
            android:contentDescription="@string/background"
            android:scaleType="fitCenter"
            android:src="@drawable/background" />

        <LinearLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:orientation="vertical" >

            <EditText
                android:id="@+id/editText1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ems="10"
                android:hint="@string/texto1" />

            <EditText
                android:id="@+id/editText2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:ems="10"
                android:hint="@string/texto2" />
        </LinearLayout>
    </FrameLayout>

El resultado:

android background

Existe una solución más eficiente para nuestro caso en concreto, tal y como se comenta aquí y que consiste en utilizar la etiqueta merge para evitar la creación de un FrameLayout.

<?xml version="1.0" encoding="utf-8"?>

    <merge
        xmlns:android="http://schemas.android.com/apk/res/android">

        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="center_vertical"
            android:contentDescription="@string/background"
            android:scaleType="fitCenter"
            android:src="@drawable/background" />

        <LinearLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:orientation="vertical" >

            <EditText
                android:id="@+id/editText1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ems="10"
                android:hint="@string/texto1" />

            <EditText
                android:id="@+id/editText2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:ems="10"
                android:hint="@string/texto2" />
        </LinearLayout>
    </merge>

Transparencia

Es fácil definir un fondo translúcido para un View ya que Android admite el formato de color #AARRGGBB donde tenemos hexadecimales que representan, en orden, el alfa aplicado, el rojo, el verde y el azul. Esto permite superponer sobre el fondo elementos con cierto nivel de trasparencia para crear el efecto deseado. Por ejemplo, el valor “android:background=”#66000000” nos proporcionaría un fondo semitransparente. A partir de Android 3, se puede definir el color y su alfa por separado:

        android:background="#000000"
        android:alpha="0.5"

El proyecto completo para Eclipse ADT se encuentra en Github. Para más información sobre cómo utilizar GitHub, consultar este artículo.

<< TIPS ANDROID

7 Responses to Tip Android #10: mostrar una imagen como background

  1. pepe dice:

    Hola Daniel,

    Ante todo gracias por los aportes son muy útiles para quienes estamos empezando.

    lo que quiero es que desde una actividad al pulsar sobre un botón por ejemplo se muestre una imagen a pantalla completa, y al darle al botón volver del móvil regrese a la 1º actividad

    espero haberme explicado bien gracias

    • pepe dice:

      Se me olvidaba decir que esa imagen no es siempre la misma, sino que es la que el usuario ha seleccionado antes. es decir, lo que mostraría seria una determinada imagen según el valor de una variable por ejemplo

      • danielme.com dice:

        Yo lo que haría es crear una Activity con un Layout que sólo tuviera un ImageView centrado, y pasarle a esa Activity en el Intent la imagen a mostrar, ya sea un objeto en memoria o una ruta (fichero, web, drawable, asset…). Para hacer que la imagen se muestre a pantalla completa sólo hay que aplicar un estilo a esa Activity tal que así:

        <activity
        android:name=”com.danielme.visor”
        android:label=”@string/app_name”
        android:configChanges=”orientation|keyboardHidden”
        android:theme=”@android:style/Theme.NoTitleBar.Fullscreen”>

        Con este estilo sólo se muestra la imagen ya que tanto la Actionbar (o barra de título si hablamos de Android 2) como la barra de notificaciones de Android quedarían ocultas. Si quieres que se muestre esta barra el estilo a aplicar es el siguiente: “@android:style/Theme.NoTitleBar”.
        Con respecto al botón back, si no quieres que se aplique su comportamiento por defecto sólo tienes que sobreescribir en la Activity el método “onBackPressed()”.

  2. Yo dice:

    Hola Daniel,
    Esta muy bien la explicacion, pero yo necesito colocar una imagen de fondo y sobre ella dos relative layout con un color transparente o tenue mejor dicho para que se aprecie el fondo y he probado con android:alpha, el tema de translucent y no hay manera, me puedes dar una pista.
    Gracias

    • danielme.com dice:

      Puedes definir colores en Android en hexadecimal con el formato #AARRGGBB donde AA indica el alpha del color. Por ejemplo, puedes aplicar a tu layout android:background=”#4000DD00″ y tendrás un fondo verdoso y translucido.
      A partir de Android 3 se puede definir el color y el alpha por separado:
      android:background=”#ee0000″
      android:alpha=”0.5″
      En Android 2 no se reconoce el atributo alpha por lo que el color se verá opaco.

  3. Antonio dice:

    una pregunta, y para poder asignar que una parte del imageview sea visible, como le hago? me pidieron desarrollar un rompecabezas donde las piezas sean de formas irregulares. en c++ usaba mascara para donde le decia lo de color negro que sea transparente en java con android , ni idea

  4. Hola que tal Antonio yo encontre una solucion con este codigo:

    case R.id.btn1:
    if {(i++)

    }
    {
    btn1 = arreglo;
    arreglo =[posicion1]
    btn1.setEnabled(true);
    juego=[0]
    }
    else
    {
    btn1.setEnabled(true);
    if
    btn1=(posicion2);
    arreglo[1]
    btn1.setEnabled(false);
    juego=0

    }break;
    en el cual tienes que rear case en tu MainActivity….. pero posicionar la imagen que sera la que vas a usar como rompecabeza…. despues en el XML agregar el viewimagen y un Surfaceview

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: