Asignatura: Application Development for Mobile Devices.

Tema: La clase Material Design.

I. Introducción.
Las características principales de Material Design son las siguientes.
 Es un lenguaje visual de diseño común, que posee sus propias normas para casi todos los detalles y se mantienen
independientemente del tamaño de pantalla, donde la profundidad, las superficies, los bordes, las sombras y los colores
juegan un papel principal.
 Incluye una renovación de la tipografía Roboto para ésta que pueda adaptarse correctamente a todas las plataformas.
 Es amplio, gráfico e intuitivo. Los elementos fundamentales de diseño se basan en tipografía de imprenta, mallas,
espacio, escala, color y uso de imágenes.
 Los tratamientos visuales se hacen más agradable a la vista. Las opciones adecuadas de color, imágenes de borde a
borde,tipografía a gran escala y el espacio, crean una interfaz gráfica amplia para sumergir al usuario en la
experiencia.
 Con el movimiento se respeta y refuerza al usuario como el motor principal.
 El diseño de material proporciona un conjunto de propiedades para personalizar el tema de diseño de materiales en
color.

Figura 1. Opciones de diseño con MaterialDesign.

En el siguiente ejercicio se diseña un tema personalizado e implanta el control de navegación utilizando el

RecyclerView. Se utilizan cinco atributos principales para personalizar el tema general.

II. Personalización del color con Material Design.

Material Design proporciona un conjunto de propiedades para personalizar el tema del Material Design Color. Se utilizan
cinco atributos principales para personalizar el tema general.
colorPrimaryDark Es el color principal más oscuro de la aplicación y se aplica principalmente al fondo de la
barra de notificación.
colorPrimary Es el color principal de la aplicación. Se aplicará como fondo barra de herramientas.
textColorPrimary Es el color principal del texto. Se aplica a la barra de título.
windowBackground Es el color de fondo predeterminado de la aplicación.
navigationBarColor Es el que define el color de fondo de la barra de navegación del pie de página.

En la siguiente figura se indican las principales zonas donde se aplican los cambios:

Dr. Alejandro S. Cifuentes A. 1

 Figura 2. Las diferentes zonas de cambios con MaterialDesign.

III. Creación del tema Material Design.

1. En Android Studio, seleccionar File ->New Project y llenar todos los detalles necesarios para crear un nuevo
proyecto. Cuando se solicite la selección de una actividad predeterminada, seleccionar Blank Activity y continuar.
2. Abrir el archivo res->values->[Link] y a continuación añadir los valores de string:
<resources>
<string name="app_name">Material Design</string>
<string name="action_settings">Settings</string>
<string name="action_search">Search</string>
<string name="drawer_opn">Open</string>
<string name="drawer_close">Close</string>

<string name="nav_item_home">Home</string>
<string name="nav_item_friends">Friends</string>
<string name="nav_item_notifications">Messages</string>

<!-- navigation drawer item labels -->

<string-array name="nav_drawer_labels">
<item>@string/nav_item_home</item>
<item>@string/nav_item_friends</item>
<item>@string/nav_item_notifications</item>
</string-array>

<string name="title_messages">Messages</string>
<string name="title_friends">Friends</string>
<string name="title_home">Home</string>
</resources>

3. Abrir el archivo res->values->[Link] y añadir los siguientes valores del color. Si no se localiza el archivo
[Link], crear un archivo con ese nombre en la ruta mencionada:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#F50057</color>
<color name="colorPrimaryDark">#C51162</color>
<color name="textColorPrimary">#FFFFFF</color>
<color name="windowBackground">#FFFFFF</color>
<color name="navigationBarColor">#000000</color>
<color name="colorAccent">#FF80AB</color>
</resources>

4. Abrir el archivo res->values->[Link] y añadir las siguientes dimensiones:

<resources>
Dr. Alejandro S. Cifuentes A. 2
 <!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<dimen name="nav_drawer_width">260dp</dimen>
</resources>

5. Abrir el archivo res->values->[Link] y agregar los siguientes estilos. Los estilos definidos en este archivo
son los más comunes en todas las versiones de Android. En este caso se nombra el tema con MyMaterialTheme:
<resources>
<style name="MyMaterialTheme" parent="[Link]">
</style>
<style name="[Link]" parent="[Link]">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>

