Introduccin a la programacin en Android LGoogle I/O 2014 ser recordado por ser uno de los ms android-cntricos de todos, no solo presentando novedades a nivel de mviles como estbamos acostumbrados, si no incursionando en campos nuevos para la plataforma como: wearables y automviles. Adems, por primera vez, una versin Developer Preview llamada: Android L, para que podamos experimentar con el SDK y generar el mayor feedback posible, antes del lanzamiento oficial en dispositivos.

Android L es uno de los cambios ms grandes que a tenidoAndroiden mucho tiempo, lo que se siente como una verdadera actualizacin ms que una extensin. Dichos cambios a grosso modo se dividen en:Una nueva UI:

Se estrena Material Design, por lo que ahora, tanto el operativo, como las aplicaciones deben de seguir los principios del nuevo lenguaje de diseo de Google. Material Design contiene todos los elementos a nivel de UI, movimiento e interaccin, para generar UX nunca vista en la plataforma. Adems se agregan 2 nuevos widgets:

CardView:Nos permite agrupar casi cualquier tipo y nmero de elementos en una vista que, al final, resulta un tipo Tarjeta como lo visto en Google Now. Al venir de la librera de soporte, este nuevo widget funciona igual en versiones anteriores a L.

RecyclerView:Una actualizacin de ListView. Esta vez es mas fcil de usar, optimiza recursos, y ofrece animaciones predeterminadas. til para su uso en colecciones dinmicas (ListView y GridView).

Haciendo que todo fluya como la seda, sin embargo, las aplicaciones ahora requieren ms espacio de almacenamiento en tu dispositivo, pero velocidad y optimizacin de batera lo valen.

Nuevo Runtime:ART (AndroidRunTime) se vuelve la mquina virtual por defecto sustituyendo a Dalvik, incluye tres importantes cambios:Compilacin por delante del tiempo.Mejora del recolector de basura.Mejora las opciones de debug.Renovado Sistema de Notificaciones:

Las notificaciones es algo que a tenido Android desde su primera versin, ahora no solo siguen los principios de Material Design, sino que, tenemos disponibles nuevos valores para ellas:Visibilidad privada:Muestra informacin bsica, como el icono de la notificacin, pero oculta el contenido completo de la notificacin.Visibilidad publica:Muestra el contenido completo de la notificacin.Visibilidad secreta:No muestra ms que el icono de la notificacin en la barra de estado.Incremento de Eficiencia:

Sumado a todo, se agregaron elementos que ayudan a monitorear nuestra aplicacin y consultar varios estados de ella, tal es el caso de Project Volta, un API capaz de mostrarnos el consumo de energa a nivel de aplicacin, as podemos parar o matar los procesos que estn consumiendo mas recursos de los necesarios o que no es necesario que se estn ejecutando.

Tu primera aplicacin en Android L

Ahora, vamos a crear una aplicacin con algunas de las novedades deAndroidL. La aplicacin simular un feed de los cursos deMejorando.la. Usaremos los dos nuevos widgets: Card View y Recycler View, ademas de un Float Button, todo siguiendo los principios del nuevo Material Design. Es complicado hacer un tutorial paso a paso de ciertos temas extras que contiene la aplicacin y solo hare nfasis en los temas nuevos de Android L.

El cdigo se encuentra disponible en:https://github.com/thespianartist/FeedCursosMejorandola

Requerimientos

Android Studio Beta (Su version mas reciente)

Dispositivo corriendo Android L o en su defecto crear una Mquina Virtual con dicho nivel de API.

Con el SDK Manager tener instalados:Android SDK Platform-Tools 20Android SDK Build-Tools 20SDK Platform Android L (API 20, L Preview)y cualquier System Image si se requiere una mquina virtual.Android Support Library 20Android Support Repository 6

Ya verificando que se tienen todo instalado, podremos crear un nuevo proyecto Hola mundo con ese nivel de API para comprobar que todo esta bien, el ejemplo que usaremos, solo contiene una actividad con un fragmento en ella.

Declarando el tema: Material Design

Lo nico que necesitamos para que una aplicacin tenga aspecto Material Design es el configurarlo como tema. Si observamos los archivos destyles.xml, contenidos en las diferentes carpetas devalues, en la carpeta donde se guardan todos los recursos no javaresnos daremos cuenta que tenemos disponible un nuevo temaparentllamado:Material.

Materialtiene las mismas variaciones deHolo(como Light con Dark ActionBar) pero ademas, nos ayuda a personalizar los colores de la UI de manera ms sencilla. De inmediato podemos asignar 3 campos al tema: colorPrimary, colorPrimaryDark y accent.

colorPrimarydebe ser el color caracterstico de la marca a la que pertenece la aplicacin,colorPrimaryDarksu variacin un poco ms oscura pero nada ajeno al color primario original y por ltimoaccentser un color que resalte sobre toda nuestra aplicacin y lo hace un contraste interesante, para ms informacin sobre los colores a usar visitahttp://www.google.com/design/spec/style/color.html

