Modificar la barra de título de una aplicación Android

Modificar la barra de título de una aplicación Android es una tarea que sin ser muy complicada requiere algo de trabajo, por lo que voy a intentar explicarlo paso a paso de la manera más sencilla posible.

Como siempre, creamos una nuevo projecto de tipo Android, y elegimos un nombre.

Para modificar la estética de la barra de título (color, tamaño de fuente, etc) sólo es necesario crearse un estilo que funcionará como nuestro nuevo tema de la aplicación.

Creamos un Android File XML , eligiendo Values como Resource Layout. Lo llamamos styles.xml y finalizamos. Aparecerá creado en la carpeta values.

Creamos un nuevo estilo indícándole mediante la propiedad parent que utilizará como base el tema de android. En él le indicaremos el ancho de la barra de título así como el color de fondo, previamente definido en otro estilo.

<resources>
     <style name="FondoBarraPersonalizada">
         <item name="android:background">#3366CC</item>
</style>
<style name="TemaPersonalizado" parent="android:Theme">
         <item name="android:windowTitleSize">40dip</item>
         <item name="android:windowTitleBackgroundStyle">@style/FondoBarraPersonalizada</item>
</style>
 </resources>

Para indicar que éste será el tema predefinido de nuestra aplicación, accedemos al AndroidManifest.xml y en la pestaña Application buscamos Theme y pulsamos Browse. Elegimos nuestro TemaPersonalizado y guardamos.

Con esto, nuestra aplicación queda de la siguiente manera:

Pero si con esto no nos es suficiente, y queremos definir la estructura que tendrá la barra, hará falta un nuevo XML en nuestro layout. Creamos por tanto un nuevo Android File XML. y en Resource Type elegimos Layout. Le ponemos nombre al archivo, por ejemplo barratitulo.xml y pulsamos Finish. Se nos habrá creado el archivo en la carpeta res/layout. Añadimos a strings.xml una nueva cadena llamada titulopersonalizado y le indicamos el valor que queramos. Incluiremos esta nueva cadena a la barra de título.

Comenzamos entonces la creación de barratitulo.xml. Básicamente se realiza de la misma manera que  cualquier otra pantalla, salvo porque la vista previa en el diseñador nos servirá sólo para hacernos una idea, pero no será idéntica a la real.

Creamos en el LinearLayout  un TextView y le asignamos el valor de app_name, y otro con el valor de barratitulo.xml. Crearemos un layout horizontal que ocupe todo el espacio de la barra con los dos textos que se repartirán el espacio mediante pesos:

<LinearLayout
 android:layout_height="fill_parent"
 android:layout_width="fill_parent"
 android:orientation="horizontal"
 xmlns:android="http://schemas.android.com/apk/res/android">
 <TextView
 android:id="@+id/titulo"
 android:layout_height="fill_parent"
 android:layout_weight="1.0"
 android:layout_width="fill_parent"
 android:text="@string/app_name">
 </TextView>
 <TextView
 android:id="@+id/titulo2"
 android:layout_height="fill_parent"
 android:layout_weight="1.0"
 android:layout_width="fill_parent"
 android:text="@string/titulopersonalizado">
 </TextView>
</LinearLayout>

Ya sólo nos quedaría añadir las siguientes líneas en el onCreate de nuestra actividad:

requestWindowFeature(Window.FEATURE_CUSTOM_TITLE); (antes del método setContentView)

getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.barratitulo); (tras el método setContentView)

Nos queda por tanto la siguiente clase:

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

        requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);

        setContentView(R.layout.main);

        getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.barratitulo);
    }
}

Con esto conseguimos que esta actividad contenga la barra personalizada. Para que todas las actividades lo contengan, nos aprovecharemos de las bondades de la herencia. Lo único que habrá que hacer será usar esta clase como padre y hacer que resto de actividades extiendan BarraPersonalizadaActivity.

El método anterior se puede emplear para crear cabeceras todo lo complejas que se quiera, con textos, imágenes y cualquier otra cosa que se nos ocurra. La barra de título está un poco anticuada, y deberías plantearte la opción de usar la Action Bar, pero en cualquier caso este artículo te vendrá muy bien como práctica.

Lo siguiente que haremos será establecer una imagen de fondo en nuestra Activity.