6. Debajo de la carpeta res, crear una carpeta values-v21. Dentro de la carpeta values-21, crear otro archivo
[Link] con los siguientes estilos. Estos estilos son particulares solamente para Android Lollipop:
<resources>
<style name="MyMaterialTheme" parent="[Link]">
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item
name="android:windowSharedElementEnterTransition">@android:transition/move</item>
<item
name="android:windowSharedElementExitTransition">@android:transition/move</item>
</style>
</resources>

7. Ahora, ya se encuentran listos los estilos básicos de Material Design. Para aplicar el tema, abrir el archivo
[Link] y modificar el atributo android:theme de la etiqueta <application>:
android:theme="@style/MyMaterialTheme"

Por lo anterior, después de aplicar el tema, el contenido del [Link] debe ser similar al siguiente:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="[Link]
package="[Link]" >

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/MyMaterialTheme" >
<activity
android:name=".[Link]"
android:label="@string/app_name" >
<intent-filter>
<action android:name="[Link]" />

<category android:name="[Link]" />

Dr. Alejandro S. Cifuentes A. 3

 </intent-filter>
</activity>
</application>

</manifest>

Ahora, al ejecutar la aplicación, la barra de notificaciones muestra el cambio de color que se mencionó en los estilos.

Figura 3. El cambio de color con estilo.

Añadiendo el Toolbar (ActionBar).

Crear una plantilla independiente para el Toolbar e incluirla en otra plantilla, en donde se desee que el Toolbar se
muestre.
8. Crear el archivo res->layout->[Link] y añadir el siguiente elemento
[Link]. Lo anterior crea una barra de herramientas con un tema y altura
específicos:
<?xml version="1.0" encoding="utf-8"?>
<[Link]
xmlns:android="[Link]
xmlns:local="[Link]
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
local:theme="@style/[Link]"
local:popupTheme="@style/[Link]" />

9. Abrir el archivo de la plantilla principal activity_main.xml y añadir la barra de herramientas utilizando la etiqueta
<include />:
<RelativeLayout xmlns:android="[Link]
xmlns:tools="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
Dr. Alejandro S. Cifuentes A. 4
 <LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:orientation="vertical">

<include
android:id="@+id/toolbar"
layout="@layout/toolbar" />
</LinearLayout>

</RelativeLayout>

Ejecutar la aplicación para verificar la apariencia de la barra de herramientas:

Figura 4. La barra de herramientas.

Enseguida se añadirá un título a la barra de herramientas y se habilitarán las acciones de sus elementos.

10. Utilizar un ícono de búsqueda, por ejemplo , e importarlo al Android Studio como un Image Asset.

11. Para importar el Image Asset al Android Studio, clic derecho en res->New->ImageAsset. Se muestra una
ventana de diálogo para importar el recurso. Localizar el icono de búsqueda que se descargó en el paso anterior,
seleccionar Action Bar and Tab Icons en el Asset Type y asignarle el nombre de recurso con
ic_action_search_ para continuar:

Dr. Alejandro S. Cifuentes A. 5

 Figura 5. Configuración de Image Assset y confirmación de Icon Path.

12. Después de importar el ícono, abrir el archivo res->menu->menu_main.xml y añadir el elemento de menú, como
se indica enseguida:
<menu xmlns:android="[Link]
xmlns:app="[Link]
xmlns:tools="[Link]
tools:context=".MainActivity">

<item
android:id="@+id/action_search"
android:title="@string/action_search"
android:orderInCategory="100"
android:icon="@drawable/ic_action_search"
app:showAsAction="ifRoom" />

<item
android:id="@+id/action_settings"
android:title="@string/action_settings"
android:orderInCategory="100"
app:showAsAction="never" />
</menu>

13. Ahora, abrir el archivo [Link] y realizar los siguientes cambios:

 Heredar la actividad de AppCompatActivity.
 Activar la barra de herramientas, invocando al método setSupportActionBar() pasando el objeto de la barra
de herramientas.
 Sobrescribir los métodos onCreateOptionsMenu() y onOptionsItemSelected() para activar las
acciones de los elementos de la barra de herramientas:
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];

