Practica 1

Objetivo

Conocer los componentes básicos de material Design, su uso y su aplicación en un ejercicio más
elaborado

Crear un proyecto nuevo

Lo primero que haremos será crear un proyecto nuevo Proyecto en este caso le pondremos
“Practica U3 MD” y lo hacemos siguiendo los pasos.

En nuestra pantalla inicial de android studio nos vamos a la opción de crear un nuevo proyecto

Ponemos su nombre de la aplicación, el dominio, verificamos donde se guardara nuestro

proyecto y posteriormente daremos la opcion de siguiente para seguir con la configuración
En la siguiente opciones escogeremos la opción de permitir que nuestra aplicación pueda correr
en dispositivos Android Ice Cream Sandwich 4.0, por el motivo de que abarca a un gran cantidad
de usuarios. Si tienes dudas puedes darle la opción Ayudame a escoger (Help me choose) y
posteriormente damos siguiente.

En la siguiente pantalla te aparece una serie de plantillas ya establecidas, como es curso que es
un poco introductorio por la materia trabajaremos con una plantilla vacía y así conocer todo el
procedimiento para generar toda la aplicación.

Una vez que se selecciono siguiente y la plantilla que esta vacía, escogeremos ls nombres que
llevaran nuestros componentes principales en esta caso el Layout y el nombre de la

actividad .

En mi caso trabajaremos con el nombre actividad: DrawerActivityMain y layout_drawer.

Una vez que los datos fueron dados de alta le damos Finalizar

Empezaremos dando de alta las librerias que necesitaremos para nuestro ejercicio, en este caso
vamos a abrir el gradle del modulo que se encuentra del lado izquierdo en los archivos del
proyecto

Una vez que se abra encontraresmos datos interesantes como la versión que se esta compilando,
la plataforma base con la que se esta calando e inclusive la version del SDK minimo suportado
que escogiste al crear tu proyecto. Nos desplazaremos al final del archivo y agregaremos las
siguientes dependencias junto con las que ya se tienen, debemos recordar que hay que ser
conscientes de las versiones que tenemos instalada, para esto, las dependecias ya tendran dos
lineas, las primera son para las pruebas unitarias, y la segunda estamos hablando de la libreria
para soporte a versiones anteriores (En este caso los que instalen en la versión 4), tendras algo
como esto:

Revisa muy bien los numeros que tienes al final es probable que varie, todas las librerias que
agreguemos deben de tener el mismo numero que esta primer linea, ya que es la versión de las
librerias que tienes instaladas, en el caso que pongas otra versión es probable que tenga que
descargar primero el gradle la libreria antes de que te permita seguir el proyecto sin errores.
Agregamos la siguientes:

Cambiaras en tu caso los ultimos numeritos por los que manejas en la versión, explicando, la
primera dependencia de la libreria de support-v4 es la que tiene el NavigationDrawer, design para
los componentes graficos como botones flotantes y snackbar, CardView para mostrar los datos y
RecycledView para que pueda mostrar datos de una mejor manera en android. Agregaremos una
mas que es la circleimageview que permitira poner imagenes en forma circular muy sencillo, el
gradle en la parte de dependencias quedaría de la siguiente forma:
Configuracion de estilos

Combinación de colores

La combinación de colores es un aspecto importante en el material design por lo que se

recomienda tener colores que contrasten y que den un buen estilo en diseño, para esto podemos
ayudarnos de la siguiente pagina

http://www.materialpalette.com/

Esta pagina permite encontrar un contraste de color que estuviera de acuerdo al diseño esperado
para esto tenemos que darle clic en la opción “Download” y escogemos el XML.

El archivo tendrá un contenido como el siguiente:

Copiamos su contenido al archivo colors que se encuentra en la carpeta values de nuesto
proyecto en android.

Cambia con respecto a los nombres que vienen preterminados en el proyecto por lo que solo
tendriamos que hacer alumnos cambios pero solo los modificaremos un poco. Lo veremos
marcados como error en la parte de estilos (styles.xml)

Estilos

Los estilos daran una forma de apariencia a nuestra aplicación, por lo que modificaremos algunas
cosas. Lo primero trabajaremos con el “AppTheme” que es el estilo que toma la aplicación por lo
que primero quitaremos la barra de herramientas (ActionBar), y segundo lo adaptaremos a los
colores que bajamos de nuestra pagina, dejando algo como esto:

<resources>
<!-- Base application theme. -->
<style name="AppTheme"
parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryDark">@color/primary_dark</item>
<item name="colorAccent">@color/accent</item>
<!-- Opcionales -->
<item name="android:textColorPrimary">
@color/primary_text</item>
<item name="android:textColorSecondary">
@color/secondary_text
</item>
<item name="android:textColorHint">
@color/secondary_text
</item>
<item name="android:navigationBarColor"
tools:targetApi="21">@color/primary</item>
</style>
</resources>

Notaremos que tendremos un error en la palabra de tools, esto se da porque no esta agregado el
esquema en el contexto por lo que podemo solucionando simplemente agrendo el esquema a la
etiqueta resources

<resources xmlns:tools="http://schemas.android.com/tools">

Agregamos algunos estilos mas aparte de AppTheme, tanto para el navigation drawer como para
el toolbar, para cuando los implementemos de la mejor manera. Quedando de la siguiente
manera

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="AppTheme" ...>

<!-- son para mas adelante -->

<style name="Base.AppTheme.Navigation"
parent="AppTheme">
 </style>
<style name="NavigationViewTheme"
parent="AppTheme">
<item name="android:textAppearanceListItem"
>@style/TextAppearance.AppCompat.Body2
</item>
</style>
<style name="ToolbarTheme" parent="AppTheme">
<item name="android:textColorPrimary">
@android:color/white
</item>
<item name="android:textColorSecondary">
@android:color/white
</item>
</style>
</resources>

Quedando un diseño como el siguiente:

Navigation Drawer

El navigation drawer es un componente el cual esta aparece en el paquete de soporte de la

versión 4, y esta compuesto por las siguientes partes:

Header

Items
Lo primero en este caso vamos a manejar una aplicación que tenga solo dos opciones
calculadora, y boton panico. Por lo que necesitaremos una imagen para el usuario, una para cada
icono, un fondo para el header, en este caso yo usare lo siguiente:

Fondo encabezado:

Fuente: http://www.oxygenna.com/news/brand-new-set-of-40-material-design-backgrounds

Imagen: usuario

Fuente: Google imagenes

Iconos de los menus

Fuente: https://design.google.com/icons/

Los copiamos a la carpeta de drawable para que puedan ser accedidos

Creamos el encabezado

Para crear el encabezado de nuestro proyecto crearemos un nuevo layout, que servira como
encabezado, para esto vamos a ir la sección de “project”, buscamos la opción de layout en la
carpeta de res, damos clic derecho y escogemos nuevo recurso del tipo layout
Escogemos en mi caso que se llama header_drawer_layout y que el root element sea
FrameLayout

Cambiamos algunos parametros, la altura del layout sera de 168dp, y tendra una imagen de
fondo, la imagen de nuestro usuario, nombre y correo.
Utilizaremos el siguiente codigo:

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="168dp"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="Unidad 4"
android:scaleType="centerCrop"
android:src="@drawable/fondo_header"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="32dp">
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="64dp"
android:layout_height="64dp"
android:id="@+id/circleImageView"
android:src="@drawable/cobytecorreo"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Luis Cobian"
 android:textColor="@android:color/white"
android:textSize="18sp"
android:textStyle="bold"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="[email protected]"
android:textColor="@android:color/white"
android:layout_marginLeft="10dp"
/>
</LinearLayout>
</FrameLayout>

Con esto tendremos ya nuestro encabezado que formara parte de nuestro Drawerlayout.

Menu

Para el trabajo poner las opciones en el menu se trabaja con los elementos de tipo menu, que
son solamente un XML con las opciones que podemos elegir en este caso nuestra aplicación solo
tendra tres opciones, calculadora, boton de panico y por ultimo salir de la aplicación.

Entonces creamos el menu de la siguiente manera, damos clic derecho en la carpeta res y
escogemos nuevo archivo de recurso.

