Navigation Drawer with Fragments Part 1 – MENU AND ACTIVITY THEME – Android Studio Tutorial

Hola, chicos. En los próximos videos, aprenderemos cómo implementar un cajón de navegación en nuestra aplicación con el que podemos cambiar entre diferentes
fragmentos. Construiremos este cajón de navegación
desde cero y lo dividiré en 3 partes diferentes
porque hay bastantes pasos
necesarios En la primera parte haremos algunos preparativos Agregaremos la dependencia necesaria crearemos estos íconos y el archivo de menú y haremos algunos cambios en nuestro
tema de actividad En la parte 2 crearemos el
cajón de navegación y en la parte 3 manejará los
eventos de clic en nuestros íconos aquí y abrirá nuestros fragmentos En el cuadro de descripción debajo de cada
video, encontrará el enlace al código para
este ejemplo Y publicaré las partes restantes
en los próximos días Bien, comencemos Primero tenemos para agregar la dependencia
para la biblioteca de soporte de diseño Porque contiene el
cajón de navegación Así que vamos a nuestro archivo build.gradle
con "(Módulo: aplicación)" en su nombre Y aquí en la parte inferior, agregamos esta dependencia ncy Para esto, copiamos esta copia de esta dependencia de "appcompat"
completamente con la parte de "implementación".
Péguelo una línea debajo.

Y cambiamos "appcompat-v7" a
"diseño". Mantenemos el número de versión igual al
que tenemos aquí arriba. Y cuando hayamos agregado esto, hacemos clic en
"Sincronizar ahora". Espere un momento. , que puede encontrar
cuando hace clic derecho en su paquete Vaya a "Nuevo" -> "Actividad" y aquí puede encontrar "
Actividad del cajón de navegación" Cuando haga clic en esto, obtendrá una actividad completamente con el
cajón de navegación y todo lo necesario código y se verá bastante similar
al que vamos a construir, pero este cajón de navegación no abrirá
fragmentos y, además, si no sabe qué hace cada uno de
los archivos, puede ser muy confuso, por lo que es mejor aprenderlo
construyéndolo desde cero Así que omitiremos esto E implementaremos esto en nuestro actividad vacía
Primero comenzamos con nuestros íconos Entonces abrimos nuestra carpeta "res" aquí abrimos "drawable" y hacemos clic derecho en "drawable" vamos a "Nuevo" y aquí hacemos clic en "Vector Asset" Luego se abre esta ventana y aquí hacemos clic en este ícono Y luego podemos elegir entre muchos
íconos diferentes Y puedes elegir los íconos que quieras
Voy a elegir el mismo que tenía
en el ejemplo El primero fue este ícono de correo aquí Está bien Y lo haré cambie ligeramente el nombre a
"ic_message" Porque esto es lo que dirá el elemento del menú en nuestro cajón de navegación Haga clic en "Siguiente" Y aquí en "Finalizar" Y ahora encontramos nuestro ícono en esta carpeta "dibujable"
aquí Y ahora crearé 4 más íconos, pero lo omitiré en este video porque puede crearlos de la
misma manera que lo hicimos para nuestro ícono de mensaje aquí.

Ahora tengo 5 íconos diferentes para nuestros 5 elementos de menú A continuación, tenemos que preparar un archivo de menú porque esto es lo que llevará nuestros
elementos a nuestro cajón de navegación. Para esto, primero tenemos que crear una carpeta de "menú".
Así que hacemos clic con el botón derecho en " res" Ir a "Nuevo" Y aquí creamos un nuevo
"Directorio de recursos de Android" Desde este menú desplegable aquí
elegimos "menú", que automáticamente cambia el nombre del directorio.
Mantenemos el resto como está y hacemos clic en
"Aceptar" Ahora tenemos esta carpeta de "menú" aquí.

Hacemos clic con el botón derecho en ella y creamos un nuevo "archivo de recursos de menú ". "
tab Y aquí pondremos todos los
archivos de menú que queremos mostrar en nuestro cajón de navegación Los ponemos entre esas etiquetas de "menú"
aquí Y primero creamos un grupo y agregamos el atributo "checkableBehavior" y establecemos esto en "single " Esto asegurará que solo podamos
seleccionar un elemento del menú de los elementos que están dentro de este
grupo Hacemos un paréntesis angular de cierre Y entre es aquí ponemos diferentes
elementos del menú Escribimos "<elemento" tenemos que darle un ID con android:id="@+id/" Y el primero será "nav_message" El siguiente atributo es "android:icon" Aquí escribimos "@drawable/" y luego el nombre del icono En mi ejemplo, este es "ic_message" Y un atributo más "android:title" que es el nombre de
este elemento de menú que será "Mensaje" en este ejemplo Cuando hemos agregado estos 3 atributos, lo cerramos con la barra inclinada y un
paréntesis angular de cierre Y luego copiamos este elemento Para los otros 2 elementos o cuántos desea agregar en su cajón de navegación, cambiaré el segundo a
"nav_chat Cambie el ícono a "ic_chat" Y el título a "Chat" también Y el tercero será "nav_profile" "ic_profile" Y el título también será "Perfil" Y ahora de estos 3 elementos del menú solo podemos
seleccionar 1 Y fuera de este grupo, pondremos 2 íconos más, que son el ícono "enviar" y "compartir" en
nuestro ejemplo, pero se comportarán de manera diferente, no permanecerán seleccionados.