public class MainActivity extends AppCompatActivity {

private Toolbar mToolbar;

@Override
protected void onCreate(Bundle savedInstanceState) {
Dr. Alejandro S. Cifuentes A. 6
 [Link](savedInstanceState);
setContentView([Link].activity_main);

mToolbar = (Toolbar) findViewById([Link]);

setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate([Link].menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in [Link].
int id = [Link]();

//noinspection SimplifiableIfStatement
if (id == [Link].action_settings) {
return true;
}

return [Link](item);
}
}

Después de aplicar los cambios anteriores, ejecutar la aplicación y verificar que se muestran los dos íconos de acción de la
barra de herramientas.

Figura 6. Los iconos de acción de la barra de herramientas.

Dr. Alejandro S. Cifuentes A. 7

 Figura 7. Estructura del proyecto hasta el paso 13.

Añadiendo el Navigation Drawer.

En lugar de utilizar ListView para los elementos del menú, se utiliza ReciclerView en el Material Design. El
ReciclerView es un componente flexible que permite colocar una ventana dentro de un conjunto mayor de datos.
14. En la carpeta java del proyecto, crear tres paquetes: activity, adapter y model y mover el archivo
[Link] al paquete de actividades. Lo anterior mantiene organizado al proyecto.
15. Abrir el archivo [Link] localizado bajo el módulo app y agregar las dependencias siguientes. Después de
agregar las dependencias, seleccionar Build->Rebuild Project para descargar las bibliotecas necesarias:
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile '[Link]:appcompat-v7:22.2.0'
compile '[Link]:recyclerview-v7:22.2.+'
}

16. Debajo del paquete model, crear la clase [Link] con el código siguiente. Este modelo de clase
es una clase POJO que define cada fila en el menú del NavigationDrawer. Revisar la inclusión de paquete del
proyecto al inicio del código, por ejemplo [Link] ... etcétera:
public class NavDrawerItem {
private boolean showNotify;
private String title;

public NavDrawerItem() {

public NavDrawerItem(boolean showNotify, String title) {

Dr. Alejandro S. Cifuentes A. 8

 [Link] = showNotify;
[Link] = title;
}

public boolean isShowNotify() {

return showNotify;
}

public void setShowNotify(boolean showNotify) {

[Link] = showNotify;
}

public String getTitle() {

return title;
}

public void setTitle(String title) {

[Link] = title;
}
}

17. Debajo de res->layout, crear un archivo de plantilla nav_drawer_row.xml y añadir el código siguiente. La
plantilla incluye cada fila en el menú del NavigationDrawer. Si se desea personalizar el elemento del menú
del NavigationDrawer, los cambios se deben realizar en este archivo. En este caso, solamente se posee un
TextView:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="[Link]
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true">

<TextView
android:id="@+id/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="30dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:textSize="15dp"
android:textStyle="bold" />

</RelativeLayout>

18. Descargar un icono del perfil, por ejemplo , y pegarlo en la carpeta drawable. Este paso es opcional, pero este
ícono se utiliza en el encabezado del NavigationDrawer.

19. Crear otro archivo de plantilla fragment_navigation_drawer.xml y añadir el código siguiente. Esta plantilla
incluye al componente completo del NavigationDrawer; además, contiene una sección del encabezado para
mostrar la información del usuario y un RecyclerView para mostrar la lista.
<RelativeLayout xmlns:android="[Link]

android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">

Dr. Alejandro S. Cifuentes A. 9

 <RelativeLayout
android:id="@+id/nav_header_container"
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_alignParentTop="true"
android:background="@color/colorPrimary">

<ImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/ic_profile"
android:scaleType="fitCenter"
android:layout_centerInParent="true" />

</RelativeLayout>

<[Link]
android:id="@+id/drawerList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/nav_header_container"
android:layout_marginTop="15dp" />

</RelativeLayout>

20. Cuando se personaliza el RecyclerView, se necesita una clase adaptadora que incluya la típica plantilla xml.
Para ello, debajo del paquete adaptador, crear la clase [Link] y añadir el código
siguiente. Esta clase adaptadora infla (expande) el archivo nav_drawer_row.xml e incluye al menú del drawer
RecycleView.
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];

import [Link];
import [Link];

public class NavigationDrawerAdapter extends

[Link]<[Link]> {
List<NavDrawerItem> data = [Link]();
private LayoutInflater inflater;
private Context context;

public NavigationDrawerAdapter(Context context, List<NavDrawerItem> data) {

[Link] = context;
inflater = [Link](context);
[Link] = data;
}

public void delete(int position) {

[Link](position);

Dr. Alejandro S. Cifuentes A. 10

 notifyItemRemoved(position);
}

@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = [Link]([Link].nav_drawer_row, parent, false);
MyViewHolder holder = new MyViewHolder(view);
return holder;
}

