Cómo configurar el ícono y título de la aplicación


Por defecto cuando creamos desde cero una actividad en blanco (Blank Activity) con el Android Studio, nos genera la página con una toolbar que muestra el label de la aplicación.


Estudiando la vista default

La actividad principal define una toolbar

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
...>

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_conversor" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

El id/toolbar se asigna en el método onCreate() al heredar de AppCompatActivity:
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_conversor);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

En nuestro AndroidManifest.xml definimos el label de la aplicación, mediante una indirección a una constante:

<activity
    android:name=".ConversorActivity"
    android:label="@string/app_name"

Esa constante entonces, debemos verla en el archivo strings.xml:

<resources>
    <string name="app_name">ConversorApp</string>
res/values/strings.xml

Cambiando el título

Primero lo más sencillo: cambiaremos el nombre de la aplicación.

<resources>
    <string name="app_name">Conversor de medidas</string>

Otra opción es definir una nueva constante y apuntar la propiedad android:label de la activity principal de nuestra aplicación hacia esta constante, en todo caso dejamos esta tarea al lector.

Agregando un ícono a nuestra aplicación

Si además queremos visualizar un ícono en la toolbar, debemos modificar el layout default 
  • la toolbar ahora debe incluir 
    • una imagen
    • y un textview con tamaño de título
  • y debemos redefinir la asignación heredada en el método onCreate

Encontrar un ícono

La imagen debe tener un ícono, hay algunas opciones
  • construirlo nosotros mediante algún programa open-source
  • buscar un ícono de licencia libre en Internet
Vamos por la segunda opción, ingresamos a http://www.icons4android.com/ y seleccionamos , por ejemplo, esta URL: 
http://www.icons4android.com/icon/225. Cambiamos el color de fondo y al hacer Download zip vemos que tenemos el mismo png con diferentes tamaños en directorios especiales, uno para cada tipo de resolución:

Copiamos entonces el directorio res a nuestra aplicación:
  1. abrimos el zip
  2. extract ...
  3. ... al directorio donde está la aplicación
Ahora sí generamos la ImageView y el TextView:

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_action" />

            <TextView
                android:id="@+id/toolbar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

        </android.support.v7.widget.Toolbar>
activity_conversor.xml

Hicimos un pequeño cambio: el id/toolbar se lo asignamos al TextView en lugar de a la toolbar.
Ejecutamos la aplicación y nos aparece un mensaje de error en el LogCat:

11-10 15:21:52.540 8720-8720/? E/AndroidRuntime:  Caused by: java.lang.ClassCastException: android.support.v7.widget.AppCompatTextView cannot be cast to android.support.v7.widget.Toolbar
11-10 15:21:52.540 8720-8720/? E/AndroidRuntime:     at org.uqbar.conversor.ConversorActivity.onCreate(ConversorActivity.java:23)

Ajustamos entonces el método onCreate, para asignar manualmente el valor del textview:
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_conversor);
        TextView toolbar = (TextView) findViewById(R.id.toolbar);
        toolbar.setText(R.string.app_name);
ConversorActivity.java

Ahora sí, se visualiza el ícono y el título:

Pero sería bueno que resaltara un poco más el título, para eso configuramos la propiedad textSize:

            <TextView
                android:id="@+id/toolbar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"/>

Resultado final

Y vemos reflejado el cambio en la aplicación




Comments