Ahora tambin podemos declarar algunos valores globales de color para que sean utilizados en cualquier parte de la aplicacin gracias a la etiqueta. En el ejemplo configuramos los 3 valores de color de personalizacin de tema, ademas de un cuarto color que corresponde al color que usaremos en elFloat Button. La imagen de abajo describe la personalizacin completa de la aplicacin enstyles.xml:

Cdigo XML : @color/primary @color/primary_dark @color/accent

#056f00 #259b24 #ffea00 #ffff00

Uso de CardView

Para usar los dos nuevos widgets necesitamos compilar las dependencias correspondientes, estas se encuentra dentro de el conjunto de libreras de soporte y pueden ser incluidas de la siguiente manera, en el archivobuild.gradlede la raz del directorio app:

El uso deCardViewes muy sencillo, al final se trata de un widget que otorga dicho UI a lo que se encuentre entre el. Uno de sus atributos es el poder asignarbordes redondeadosa la carta:card_view:cardCornerRadius="2dp". Ademas existe un atributoandroid:foreground="?android:attr/selectableItemBackground"para que la tarjetaobtenga la animacincaracterstica deMaterial Designal hacer clic sobre ella. La vista que tenemos como preview es la de un curso sin datos, a esto lo llamaremositemLayout (row.xml)y ser usado para nuestroRecyclerView.

En el ejemplo,cada cursose muestra comotarjeta, dicho curso esta compuesto de un ImageView y 2 TextViewacomodados mediante un RelativeLayout. Lo nico que falta para que dicho UI tome forma de tarjeta es, como mencione anteriormente, colocarlos entre las etiquetascon la configuracin que usted quiera. En el ejemplo se consider de la siguiente manera:

Cdigo XML :

Uso de RecyclerView

RecyclerViewes una mejora de lo antes visto en ListView o GridView. Es un widget que despliega vistas que comparten la misma estructura de vista de los datos, sea , son vistas que se repiten en forma, pero no en informacin.RecyclerViewnos proporciona unLayoutManagerque es elencargadode asignar elacomodo de los elementos(Grid o Linear), aunque por el momento solo esta disponible Linear (como lista). Para que esto funcione necesitamos construir nuestroAdaptery a su vez, elAdapternecesita de unDataset, sea un conjunto (arreglo) de objetos.

ElDatasetrequiere de un arreglo de objetos a mostrar. Regularmente un objeto se crea mediante algo llamadoPOJO(Plain Old Java Object) y dicho POJO contiene todas las caractersticas del objeto. En este caso, el Objeto es cada curso y el curso contiene:ID, name y description. Ya abran notado que estos son los campos que se tienen para llenar cada elemento dentro delCardView, elDataset de esta aplicacin es un arreglo de objetos tipo curso. Estedatasetes construido a partir de un JSON local llamadocursos.json, el parseo y manejo se encuentra en una clase llamadaReadLocalJSONpor si tienen inquietud de como consumir un archivo JSON local.

Cdigo Java :public class Course {

private Integer id; private String name; private String description;

public String getName() { return name; }

public void setName(String name) { this.name = name; }

public String getDescription() { return description; }

public void setDescription(String description) { this.description = description; }

public Integer getId() { return id; }

public void setId(Integer id) { this.id = id; }}

Crear elAdapterno es tan complicado, lo primero que debemos hacer es crear una clase (en la aplicacin se llamaCoursesAdapter) que extienda deRecyclerView.Adaptere Implementar los mtodos requeridos. El constructor recibe dos parmetros, uno es elDataset(Arreglo de objetos del tipo Curso) y el otro es elItemLayout(es el layout que creamos con el CardView y describe cada curso)

Cdigo Java : private ArrayList courses; private int itemLayout;

public CoursesAdapter(ArrayList data, int itemLayout){ courses = data; this.itemLayout = itemLayout; }

La clase internaViewHolderque extiende deRecyclerView.ViewHoldercontiene todos los llamados a los widgets contenidos en elItemLayout(compuesto de unImageView y 2 TextView), por lo que se garantiza que el llamado es solo una vez, haciendo que consuma menos recursos a nivel de batera y procesamiento. Anteriormente unViewHolderera una buena prctica, ahora es algo obligatorio. Ademas se implementa unAdapterView.OnClickListenerpara que cada elemento en el listado tenga un evento OnClick, por el momento solo muestra un pequeo mensaje.

Cdigo Java :public static class ViewHolder extends RecyclerView.ViewHolder implements AdapterView.OnClickListener {

public ImageView image; public TextView name; public TextView description;

public ViewHolder(View itemView) { super(itemView);

itemView.setOnClickListener(this);

image = (ImageView) itemView.findViewById(R.id.image); name = (TextView) itemView.findViewById(R.id.name); description = (TextView) itemView.findViewById(R.id.description); }

@Override public void onClick(View view) { Toast.makeText(view.getContext(),"OnItemClick :D", Toast.LENGTH_SHORT).show(); }

}

El mtodoonCreateViewHolderse encarga de inflar la vista delItemLayouty el mtodoonBindViewHolderes el encargado de pasar la informacin delDataseta sus respectivos lugares en elItemLayout. Ademas de recordarle alviewHolderel estado actual de los elementos delItemLayout. Al final el mtodogetItemCountnos permite conocer el tamao o cantidad de elementos que contiene nuestroRecyclerViewque es el mismo que el tamao deldataset. Y listo, todo lo anterior en conjunto crea nuestroAdapterpara poder usar nuestro RecyclerView.

Cdigo Java : @Override public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) { View v = LayoutInflater.from(viewGroup.getContext()).inflate(itemLayout, viewGroup, false); return new ViewHolder(v); }

@Override public void onBindViewHolder(ViewHolder viewHolder, int position) {

Course course = courses.get(position); viewHolder.name.setText(course.getName()); viewHolder.description.setText(course.getDescription());

switch (course.getId()){ case 1:

viewHolder.image.setImageResource(R.drawable.disenio); break;

case 2:

viewHolder.image.setImageResource(R.drawable.android); break;

case 3: viewHolder.image.setImageResource(R.drawable.swift); break;

case 4: viewHolder.image.setImageResource(R.drawable.backend); break; } viewHolder.itemView.setTag(course); }

@Override public int getItemCount() { return courses.size(); }

Hasta este punto no hemos creado ms que lo necesario para que el UI principal funcione (recordar que solo tenemos una Actividad con un Fragmento en ella). La vista del fragmento (cursos_fragment.xml) contiene un widget del tipoademas de un(que es el Float Button con la explicacin ms adelante). La claseonCreateViewdel Fragmento es la encargada de preparar nuestra vista, mientras que en onActivityCreatedhacemos el llamado a todo aquello que usaremos para completar dicha vista, en este punto es donde hacemos el llamado a recyclerView, leseteamos el adapterque creamos (CoursesAdapterque para construirlo recibe un eldatasety laItemLayout) y le indicamos alLayoutManagerque sea unLinearLayoutManager(vista de lista).

Cdigo XML :

Cdigo Java : ArrayList courses; ReadLocalJSON readLocalJSON = new ReadLocalJSON(); courses = readLocalJSON.getCourses(getActivity());

RecyclerView recyclerView = (RecyclerView) getActivity().findViewById(R.id.my_recycler_view); recyclerView.setHasFixedSize(true); recyclerView.setAdapter(new CoursesAdapter(courses, R.layout.row)); recyclerView.setLayoutManager(new LinearLayoutManager(getActivity())); recyclerView.setItemAnimator(new DefaultItemAnimator());

Creando un Float Button

Lo ltimo de este ejemplo es crear elFloat Button,como podemos ver en la vista del fragmento se trata de un ImageButton (src="@drawable/reply", que es la imagen de la flecha) conandroid:background="@drawable/riple", el ripple (riple.xmlcontenido en la carpeta drawable) es el que crea el un fondobackground shape oval, siendo el color el declarado en el tema en un inicio:@color/acent_button, el tamao del shape se encuentra declarado en cada uno de los archivosdimens.xmlen las carpetas devalues, contiene unandroid:elevation="10dp", sea que va 10dp arriba del eje Z, lo cual, lo coloca por delante de cualquier cosa que muestreRecyclerView.

Ademas (aunque no se pueda ver en este ejemplo) preparamos una animacin de translationZ declarada enanim.xmlen la carpetaanim, esta solo ser visible cuando se pasa de una actividad a otra, por el momento no lo usaremos pero as es como se declara.

Cdigo XML :

Cdigo XML :

16dp 16dp 2dp 56dp 4dp 4dp

Cdigo XML :

Ya por ltimo en la clase del fragmento debemos declarar losOutline(Las sombras que hace ver el botn por estar mas arriba del eje Z).

Cdigo Java :int size = getResources().getDimensionPixelSize(R.dimen.fab_size); Outline outline = new Outline(); outline.setOval(0, 0, size, size); ImageButton imageButton = (ImageButton) getActivity().findViewById(R.id.fab_1); imageButton.setOutline(outline); imageButton.setOnClickListener(new View.OnClickListener() {

@Override public void onClick(View view) { Toast.makeText(getActivity(),"Mejorando.la: Aprende a crear el futuro de la Web", Toast.LENGTH_LONG).show(); } }); }

Ser profesor delCurso de programacin de apps para Androidde Mejorando.la. Por si quieres un contenido ms a profundidadListo!, eso es a grosso modo una aplicacin que usa Material Design ademas de los nuevos widgets, no duden en preguntar o demostrar alguna inquietud sobre el tema, quedo a sus ordenes por cualquier medio:@thespianartist