1 Menú lateral Antes que nada se debe crear un proyecto, en este ejemplo se llama Tsikbal. 1.- Comencemos por el build.gradle(module:app) y agregamos las dependencias, las versiones dependerá de las que tengas instaladas en Tu SDK, en este ejemplo estoy trabajando con la versión 24 del sdk. Este valor numérico es el mismo que debes colocar en estas otras dos dependencias Nos permitirá crea imágenes circulares, para el ícono del menú principal Después de agregar las dependencias debes sincronizar. 2.- Se deben tener listas las imágenes que vamos a utilizar en el proyecto, en este ejemplo yo voy a usar las siguientes, no tienen que ser de esas mismas dimensiones las que vayas a utilizar. 240x175 - JPG 100x70 - PNG 24x24 - PNG 3.- Estas imágenes deber ser copiadas y pegadas en la carpeta drawable del proyecto 4.- Abrimos el archivo de recursos styles.xml para eliminar el toolbar que traen los activities, por defecto, para poder agregar uno personalizado creado por nosotros mismos, modificando el código como se muestra: Modificar este atributo 5.- Abrimos el archivo de recursos colors.xml y creamos un color para usarlo como color de fondo de nuestros toolsbars, en este ejemplo agregaré el color rojo, pero puede ser cualquier otro color que desees, basta con que coloques el valor hexadecimal adecuado. Aurelio López Ovando 1
Agregar esta línea con el color hexadecimal que desees. 6.- Crear dos archivos XML en la carperta layout (Click derecho sobre la carpeta layout -> New -> XML -> Layout Xml File). Uno lo llamaremos tool_bar y el otro se llamará header_menu. 7.- Creamos el código del tool_bar.xml con el siguiente código Hacemos que este layout no se comporte como un layout, sino un widget, lo cual nos favorece para ser manipulado como Toolbar personalizado Color creado en el paso 5 8.- Creamos el código del header_menu.xml con el siguiente código. Es una de las imágenes que subimos Hace el efecto de ícono redondo en el encabezado del menú Otra de las imágenes que subimos Aurelio López Ovando 2
9.- Creamos la carpeta de recursos menú, es la carpeta donde almacenaremos el menú que vamos a ocupar (si ocuparamos mas menús ahí debemos colocarlos). (Click derecho sobre la carpeta res -> New -> Android resource directory) Debemos configurarlo como se muestra en la figura de abajo: Seleccionamos el tipo de recurso que queremos, en este caso desplegamos la lista y seleccionamos la opción menú, esto cambiará en automático la propiedad Directory name, si no cambia, hay que cambiarla manualmente Al finalizar presionamos el botón OK y nos debe aparecer una nueva carpeta dentro de res con el nombre menu. 10.- Creamos el menú con sus respectivas opciones. Clic derecho sobre la carpeta menu -> New -> Menu resource file Lo llamaremos menú_principal, todo minúsculas y sin espacios en blanco, y presionamos OK. Una vez creado el archivo, lo abrimos y lo modificamos con el siguiente código. Aurelio López Ovando 3
11.- Después de haber creado todos los recursos que necesitamos, ahora si ya podemos ir al XML del layout principal y dar formato tanto a la pantalla principal, como al menú. El context está determinado por el nombre que le hayas puesto al controlador, en este caso se llama Principal.java Sustituimos los layouts que siempre hemos usado, por un widget, para que nos permita interactuar con un menú desplegable Invocamos el tool_bar creado en el paso 6 El framelayout se encargará de mostrar la pantalla principal del a aplicación a través del uso de Fragments. Este es el menú lateral deslizable de izquierda a derecha Invocamos el archivo header_menu creado en el paso 6 Aurelio López Ovando 4
Ya en este momento podemos corres nuestra app y lo que veremos será una pantalla vacía, pero si desplazamos el dedo desde la parte izquierda de la pantalla y son soltar arrastramos hacia la derecha, veremos algo como esto: 12.- Antes de meternos a java, primero vamos a crear dos strings que utilizaremos como bandera de estado para saber si abrimos o cerramos el menú, abrimos el archivo de recursos strings.xml y agregamos las siguientes líneas. 13.- Ahora si abrimos el controlador de java, en mi caso se llama Principal.java y comenzamos con el código. Comenzamos declarando estas tres variables que nos permitirán controlar el menú por medio de un ícono, el cual al pulsarlo se mostrará el menú. Agregamos esta línea invocando un método que vamos a crear a continuación, debajo del oncreate Aurelio López Ovando 5
Este es ek mpetodo que invocamos hace un momento Detectamos que opción del menú se ha pulsado, en cuyo caso senos mostrará un mensaje Toast. Aurelio López Ovando 6
Ahora ya podemos corres la App y ya no tenemos la necesidad de deslizar el dedo sobre la pantalla, porque ahora se nos muestra un ícono que al pulsarlo activa el menú. 2.- Pantalla principal Es momento de crear la pantalla principal, pero no utilizaremos activities, sino fragments. En esta pantalla principal tendremos 3 botones para lanzar alertas en caso de: Problemas familiares. Problemas sentimentales. Problemas de soledad. 1.- Crear un XML de la misma manera como se hizo en el paso 6 y llamarlo fragment_principal. 2.- Las nuevas imágenes que vamos a agregar a esta parte del proyecto las siguientes, para que practiques puedes buscar algunas similares, deben ser copiadas en la carpeta drawable del proyecto. Éstas imágenes nos ayudarán a dar un efecto de parpadeo al presionar cada botón. Son 6 imágenes de 82x82 formato PNG con fondo trasparente Éstas imágenes son las que se visualizarán normalmente en cada botón 3.- En la carpeta drawable debemos crear 3 archivos de recurso (Clic derecho sobre drawable -> New -> Drawable resource file) como se muestra en la imagen de la derecha. Aurelio López Ovando 7
Los llamaremos: btn_problemas_familia, btn_problemas_sentimentales, btn_problemas_soledad. 4.- Cada archivo creado anteriormente, representa a cada botón, es aquí donde utilizaremos las imágenes subidas en el paso 2. Pondré el ejemplo del botón de problemas familiares y de ustedes depende hacer los otros botones. Abrimos el archivo btn_problemas_familia.xml y colocamos el siguiente código: Imagen gris que dará un efecto al presionar el botón. Imagen normal que se visualizará en el botón. El código de los otros dos es similar, solo basta con poner las imágenes correspondientes y listo. 5.- Ahora diseñamos el fragment principal creado en el paso 1 con el siguiente código: Creado en el paso 5 de la primera parte. Aurelio López Ovando 8
6.- Lo que sigue es crear el controlado del fragment que hemos creado, al crear el xml no se nos creó el java de manera automática, eso lo debemos crear nosotros manualmente (clic derecho sobre la carpeta java -> New -> Java Class) El nombre que le pondremos será Principal_Frag. Una vez creado el archivo, nos vamos al código y le decimos que herede de la clase Fragmen, ojo, en este caso puede darse una confusión, debemos elegir el fragment de (Android.App) porque es la versión más nueva. Para no tener problema nos hacemos un espacio dando enter Debemos crear un método abstracto, para eso damos clic derecho y escogemos Generate en la ventana que sigue escogemos Override Methods y buscamos en la lista que nos aparece uno que se llama oncreateview como se muestra en la figura: Y modificamos el código que quede de la siguiente manera Aurelio López Ovando 9
7.- Con lo anterior ya podemos visualizar el fragmente en el activity principal, antes de seguir recordemos que en el paso 11 creamos un FrameLayout en el principal.xml al que llamamos frame, este frame es el que se encargará de visualizar los fragments creados. Regresemos al Principal.java y hacemos lo siguiente: Ya podemos correr el programa y tendremos algo como esto: Aurelio López Ovando 10