cuando los
elegimos, pero solo desencadenará una acción. Así que no los ponemos en este grupo con
checkableBehavior="single", sino que debajo escribimos "<item". Le damos un "android:title" tal como lo hicimos para los elementos del menú, pero esto creará una sección en lugar de un solo elemento Lo llamaré "Comunicar" Cierra esto Y aquí pongo otro menú Con "<menu" "</menu>" Y aquí pongo 2 elementos más "< item" Y al igual que hicimos anteriormente, agregamos un id
android:id="@+id/nav_share" El ícono será "@drawable/ic_share" y el título también será "Compartir" Cierre esto Copie esto para el segundo elemento "nav_send" "ic_send" Y cambie el texto a "Send" Ahora podemos ver que estas 2 partes
aquí son diferentes Tenemos este "<elemento> <menú> <elemento> <elemento>" y aquí tenemos < grupo> con 3 elementos Y esta parte inferior aquí creará una
sección separada Esta sección tendrá una línea vertical
Y luego el texto "Comunicar" De los 3 elementos en la parte superior podemos
seleccionar 1 Abrirá un fragmento y permanecerá
se seleccionados Desde los íconos de la parte inferior
podemos hacer clic en ellos , desencadenarán una acción,
pero no permanecerán seleccionados Puedes ver que en este ejemplo Estos elementos aquí permanecen seleccionados cuando los elegimos
Pero los de aquí solo desencadenan
una acción Un mensaje Toast en este caso, pero no permanecerán seleccionados Y aquí tenemos esta línea vertical y
el texto "Comunicar".

De acuerdo, de vuelta a nuestro proyecto . Voy a presionar [Ctrl + Alt + L] para reorganizar
esos atributos aquí y ahora se ve así Ahora, lo que también podemos hacer es subir aquí en la primera etiqueta de "menú". Ir antes de este paréntesis angular de cierre y escribir "herramientas:" Si esto es rojo, presionamos [Alt + Enter] Luego agrega este atributo "xmlns:tools=…"
aquí Y luego podemos escribir "showIn" en mayúsculas con una 'I' mayúscula =" " y luego escribimos "navigation_view" Y como puede ver, cambia el ver
a la que veremos en nuestro
cajón de navegación Esto no es necesario, porque esto es
solo para esta ventana de vista previa aquí Si no puede ver esta vista previa ew en su
Android Studio, luego puede ir aquí a "Crear", hacer clic en "Reconstruir proyecto" Y luego tiene que esperar un momento y luego debería mostrar esta vista previa aquí correctamente Bien, y ahora también tenemos que cambiar nuestro
tema de actividad para deshacerse de la barra de acción predeterminada Porque nuestro cajón de navegación debería
aparecer frente a la barra de acción Pero esto no es posible con la
barra de acción predeterminada.

Entonces, tenemos que eliminarlo e implementar una barra de herramientas en su lugar. Una barra de herramientas es básicamente una versión más flexible
de la barra de acción. Para esto, primero debemos deshacernos de la
barra de acción predeterminada. .xml" Y ahora tiene 2 opciones diferentes:
puede eliminar la barra de acción para
toda la aplicación. Para esto, cambie la parte aquí arriba a "Light.NoActionBar". Esto eliminará la barra de acción para todas las
actividades.

Y esta es también la forma más fácil de hacer
esto Si solo desea eliminar la
barra de acción de una actividad en particular como lo haremos en este ejemplo,
entonces revertimos esto Y en su lugar, creamos un estilo separado Esto no es muy complicado Escribimos "<estilo" Tenemos para darle un nombre Y lo llamaremos "AppTheme.NoActionBar" Cierra esto con un paréntesis angular de cierre Y aquí agregamos 2 atributos: "<item" El primero es "windowActionBar" corchete angular de cierre Y aquí pasamos " falso" Ahora un segundo elemento Nuevamente, "<elemento" "windowNoTitle" y establecemos esto en "verdadero" Esos son los mismos 2 atributos que se agregan en el tema "NoActionBar", pero de esta manera podemos agregarlo en un
nivel de actividad y aún así mantener nuestro AppTheme para
toda la aplicación Agregaremos este tema que acabamos de crear a nuestra actividad en el archivo de manifiesto
en un momento Luego se eliminará la
barra de acción, pero esos atributos aquí aún se aplicarán a nuestra actividad porque está configurado como el tema de la aplicación Y todos los demás atributos que agreguemos a este
"AppTheme" se seguirán aplicando a nuestro
tema de actividad Solo sobrescribiremos estos 2 atributos Así que ahora vamos a nuestro archivo de manifiesto aquí arriba
"AndroidManifest.xml" Aquí buscamos nuestro ".MainActivity" Y antes de este corchete angular de cierre agregamos otro atributo "android:theme" y aquí buscamos "@style/AppTheme.NoActionBar" Y ahora esto eliminará la barra de acción
solo para esta actividad en particular.

Las otras actividades mantendrán su barra de acción. Porque están configurados para este
"AppTheme". Bueno, eso es todo para la parte 1. En el
siguiente video, crearemos el cajón de navegación.
Con el diseño y todo. Así que no olvides suscribirte al
canal para no perderte eso. Y si esto El video fue útil, por favor
deja un me gusta Cuídate..

As found on YouTube

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *