Aplicaciones Mviles

Navigation Drawer Android Studio

El Navigation Drawer es una gran forma de organizar tu app ya que permite
disponer de todo el espacio en pantalla adems de ser conocido por los

By: Elar Edgar, HANCCO QUISPE

By: Elar Edgar, HANCCO QUISPE

usuarios al utilizarse en la gran mayora de las apps, entre ellas las de Google.

By: Elar Edgar, HANCCO QUISPE

Aplicaciones Mviles

El panel lateral de navegacin es un panel en el que se muestran las

principales opciones de navegacin de la app en el borde izquierdo de la
pantalla. La mayor parte del tiempo est oculto, pero aparece cuando el usuario
desliza un dedo desde el borde izquierdo de la pantalla o, mientras est en el
nivel superior de la app, el usuario toca el cono de la app en la barra de
acciones.

Crear un diseo de panel lateral

Para agregar un panel lateral de navegacin, declara tu interfaz de usuario con
un objeto DrawerLayoutcomo vista raz de tu diseo. Dentro del DrawerLayout,
agrega una vista que tenga el contenido principal de la pantalla (tu diseo
principal cuando el panel lateral est oculto) y otra vista con el contenido del
panel lateral de navegacin.
Por ejemplo, en el siguiente diseo se usa DrawerLayout con dos vistas secundarias:
un FrameLayoutcon el contenido principal (que hace aparecer un Fragment en tiempo de

<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- The navigation drawer -->
<ListView android:id="@+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"

By: Elar Edgar, HANCCO QUISPE

By: Elar Edgar, HANCCO QUISPE

By: Elar Edgar, HANCCO QUISPE

ejecucin) y un ListView para el panel lateral de navegacin.

Aplicaciones Mviles

android:divider="@android:color/transparent"
android:dividerHeight="0dp"
android:background="#111"/>
</android.support.v4.widget.DrawerLayout>

Pasos para personalizar el Men Drawer.

Iniciaremos por cambiar el contenido del Drawer Header:

By: Elar Edgar, HANCCO QUISPE

By: Elar Edgar, HANCCO QUISPE

Seguir los pasos: clic en el archivo navigation_drawer_header.xml

By: Elar Edgar, HANCCO QUISPE

By: Elar Edgar, HANCCO QUISPE

By: Elar Edgar, HANCCO QUISPE

Aplicaciones Mviles

By: Elar Edgar, HANCCO QUISPE

Aplicaciones Mviles

Escriba

el

texto

que

desee,

de

preferencia

escriba el nombre de la
organizacin.

Cambiar el texto de los menus.

By: Elar Edgar, HANCCO QUISPE

By: Elar Edgar, HANCCO QUISPE

Pasos a seguir: Darle doble clic en el archivo navigation_drawer_menu.xml

By: Elar Edgar, HANCCO QUISPE

Aplicaciones Mviles

Cdigos para mostrar el primer men es el siguiente:

<item
android:checked="true"
android:id="@+id/item_navigation_servicios"
android:icon="@drawable/ic_inbox_black_24dp"
android:title="Servicios" />

Cambiar el ID, segn el men se va creando para su App.

Ejemplo: Solamente la ltima palabra cambiaremos para ser ms ordenados.
android:id="@+id/item_navigation_

servicios"

En tittle escribir el texto (men) a mostrar en el

men.
android:title="Servicios" />

En el emulador el resultado ser de esta forma.

Crear contenidos para mostrar en la aplicacin.

Crear contenidos para el men servicios para poder mostrar en la aplicacin
Pasos a seguir: Crearemos un archivo xml dentro de la carpeta layout.

By: Elar Edgar, HANCCO QUISPE

By: Elar Edgar, HANCCO QUISPE

Clic derecho sobre la carpeta layout/new/Layout resource file

En esta ventana le asignaremos el nombre de activity_servicios.xml

Los nosbres sin espacio.

By: Elar Edgar, HANCCO QUISPE

Aplicaciones Mviles

Cdigo del archivo activity_servicios.xml

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_alignParentTop="true"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:textAppearance="?android:attr/textAppearanceLarge" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ToolbarTheme" />
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?actionBarSize"
android:orientation="vertical"
android:padding="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">

android:textAppearance="?android:attr/textAppearanceLarge"
android:paddingBottom="8dp"
android:text="Servicios"
android:textColor="#15171a" />
<!-- Contenido a mostrar-->

By: Elar Edgar, HANCCO QUISPE

By: Elar Edgar, HANCCO QUISPE

<!-- Ttulo del contenido a mostrar-->

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:paddingBottom="8dp"
android:text="Brindamos servicios de mantenimiento de
computadoras y laptops."
android:textColor="#787a7b" />
</LinearLayout>
</ScrollView>
</RelativeLayout>

By: Elar Edgar, HANCCO QUISPE

Aplicaciones Mviles

Resultado obtenido.

Codigo java para mostrar el contenido (archivo activity_servicios.xml)

servicios, doble clic sobre la carpeta del proyecto que esta dentro de la carpeta
java. Crearemos una clase java.
Clic derecho sobre la carpeta del proyecto/New/Java Class

By: Elar Edgar, HANCCO QUISPE

By: Elar Edgar, HANCCO QUISPE

Le asignaremos el nombre de MainServicios, clic en el botn OK.

By: Elar Edgar, HANCCO QUISPE

Aplicaciones Mviles

El resultado obtenido ser como se la imagen.

Escribir el siguiente cdigo en la clase MainServicios.java

public class MainServicios extends AppCompatActivity {
Toolbar toolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_servicios);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

MainServicios.this.getTheme().resolveAttribute(R.attr.colorPrimaryDark
, typedValueColorPrimaryDark, true);
final int colorPrimaryDark = typedValueColorPrimaryDark.data;
if (Build.VERSION.SDK_INT >= 21) {
getWindow().setStatusBarColor(colorPrimaryDark);
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {

By: Elar Edgar, HANCCO QUISPE

By: Elar Edgar, HANCCO QUISPE

TypedValue typedValueColorPrimaryDark = new TypedValue();

getMenuInflater().inflate(R.menu.menu_settings, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}

By: Elar Edgar, HANCCO QUISPE

Aplicaciones Mviles

Para los de ms clases que va a crear, tener encuenta lo siguiente.

Deveran ser iguales, es el nombre de la clase java creada.

Crear enlace para los menus.

public class MainActivity extends AppCompatActivity {

By: Elar Edgar, HANCCO QUISPE

By: Elar Edgar, HANCCO QUISPE

Abrir el archivo MainActivity.java, el cdigo que contiene es el siguiente:

DrawerLayout drawerLayout;
Toolbar toolbar;
ActionBar actionBar;
TextView textView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
actionBar = getSupportActionBar();
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp);
actionBar.setDisplayHomeAsUpEnabled(true);
drawerLayout = (DrawerLayout)
findViewById(R.id.navigation_drawer_layout);

By: Elar Edgar, HANCCO QUISPE

10

Aplicaciones Mviles

NavigationView navigationView = (NavigationView)

findViewById(R.id.navigation_view);
if (navigationView != null) {
setupNavigationDrawerContent(navigationView);
}
setupNavigationDrawerContent(navigationView);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it
is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

private void setupNavigationDrawerContent(NavigationView

navigationView) {
navigationView.setNavigationItemSelectedListener(
new NavigationView.OnNavigationItemSelectedListener()
{
@Override
public boolean onNavigationItemSelected(MenuItem
menuItem) {
textView = (TextView)
findViewById(R.id.textView);
switch (menuItem.getItemId()) {
case R.id.item_navigation_servicios:
menuItem.setChecked(true);
textView.setText(menuItem.getTitle());
Toast.makeText(MainActivity.this,
"elhasi.com " + menuItem.getTitle().toString(),
Toast.LENGTH_SHORT).show();

By: Elar Edgar, HANCCO QUISPE

By: Elar Edgar, HANCCO QUISPE

@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
drawerLayout.openDrawer(GravityCompat.START);
return true;
}
return super.onOptionsItemSelected(item);
}

drawerLayout.closeDrawer(GravityCompat.START);
Intent intentp = new
Intent(MainActivity.this, MainServicios.class);
startActivity(intentp);
return true;
}
return true;
}
});
}
}

By: Elar Edgar, HANCCO QUISPE

11

Aplicaciones Mviles

Nos ubicaremos en las lneas de cdigo:

