Tip Android #10: mostrar una imagen como background

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:

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