@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
NavDrawerItem current = [Link](position);
[Link]([Link]());
}

@Override
public int getItemCount() {
return [Link]();
}

class MyViewHolder extends [Link] {

TextView title;

public MyViewHolder(View itemView) {

super(itemView);
title = (TextView) [Link]([Link]);
}
}
}

21. En el paquete activity, crear el archivo para un fragmento [Link]. Para crear un nuevo fragmento,
clic derecho en activity->New->Fragment->Fragment(Blank) y asignar el nombre a la clase del fragmento:
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];

import [Link];
import [Link];

import [Link].R;
import [Link];
import [Link];

public class FragmentDrawer extends Fragment {

private static String TAG = [Link]();

Dr. Alejandro S. Cifuentes A. 11
 private RecyclerView recyclerView;
private ActionBarDrawerToggle mDrawerToggle;
private DrawerLayout mDrawerLayout;
private NavigationDrawerAdapter adapter;
private View containerView;
private static String[] titles = null;
private FragmentDrawerListener drawerListener;

public FragmentDrawer() {

public void setDrawerListener(FragmentDrawerListener listener) {

[Link] = listener;
}

public static List<NavDrawerItem> getData() {

List<NavDrawerItem> data = new ArrayList<>();

// preparing navigation drawer items

for (int i = 0; i < [Link]; i++) {
NavDrawerItem navItem = new NavDrawerItem();
[Link](titles[i]);
[Link](navItem);
}
return data;
}

@Override
public void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);

// drawer labels
titles = getActivity().getResources().getStringArray([Link].nav_drawer_labels);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflating view layout
View layout = [Link]([Link].fragment_navigation_drawer, container,
false);
recyclerView = (RecyclerView) [Link]([Link]);

adapter = new NavigationDrawerAdapter(getActivity(), getData());

[Link](adapter);
[Link](new LinearLayoutManager(getActivity()));
[Link](new RecyclerTouchListener(getActivity(),
recyclerView, new ClickListener() {
@Override
public void onClick(View view, int position) {
[Link](view, position);
[Link](containerView);
}

Dr. Alejandro S. Cifuentes A. 12

 @Override
public void onLongClick(View view, int position) {

}
}));

return layout;
}

public void setUp(int fragmentId, DrawerLayout drawerLayout, final Toolbar toolbar) {

containerView = getActivity().findViewById(fragmentId);
mDrawerLayout = drawerLayout;
mDrawerToggle = new ActionBarDrawerToggle(getActivity(), drawerLayout, toolbar,
[Link].drawer_open, [Link].drawer_close) {
@Override
public void onDrawerOpened(View drawerView) {
[Link](drawerView);
getActivity().invalidateOptionsMenu();
}

@Override
public void onDrawerClosed(View drawerView) {
[Link](drawerView);
getActivity().invalidateOptionsMenu();
}

@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
[Link](drawerView, slideOffset);
[Link](1 - slideOffset / 2);
}
};

[Link](mDrawerToggle);
[Link](new Runnable() {
@Override
public void run() {
[Link]();
}
});

public static interface ClickListener {

public void onClick(View view, int position);

public void onLongClick(View view, int position);

}

static class RecyclerTouchListener implements [Link] {

private GestureDetector gestureDetector;

private ClickListener clickListener;

public RecyclerTouchListener(Context context, final RecyclerView recyclerView,

final ClickListener clickListener) {
[Link] = clickListener;
Dr. Alejandro S. Cifuentes A. 13
 gestureDetector = new GestureDetector(context, new
[Link]() {
@Override
public boolean onSingleTapUp(MotionEvent e) {
return true;
}

@Override
public void onLongPress(MotionEvent e) {
View child = [Link]([Link](), [Link]());
if (child != null && clickListener != null) {

[Link](child,
[Link](child));
}
}
});
}

@Override
public boolean onInterceptTouchEvent(RecyclerView rv, MotionEvent e) {

View child = [Link]([Link](), [Link]());

if (child != null && clickListener != null && [Link](e))
{
[Link](child, [Link](child));
}
return false;
}

@Override
public void onTouchEvent(RecyclerView rv, MotionEvent e) {
}

@Override
public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {

public interface FragmentDrawerListener {

public void onDrawerItemSelected(View view, int position);
}
}

22. Por último, abrir el archivo de la plantilla principal activity_main.xml y modificar el código como se indica
enseguida. En esta plantilla se está agregando [Link] para
mostrar el menú del NavigationDrawer. También, se debe asignar la ruta correcta de FragmentDrawer en
el elemento <fragment>. NOTA: Asignar con cuidado esta ruta:
<[Link]
xmlns:android="[Link]
xmlns:app="[Link]
xmlns:tools="[Link]
android:id="@+id/drawer_layout"
Dr. Alejandro S. Cifuentes A. 14
 android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<LinearLayout
android:id="@+id/container_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<include
android:id="@+id/toolbar"
layout="@layout/toolbar" />
</LinearLayout>

<FrameLayout
android:id="@+id/container_body"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />

</LinearLayout>

<fragment
android:id="@+id/fragment_navigation_drawer"
android:name="[Link]"
android:layout_width="@dimen/nav_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
app:layout="@layout/fragment_navigation_drawer"
tools:layout="@layout/fragment_navigation_drawer" />

</[Link]>

Ahora, se tienen todos los archivos, de las plantillas y clases, en su lugar correcto. Enseguida, se realizan los cambios
necesarios en el archivo MainActivity para el funcionamiento del NavigationDrawer.

23. Abrir el archivo [Link] y realizar los siguientes cambios:

 Implantar la actividad desde [Link] y añadir el método sobrescrito
onDrawerItemSelected().
 Crear una instancia de FragmentDrawer y asignar los escuchas a los elementos de selección:
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];

Dr. Alejandro S. Cifuentes A. 15

 public class MainActivity extends AppCompatActivity implements
[Link] {

private Toolbar mToolbar;

private FragmentDrawer drawerFragment;

@Override
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link].activity_main);

mToolbar = (Toolbar) findViewById([Link]);

setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);

drawerFragment = (FragmentDrawer)

getSupportFragmentManager().findFragmentById([Link].fragment_navigation_drawer);

[Link]([Link].fragment_navigation_drawer, (DrawerLayout)
findViewById([Link].drawer_layout), mToolbar);
[Link](this);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate([Link].menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in [Link].
int id = [Link]();

//noinspection SimplifiableIfStatement
if (id == [Link].action_settings) {
return true;
}

return [Link](item);
}

@Override
public void onDrawerItemSelected(View view, int position) {

}
}

Ahora, si se ejecuta la aplicación, se muestra el NavigationDrawer con un encabezado y una lista con algunos

Dr. Alejandro S. Cifuentes A. 16

 elementos:

Figura 8. El NavigationDrawer.

Implantación de la Selección de Elementos del NavigationDrawer.

Aunque el panel de navegación está funcionando, se puede notar que no se activa la selección de elementos de la lista. Esto
se debe a que todavía se debe aplicar el clic de escucha a los elementos de RecyclerView.
Debido a que se tienen tres elementos de menú en el panel de navegación (Home, Friends y Messages), se deben crear
tres clases de segmentos independientes para elemento del menú.
24. En res->layout, crear un archivo para una plantilla, nombrarla fragment_home.xml y añadir el código siguiente:
<RelativeLayout xmlns:android="[Link]
xmlns:tools="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="[Link]">

<TextView
android:id="@+id/label"
android:layout_alignParentTop="true"
android:layout_marginTop="100dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textSize="45dp"
android:text="HOME"
android:textStyle="bold"/>

<TextView
android:layout_below="@id/label"
android:layout_centerInParent="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="12dp"
android:layout_marginTop="10dp"
Dr. Alejandro S. Cifuentes A. 17
 android:gravity="center_horizontal"
android:text="Edit fragment_home.xml to change the appearance" />

</RelativeLayout>

25. En el paquete activity, crear una clase de fragmento, nombrarla [Link] y añadir el código siguiente:
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];

public class HomeFragment extends Fragment {

public HomeFragment() {
// Required empty public constructor
}

@Override
public void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {

View rootView = [Link]([Link].fragment_home, container, false);

// Inflate the layout for this fragment

return rootView;
}

@Override
public void onAttach(Activity activity) {
[Link](activity);
}

@Override
public void onDetach() {
[Link]();
}
}

26. Crear otras dos clases de fragmentos para [Link] y [Link] y sus respectivos
archivos de plantilla fragment_friends.xml y fragment_messages.xml, y añadir el código como se hizo en los
dos pasos anteriores.
27. Ahora, abrir el archivo [Link] y realizar los cambios siguientes. En el siguiente código:
 El método displayView() muestra la vista del fragmento dependiendo de la selección del elemento en el menú