private void setupNavigationDrawerContent(NavigationView
navigationView) {
navigationView.setNavigationItemSelectedListener(
new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem
menuItem) {
textView = (TextView) findViewById(R.id.textView);
switch (menuItem.getItemId()) {

Tenemos el cdigo: El cdigo que se muestra es la que se encarga de enlazar

para cada men, para cada men que desee enlazar tendr que escribir desde
el case hasta return true;
Es esta zona esta escrito el ID del men que creamos en los pasos anteriores.

By: Elar Edgar, HANCCO QUISPE

By: Elar Edgar, HANCCO QUISPE

case R.id.item_navigation_servicios:
menuItem.setChecked(true);
textView.setText(menuItem.getTitle());
Toast.makeText(MainActivity.this, "elhasi.com " +
menuItem.getTitle().toString(), Toast.LENGTH_SHORT).show();
drawerLayout.closeDrawer(GravityCompat.START);
Intent intentp = new Intent(MainActivity.this,
MainServicios.class);
startActivity(intentp);
return true;

Crearemos variables diferentes para cada men, si nos sfijamos es el mismo

texto, recuerde que esta variable devera de ser nombres diferentes para cada
men.
Ejemplo:

By: Elar Edgar, HANCCO QUISPE

12

Aplicaciones Mviles

Cdigos para el menu Nosotros quedara de esta forma.

case R.id.item_navigation_nosotros:
menuItem.setChecked(true);
textView.setText(menuItem.getTitle());
Toast.makeText(MainActivity.this, "elhasi.com " +
menuItem.getTitle().toString(), Toast.LENGTH_SHORT).show();
drawerLayout.closeDrawer(GravityCompat.START);
Intent nosotros = new Intent(MainActivity.this,
MainServicios.class);
startActivity(nosotros);
return true;
El ID es diferente osea es el ID del menu, y las varibles se llaman nosotros.

By: Elar Edgar, HANCCO QUISPE

By: Elar Edgar, HANCCO QUISPE

El cdigo va quedando como se muestra.

Personalizar Texto para el Toolbar.

By: Elar Edgar, HANCCO QUISPE

13

Aplicaciones Mviles

Para poder personalizar nos aproximamos a la carpeta values, doble clic sobre
el archivo string.xml al contenido que muestra, escribir la line de cdigo:
<string name="title_activity_servicio">Servicios</string>

En nombre (name) deber de ser diferente para cada menu, el texto de la

misma forma deber de ser diferenete segn al menu y al contenido que se
mostrara.
Iremos al archivo AndroidManifest.xml que esta dentro de la carpeta

By: Elar Edgar, HANCCO QUISPE

By: Elar Edgar, HANCCO QUISPE

manifest.

By: Elar Edgar, HANCCO QUISPE

14

Aplicaciones Mviles

Escribir el cdigo debajo de </activity>

<activity
android:name=".MainServicios"
android:label="@string/title_activity_servicio"
android:parentActivityName=".MainActivity" >
</activity>

Resultado optenido es la siguiente:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="elarcorp.com.tecnotronic" >
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category
android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<!--- Para retornar atras -->

<activity
android:name=".MainServicios"
android:label="@string/title_activity_servicio"
android:parentActivityName=".MainActivity" >
</activity>
</application>

By: Elar Edgar, HANCCO QUISPE

By: Elar Edgar, HANCCO QUISPE

<!--- Fin Para retornar atras -->

</manifest>

Es el nombre de la clase, es el nombre texto de toolbar que esta escribo en el

archivo string.xml

By: Elar Edgar, HANCCO QUISPE

15

Aplicaciones Mviles

Los cdigo que escribimos

<activity
android:name=".MainServicios"
android:label="@string/title_activity_servicio"
android:parentActivityName=".MainActivity" >
</activity>

Nos permiten dar un paso atrs

By: Elar Edgar, HANCCO QUISPE

By: Elar Edgar, HANCCO QUISPE

Resultado final en el emulador.

By: Elar Edgar, HANCCO QUISPE

16

By: Elar Edgar, HANCCO QUISPE

By: Elar Edgar, HANCCO QUISPE

Aplicaciones Mviles

By: Elar Edgar, HANCCO QUISPE

17

By: Elar Edgar, HANCCO QUISPE

By: Elar Edgar, HANCCO QUISPE

Aplicaciones Mviles

By: Elar Edgar, HANCCO QUISPE

18