Menú Navegación Páginas

El blog de Antonio Leiva sobre diseño y desarrollo de interfaces en Android

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

Modificar la barra de título de una aplicación Android
  • Twitter
  • Facebook
  • Google Plus
  • LinkedIn

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.

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

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.

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

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

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

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.

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

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.

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

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.

¿Te ha gustado? Compártelo

9 Comentarios

  1. Muy buen tutorial!!!! Me ha servido mucho en los proyectos que tengo! Realmente un buen ejemplo de lo que es herencia…Se le puede agregar una imagen a esa barra y setearle que vaya al una determinada actividad (puede ser la home)

    una sola cosa que marcarte…en vez de “linearlayout” es LinearLayout, lo mismo pasa con el TextView…para los que ya tenemos experiencia, nos damos cuenta pero quizas para los novatos les cueste un poco…

    mas alla de ello, excelente!

    Saludos desde Argentina!!

  2. Muchas gracias Gonzalo! Y también por tu apunte. Ya he modificado el layout de la barra de título con lo que me comentaste. Un saludo!

  3. Y se le puede garegar el menú? Es que lo he intentado mucho pero no lo he logrado…..

    • La barra de titulo existía en versiones 2.3 y anteriores. Este artículo está obsoleto, ahora debes usar la ActionBar para este tipo de cosas.

  4. Una duda, ¿En la barra de título también puedo poner botones y editText?, me he dado cuenta que en apps como Whatsapp la barra de título viene con varios tipos de vista si no me equivoco.

    • Sí, este artículo es muy antiguo. Mira cosas sobre la ActionBar. Los botones son los MenuItem del menú, y el EditText es un SearchView.

  5. Como coloco una imagen en la barra :S ?

  6. Como puedo cambiar el parent=”android:Theme” por otro, si lo cambio me dice que no puedo combinar los estilos, del resto todo super bien, gracias

Trackbacks/Pingbacks

  1. Android Support Package: Adiós a la fragmentación | LiME Creative Labs | LiME Creative Labs - [...] ¿Estás siguiendo el curso de Android? Pues entonces, tu próximo paso será modificar la barra de título de tu …

Deja tus comentarios

¿Has probado ya Bandhook? Te presento mi nueva aplicación, en la que podrás consultar información de tus artistas favoritos y descubrir otros nuevos relacionados.