Programación multimedia. Mejoras en diseño

Para mejorar el diseño de nuestra aplicación tenemos diversos elementos que nos podrán ayudar.

En las siguientes páginas vamos a hacer un repaso por cada uno de ellos, a saber:

• Lanzadores. Representa la aplicación en la pantalla principal
• Barra de estados. Barra con pequeños iconos que nos alertan de notificaciones
• Menú. Cada actividad puede tener su propio menú
• Barra de acciones. Situada en la parte superior, fue creada para que el usuario tuviera una experiencia unificada a través de distintas aplicaciones.
• Pestañas
• Otros…

Iconos

Los iconos pueden ser de los incluidos en el sistema: android:icon=”” o los iconos propios añadidos en la carpeta Drawable.

En la documentación oficial de android no aparece un listado con los recursos disponibles, pero se puede ir a http://androiddrawables.com, donde los encontramos clasificados por APIs y por tipos.

Otra forma es acceder al conjunto de recursos del sistema propios desde código, usando el método getResources().

Resources recursos = getResources()

Para acceder a un determinado recurso dentro del conjunto el método dependerá del tipo de recurso. Por ejemplo, para un icono (tipo Drawable):

Drawable db1 = recursos.getDrawable(android.R.drawable.ic_secure)

Para ver los recursos del sistema hay que instalar, en un dispositivo real, las aplicaciones android.R y R.explorer (para animaciones).

Guía de estilos para iconos

• http://www.google.com/design/spec/style/icons.html
• http://developer.android.com/design/downloads/index.html
• http://romannurik.github.io/AndroidAssetStudio/ (para crear tus propios iconos de forma sencilla y online).

Pestañas

Las pestañas pueden usarse para intercambiar puntos de vista dentro de la misma actividad o para cambiar entre actividades totalmente independientes.

Para crear una interfaz de usuario con pestañas hay que usar varios elementos, en el siguiente orden:

• TabHost. El elemento principal de un conjunto de pestañas. Debe tener obligatoriamente como id @android:id/tabhost
• LinearLayout. Dentro del TabHost vamos a incluir un Linear con las dos secciones principales. La sección de pestañas será la parte superior y la sección de información estará en la inferior.
• TabWidget. La sección de pestañas se representa con TabWidget con un id @android:id/tabs
• FrameLayout. Es el contenedor de lo que se quiere mostrar en cada pestaña, ya sea botones, cajas, imágenes, videos, etc.

Normalmente el contenido de cada pestaña tiene su layout principal y con un id único que lo identifique, lo que permite hacer referencia a ellos más fácilmente.

Sexta aplicación. Actividad con pestañas

Generamos un nuevo proyecto, en el que suprimiremos el TextView y añadiremos un TabHost. Desplegamos sus componentes y veremos que ya están el TabWidget y el FrameLayout necesarios (este último conteniendo tres LinearLayout, para tres hipotéticas pestañas. Si quieres evitar los avisos cambia la orientación a vertical.

Yendo a la definición XML de nuestro layout nos aseguramos de que los id del tabhost y el tabwidget sean los siguientes:

Y por último, en el código Java, al final del método onCreate() añade el siguiente código (en comentarios su funcionamiento):

// Obtenemos un icono del sistema

Resources recursos = getResources();

Drawable icono1 = ContextCompat.getDrawable(this, android.R.drawable.ic_secure);

// Empezaremos obteniendo una referencia al control principal TabHost

TabHot tabs = (TabHost)findViewById(android.R.id.tabhost);

// Lo preparamos para su configuración

tabs.setup();

/* Crearemos un objeto de tipo TabSpec (pestaña) para cada uno de las pestañas que

queramos añadir mediante el método newTabSpec(), al que pasaremos como

parámetro una etiqueta identificatia de la pestaña*/

TabHost.TabSpec spec = tabs.newTabSpec("mitab1");

// Le asignaremos el layout de un contenido correspondiente a la pestaña

spec.setContent(R.id.tab1);

/* Indicaremos el texto y el icono que queremos mostrar a la pestaña

mediante el método setIndicator(texto, icono)*/

spec.setIndicator("TAB1",icono1);

// Añadimos la pestaña recien creada

tabs.addTab(spec);

// Repetimos el proceso para cada una de las pestañas

spec = tabs.newTabSpec("mitab2");

spec.setContent(R.id.tab2);

spec.setIndicator("CONTACTO", icono1);

tabs.addTab(spec);

spec = tabs.newTabSpec("mitab3");

spec.setContent(R.id.tab3);

spec.setIndicator("", icono1);

Y ahora al ejecutarlo podemos visualizar el resultado:

Pese a todo este ejemplo, actualmente Android recomienda usar ActionBar.