Estando ahí le ponemos el nombre, en este caso menu_drawer, y en resource type escogemos
“menu”
No creara un XML, con las posibles opciones, para eso tenemos que dar de alta el nombre que
tendran y los iconos representativos, segun los que habia escogido anteriormente podemos tener
una estructura como la siguiente:

<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/calculadora"
android:title="Calculadora"
android:icon="@drawable/ic_add_box_black_24dp" />
<item
android:id="@+id/btnpanico"
android:title="Boton panico"
android:icon="@drawable/ic_wifi_tethering_black_24dp" />
<item
android:id="@+id/salir"
android:title="Salir"
android:icon="@drawable/ic_power_settings_new_black_24dp" />
</group>
</menu>

Tomar en cuenta los ID que son los que comunicaremos con el codigo de la aplicación
NavigationView

El NavigationView es el componente que permite ver el encabezado y las opciones, se puede

decir que es el aparador para cada uno de los componentes.

Para esto solo tendremos que modificar nuestro layout principal y lo pondremos de la siguiente
manera:

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fitsSystemWindows="true"
tools:context="edu.itstequila.practicau4md.DrawerActivityMain"
android:id="@+id/drawerLayout">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="@+id/contenidoLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/navigationView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/header_drawer_layout"
app:menu="@menu/menu_drawer" />

</android.support.v4.widget.DrawerLayout>

Notemos que nuestro XML de ventana ya no dice el clasico hola mundo y la ultima etiqueta es el
NavigationView, que tiene el layout del encabeza y el menu.
ToolBar

Encontraremos algunas fallas, la primera de ellas, lo dificil que es sacar el navigation drawer por
lo que nos ayudaremos de un toolbar

En las nuevas versiones los toolbar, tambien estan determinados por un layout el cual es
configurable en todo el material Design por lo que empezaremos creando nuestro layout, dando
botón derecho en Res -> archivo de recurso
Dando clic a esta opción le pondremos el nombre de toolbar, luego posteriormente le daremos
que sera de tipo layout y por ultimo que el root sea un toolbar de la version 7

Le damos ok y simplemente generamos el codigo siguiente:

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:background="?attr/colorPrimary"
android:elevation="4dp"
app:theme="@style/ToolbarTheme">
</android.support.v7.widget.Toolbar>

Ya teniendo eso haremos una pequeña modificación a nuestro layout principal, solo agregando la
linea:

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

Quedando de la siguiente manera

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
 android:fitsSystemWindows="true"
tools:context="edu.itstequila.practicau4md.DrawerActivityMain"
android:id="@+id/drawerLayout">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- Agregado -->
<include layout="@layout/toolbar" />

<FrameLayout
android:id="@+id/contenidoLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/navigationView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/header_drawer_layout"
app:menu="@menu/menu_drawer" />
</android.support.v4.widget.DrawerLayout>

Ya tenemos en la vista el toolbar, sin embargo si ejecutamos nuestra aplicación hará exactamente
el mismo comportamiento por lo que tendremos que programar un poco. Abriremos nuestro
archivo de Java y agregaremos lo siguiente que practicamente se reduce al metodo de
cambiarToolBar.

import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;

public class DrawerActivityMain extends AppCompatActivity {

//Agregamos la variable del toolbar
Toolbar toolbar;
 @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_drawer);

cambiarToolBar();
}

private void cambiarToolBar()

{
//buscamos la barra en nuestra vista
toolbar = (Toolbar) findViewById(R.id.toolbar);
//le damos la funcionalidad basica de la barra
setSupportActionBar(toolbar);
//activamos la opcion de home en la barra que es la que usaremos
//para abrir el navigationview
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
//icono que generaremos con la barra
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp);
}
}

Con esto ya tendremos una barra trabajando en nuestra aplicación pero sin embargo el boton
que menu, todavia no tiene una acción por lo que lo configuraremos.