de navegación. Este método debe invocarse en el método onDrawerItemSelected() para mostrar la vista
correspondiente cuando se selecciona un elemento del menú de navegación:
Dr. Alejandro S. Cifuentes A. 18
 import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];

public class MainActivity extends ActionBarActivity implements

[Link] {

private static String TAG = [Link]();

private Toolbar mToolbar;

private FragmentDrawer drawerFragment;

@Override
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link].activity_main);

mToolbar = (Toolbar) findViewById([Link]);

setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);

drawerFragment = (FragmentDrawer)

getSupportFragmentManager().findFragmentById([Link].fragment_navigation_drawer);
[Link]([Link].fragment_navigation_drawer, (DrawerLayout)
findViewById([Link].drawer_layout), mToolbar);
[Link](this);

// display the first navigation drawer view on app launch

displayView(0);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate([Link].menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in [Link].
int id = [Link]();

//noinspection SimplifiableIfStatement
Dr. Alejandro S. Cifuentes A. 19
 if (id == [Link].action_settings) {
return true;
}

if(id == [Link].action_search){
[Link](getApplicationContext(), "Search action is selected!",
Toast.LENGTH_SHORT).show();
return true;
}

return [Link](item);
}

@Override
public void onDrawerItemSelected(View view, int position) {
displayView(position);
}

private void displayView(int position) {

Fragment fragment = null;
String title = getString([Link].app_name);
switch (position) {
case 0:
fragment = new HomeFragment();
title = getString([Link].title_home);
break;
case 1:
fragment = new FriendsFragment();
title = getString([Link].title_friends);
break;
case 2:
fragment = new MessagesFragment();
title = getString([Link].title_messages);
break;
default:
break;
}

if (fragment != null) {
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction fragmentTransaction = [Link]();
[Link]([Link].container_body, fragment);
[Link]();

// set the toolbar title

getSupportActionBar().setTitle(title);
}
}
}

Entonces, si ahora se ejecuta la aplicación, se muestra que sí funciona la selección del menú del panel de navegación
ydebajo de la barra de herramientas se muestran los correspondientes elementos:

Dr. Alejandro S. Cifuentes A. 20

 Figura 9. Muestra de cada fragmento desde el menú del panel de navegación.

Ejercicio 1: Cambiar el texto de todos los componentes del idioma inglés al idioma español.

Ejercicio 2: Probar la ejecución del código anexo [Link] y después agregarlo a la ejecución de la aplicación móvil.

NOTA: Generar un reporte de la aplicación final. Agregar la carpeta comprimida del proyecto en un archivo con la sintaxis
[Link] y enviarla al sitio indicado por el profesor.

ANEXO.
El código [Link].

import [Link].*;
import [Link].*;
import [Link].*;
public class K extends JPanel{
JFrame jf;
float x, y, dir;
int level = 1;
public K(){
jf = new JFrame("K");
addMouseListener(new MouseAdapter(){
public void mousePressed(MouseEvent evt){
level++;
repaint();
}
});
[Link](this);
[Link](true);
}
public void paintComponent(Graphics g){
int length = getWidth()/2;
y = (float)(getHeight()/2 + [Link]([Link](30))*length/2);
x = [Link]()/4;
[Link]([Link]);
[Link](0, 0, getWidth(), [Link]());
Dr. Alejandro S. Cifuentes A. 21
 [Link]([Link]);
dir = 0;
dK(g, length, level);
dir -= 120;
drawKoch(g, length, level);
dir -= 120;
drawKoch(g, length, level);
}
public void dK(Graphics g, double len, int n){
if (n==0){
double dirRad = [Link](dir);
double xInc = len * [Link](dirRad); // x increment
double yInc = len * [Link](dirRad); // y increment
float x1 = x + (float)xInc;
float y1 = y + (float)yInc;
[Link]((int)x,(int)y,(int)x1,(int)y1);
x = x1;
y = y1;
}else{
dK(g, len/=3, --n);
dir += 60;
dK(g, len, n);
dir -= 120;
dK(g, len, n);
dir += 60;
dK(g, len, n);
}
}
public static void main(String [] args){
new K();
}
}

Dr. Alejandro S. Cifuentes A. 22