Para poder configurarla el codigo de Java debe de reconocer el drawer por lo que lo buscaremos,
ademas añadimos un metodo para la opción del menu quedando el codigo como el que
mostramos
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
public class DrawerActivityMain extends AppCompatActivity {
//Agregamos la variable del toolbar
Toolbar toolbar;
//configurar drawer
DrawerLayout drawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_drawer);
cambiarToolBar();
configurarDrawer();
}
private void configurarDrawer()
{
drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
}
private void cambiarToolBar()
{
//buscamos la barra en nuestra vista
toolbar = (Toolbar) findViewById(R.id.toolbar);
//le damos la funcionalidad basica de la barra
setSupportActionBar(toolbar);
//activamos la opcion de home en la barra que es la que usaremos
//para abrir el navigationview
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
//icono que generaremos con la barra
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp);
}
//Metodo que detecta la opción de la apertura del drawer
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == android.R.id.home) {
drawerLayout.openDrawer(GravityCompat.START);
return true;
 }
return super.onOptionsItemSelected(item);
}
}

Con este codigo ya tendremos funcionamiendo correctamente el boton home, por lo que podras
abrir el Navigation View de una mayor facilidad

Funcionalidad.

Ahora para terminar nuestra aplicación tendremos que darle funcionalidad a los dos botones.
Para eso crearemos dos fragmentos para poderlos llamar al momento de presionar las opciones,
lo hacemos de la siguiente manera. Clic derecho en la app -> new ->Fragment -> Fragment Blanck

Una vez que escogemos la opcion escogeremos como se llamara el primer fragmento en este
caso pondre los siguientes datos
Repetiremos el paso para el segundo fragmento

Le pondremos a cada uno de los fragmentos un label que los identifique.

Crearemos en el Metodo java del principal un metodo para remplazar el fragmento por uno
nuevo, ademas del metodo para tomar los eventos de las opciones del menu, en el caso de el
metodo para remplazar usaremos algo como esto
private void replaceFragment(Fragment newFragment)
{
getSupportFragmentManager().beginTransaction()
.replace(R.id.contenidoLayout, newFragment)
.commit();
}

Para configurar el drawer y sus funciones, en el metodo onCreate de la clase principal, agregamos
el metodo configurarNavigationView con el siguiente codigo

private void configurarNavigationView()

{
navigationView = (NavigationView) findViewById(R.id.navigationView);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem item) {
switch (item.getItemId()){
case R.id.calculadora:
replaceFragment(FragmentCalculadora
.newInstance("",""));

break;
case R.id.btnpanico:
replaceFragment(FragmentCalculadora
.newInstance("",""));
break;
case R.id.salir:
finish();
break;
}
item.setChecked(true);
drawerLayout.closeDrawers();
return false;
}
});
}

Quedando el codigo completo de la siguiente forma:

package edu.itstequila.practicau4md;
import android.support.design.widget.NavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;

public class DrawerActivityMain extends AppCompatActivity {

//Agregamos la variable del toolbar

Toolbar toolbar;

//configurar drawer
DrawerLayout drawerLayout;

//configurar navigation
NavigationView navigationView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_drawer);

cambiarToolBar();
configurarDrawer();
configurarNavigationView();
}

private void configurarNavigationView()

{
navigationView = (NavigationView) findViewById(R.id.navigationView);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem item) {
switch (item.getItemId()){
case R.id.calculadora:
replaceFragment(FragmentCalculadora
.newInstance("",""));
 break;
case R.id.btnpanico:
replaceFragment(FragmentCalculadora
.newInstance("",""));
break;
case R.id.salir:
finish();
break;
}
item.setChecked(true);
drawerLayout.closeDrawers();
return false;
}
});
}

private void replaceFragment(Fragment newFragment)

{
getSupportFragmentManager().beginTransaction()
.replace(R.id.contenidoLayout, newFragment)
.commit();
}

private void configurarDrawer()

{
drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
}

private void cambiarToolBar()

{
//buscamos la barra en nuestra vista
toolbar = (Toolbar) findViewById(R.id.toolbar);
//le damos la funcionalidad basica de la barra
setSupportActionBar(toolbar);
//activamos la opcion de home en la barra que es la que usaremos
//para abrir el navigationview
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
//icono que generaremos con la barra
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp);
}
 @Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == android.R.id.home) {
drawerLayout.openDrawer(GravityCompat.START);
return true;
}
return super.onOptionsItemSelected(item);
}
}

Por último tendríamos una excepción que es lanzada con nuestra aplicación, por lo que
tendremos que eliminar los métodos Attach en cada uno de los fragmentos.