Archivo por meses: junio 2015

Tutorial Material Design en Android #2

Definir la ToolBar

Esta es la tercera parte del tutorial desarrollo de apps para Android utilizando Material Design, ahora aprenderemos acerca de como definir la ToolBar de nuestra aplicación, para hacerlo seguiremos 5 sencillos pasos:

  • En el archivo styles.xml utilizaremos Theme.AppCompat.Light.NoActionBar
  • Definiremos un archivo app_bar.xml para nuestra ToolBar
  • Incluiremos ese archivo con la directiva include en nuestro main_activity.xml (la vista de nuestra Activity)
  • En nuestra actividad principal MainActivity.java vamos a crear una instancia de la ToolBar para poder manipularla
  • Por ultimo nos aseguraremos de incluir soporte para dispositivos pre lollipop (api < 21)

toolbars

Antes que nada, como en las ediciones anteriores les recomiendo que se empapen un poco de la teoría de las ToolBars en el siguiente link, ya que Material Design no es solo escribir código y ya, tenemos que apegarnos a ciertos lineamientos que se explican muy bien en la documentación oficial y pues manos a la obra, o manos al código mejor dicho XD.

En nuestro proyecto vamos a nuestro archivo styles.xml que está en app > res > values > styles.xml y remplazamos Theme.AppCompat.Light.DarkActionBar por Theme.AppCompat.Light.NoActionBar quedando el código de la siguiente manera:

noactionbar

Esto lo hacemos para indicar que no vamos a utilizar la ToolBar por defecto que Android maneja, en cambio elegimos no incluir ninguna (al menos no desde el theme que utilizamos), si corremos nuestra aplicación justo ahora tendremos algo como esto.

app_no_toolbar

Sin Toolbar, ¿qué feo se ve no?, ahora solucionaremos eso de la siguiente forma, en la carpeta layout de nuestro proyecto (app > res > layout) vamos a crear un nuevo archivo xml, ya saben, botón derecho New > Layout resource file y le ponemos de nombre app_bar.xml, puede ser cualquier otro nombre pero por convención utilizaremos ese, también en el campo de Root element utilizaremos ToolBar como se muestra en la siguiente imagen.

new_toolbar

Vemos el contenido del archivo recién creado y notamos que Android Studio nos marca un error en el elemento Toolbar XD, el código que les debió haber generado automáticamente es el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

</Toolbar>

El error, de nuevo, es debido a la versión mínima de api soportada por nuestra aplicación, si no mal recuerdo al crear nuestro proyecto elegimos la api 14 y el control Toolbar es para api 21 por lo que para solucionar esto remplazaremos el código por el 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="match_parent">

</android.support.v7.widget.Toolbar>

Y el error desaparecerá 🙂 les dejo mas documentación sobre esta maravillosa librería para dar soporte android.support.v7.app

Lo que siguen, en nuestro archivo main_activity.xml vamos a incluir el app_bar.xml que acabamos de crear, para eso lo abrimos y utilizamos la directiva include de la siguiente forma.

<RelativeLayout 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" 
    tools:context="com.alevsk.materialdesignapp.MainActivity">
    
    <include android:id="@+id/app_bar" layout="@layout/app_bar" />

    <TextView android:text="@string/hello_world" android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

Ok, ahora nos vamos a nuestro archivo MainActivity.java que nos toca escribir el primer código Java del proyecto, lo que haremos aquí será crear una nueva propiedad (variable privada tipo Toolbar) e instanciar la de nuestra vista XML en el método onCreate

public class MainActivity extends ActionBarActivity {

    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        toolbar = (Toolbar) findViewById(R.id.app_bar);
        setSupportActionBar(toolbar);
    }

Cuando agregamos la variable tipo Toolbar un error muy común que he observado es el tipo de librería que importa el proyecto, asegúrense que este importando import android.support.v7.widget.Toolbar; de otra manera el proyecto te marcara errores al momento de compilar la apk.

¿Que acabamos de hacer?, ahora lo explico, creamos una nueva variable Toolbar, después creamos la instancia tomando como referencia la que definimos anteriormente en nuestro main_activity.xml y al final utilizamos el método setSupportActionBar para indicarle a Android que vamos a utilizar nuestra propia Toolbar, procedemos a correr la app y vemos lo que pasa.

app_custom_toolbar

:S horrible ¿cierto? veamos que paso aquí y cómo solucionarlo. Cuando definimos nuestra propia Toolbar tenemos que asegurarnos de definir también el ancho y el alto del elemento, ¿recuerdan el link a la documentación oficial que les deje al inicio?, ahora es un buen momento para revisarla, también tenemos que definir el orden en el que se dibujaran los elementos en la pantalla, para eso en main_activity.xml vamos a utilizar una propiedad llamada layout_below en el elemento TextView para indicar que queremos que aparezca debajo de nuestra Toolbar

<RelativeLayout 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"
    tools:context="com.alevsk.materialdesignapp.MainActivity">

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/app_bar"
        android:text="@string/hello_world" />

</RelativeLayout>

También definimos el color de fondo en nuestro archivo app_bar.xml y cambiamos su altura de match_parent a wrap_content.

<?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="wrap_content"
    android:background="@color/primaryColor">

</android.support.v7.widget.Toolbar>

Guardamos los cambios y corremos la app de nuevo.

app_custom_toolbar2

Listo, mucho mejor 🙂 , pareciera que no avanzamos nada en este tercer tutorial, sin embargo tenemos ya una Toolbar personalizada funcional y esto nos servirá para lo que sigue que será agregar algunos iconos! salu2

Tutorial Material Design en Android #1

Los colores de la aplicación

En el tutorial anterior aprendimos a Crear un nuevo proyecto de Android Material Design, hicimos algunas configuraciones en el archivo AndroidManifest.xml y creamos algunos nuevos estilos en el archivo style.xml.

Pues en esta ocasión vamos aprender a personalizar los colores de nuestra app, tanto del ToolBar / ActionBar como del StatusBar y los demás elementos de la interfaz gráfica. Recomiendo revisen la documentación oficial más a fondo en el siguiente link

Pero en resumen dice lo que explicare a continuación, básicamente tenemos 5 elementos que podemos personalizar por default:

  • colorPrimary
  • colorPrimaryDark
  • colorAccent
  • textColorPrimary
  • windowBackground
  • navigationBarColor

En la siguiente imagen podemos observar a que parte de la interfaz corresponde cada elemento 🙂

ThemeColors

Ya se imaginan lo que sigue, les recomiendo las paletas de colores de google, por lo pronto elijamos la que sea y comencemos a configurar los valores en nuestra aplicación para ir viendo cómo va quedando.

Es una buena práctica separar los recursos que utilizara la aplicación en varios archivos por lo que dentro de la carpeta values vamos a crear un nuevo archivo colors.xml, si no recuerdan como crear un nuevo archivo de recursos regresen al primero tutorial donde creamos el archivo styles.xml.

Ya con el archivo colors.xml creado vamos a comenzar agregando los colores de nuestra elección, mi archivo quedo con el siguiente contenido.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primaryColor">#E91E63</color>
    <color name="primaryColorDark">#C2185B</color>
    <color name="colorAccent">#8BC34A</color>
</resources>

Y mis colores fueron:

color_pallete

Ahora en nuestro archivo styles.xml en donde hicimos la definición de nuestro Tema AppTheme.Base vamos a definir el uso de los colores que acabamos de crear 🙂 de la siguiente forma:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="AppTheme.Base">
        <!-- Customize your theme here. -->
    </style>

    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryColorDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

De la misma manera vamos a agregar esas definiciones de color de elementos en el otro archivo styles.xml (el que tenemos para dispositivos con api 21), quedando de la siguiente manera, noten que en estas definiciones estamos añadiendo el prefijo android:

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

    <!-- Base application theme. -->
    <style name="AppTheme" parent="AppTheme.Base">
        <item name="android:colorPrimary">@color/primaryColor</item>
        <item name="android:colorPrimaryDark">@color/primaryColorDark</item>
        <item name="android:textColorPrimary">@color/textColorPrimary</item>
        <item name="android:colorAccent">@color/colorAccent</item>
    </style>

</resources>

Corremos la app en nuestro emulador favorito y observamos los resultados 🙂

material_app

En el siguiente tutorial vamos a aprender acerca del ToolBar y como personalizarla. salu2

Tutorial Material Design en Android #0

Crear un nuevo proyecto de Android Material Design

Hola lectores, esta es la introducción a una serie de tutoriales sobre desarrollo de aplicaciones android utilizando material design que tengo planeado hacer, antes que nada, si quieren saber bien que es el material design lo pueden ver desde el sitio oficial de google aqui, en resumidas cuentas una app hecha con este estilo se ve de esta forma.

howitowkrs

Y eso precisamente es lo que vamos a crear :), así que manos a la obra, si no tienes Android Studio descárgalo aca, después de instalarlo asegúrate de tenerlo completamente actualizado.

En Android Studio, crearemos un nuevo proyecto, para eso nos vamos a:

File > New > New Project

Nos aparecerá una ventana como la siguiente, aquí nos pedirán datos como el nombre de la app, el nombre de la compañía y el nombre del package

create_new_project

En la siguiente pantalla vamos a elegir la versión mínima de SDK api 14: Android 4.0 (IceCreamSandwich) si, es posible hacer material design en apis anteriores a la 21! 🙂

Después en la siguiente pantalla vamos a elegir una aplicación totalmente en blanco (Add no Activity) esto es porque algunos de los “templates” disponibles utilizan mucho código y técnicas que actualmente son obsoletas,

activity_type

La idea es que nosotros creemos todo desde cero. Por ultimo damos clic en Finish y estamos listos para comenzar a escribir código.
Si no estas familiarizado con la interfaz de Android Studio ahora es un buen momento para hacerlo, primero que nada vale la pena mencionar que Android Studio utiliza gradle para sincronizar y mantener las dependencias de los proyectos, si estas interesado en esto deberías revisar el archivo build.gradle en el apartado de Gradle Scripts donde veras un poco mas acerca de lo que hablo :).

Por otra parte, vamos a revisar el contenido del archivo manifest (App > Manifest > AndroidManifest.xml)

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.alevsk.materialdesignapp">

    <application android:allowBackup="true" android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher" android:theme="@style/AppTheme">

    </application>

</manifest>

Vemos que el theme actual de la aplicación está definido en los archivos de estilos (style.xml), por lo que ahora vamos a revisar que contiene ese.

styles

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
    </style>

</resources>

Localizamos el AppTheme y vamos a cambiar el valor de su parámetro parent de Theme.AppCompat.Light.DarkActionBar a AppTheme.Base, justo debajo vamos a agregar el nuevo estilo con el siguiente código que si utilizara Theme.AppCompat.Light.DarkActionBar

    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">

    </style>

Quedando el archivo completo de la siguiente forma:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="AppTheme.Base">
        <!-- Customize your theme here. -->
    </style>

    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">

    </style>

</resources>

Ahora, ya que nuestro objetivo es dar soporte material a las apps, ya sea lollipop (api >= 21) como pre lollipop (api < 21) debemos crear un nuevo archivo styles.xml, para eso en la carpeta values hacemos clic derecho, después New > Value Resource file y nos aparecerá una ventana como la siguiente:

new_styles

Donde en file name ponemos styles.xml, después en available qualifiers nos vamos hasta abajo y seleccionamos versión, en el campo de texto que aparece escribimos 21, esto quiere decir que ese archivo se aplicara a los dispositivos Android que corran utilizando la api 21, ¿entienden a donde va esto? es posible escribir archivos de estilos diferentes para cada versión de la api, 14, 15, 16, 17 … 22 etc y hacer que nuestra api se vea diferente :), por lo pronto solo escribiremos xml para la api 21.

En el archivo styles.xml para la api 21 escribimos el siguiente xml

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

    <!-- Base application theme. -->
    <style name="AppTheme" parent="AppTheme.Base">
        <!-- Customize your theme here. -->
    </style>

</resources>

En el archivo styles.xml para la api 21 no es necesario que definamos el estilo del tema AppTheme.Base puesto que ya lo definimos en el otro archivo de styles.xml y Android es lo suficientemente inteligente como para saber eso :), lo que vamos a hacer mas adelante sera definir algunas reglas de estilos y colores en cada archivo (ya no themes completos) para la personalizacion por versiones.

Lo que sigue, vamos a comenzar a crear activities, para eso en la carpeta de Java, clic derecho, después New > Activity > Blank Activity

new_activity

Como es la primera Activity podemos dejar los datos por default, explico rapidamente:

  • Activity Name: el nombre de tu clase
  • Layout Name: el nombre del archivo xml que servirá como la vista de tu actividad
  • Title Name: el título de tu actividad (el que aparece en el ActionBar / ToolBar)
  • Menu Resource Name: el nombre del archivo xml que tendrá los items para poblar el ToolBar de tu actividad

Damos clic en Finish.

Android Studio nos habrá creado dos nuevos archivos, MainActivity.java y activity_main.xml

activity

Si corremos la app y por alguna razón crashea es conveniente revisar el log de errores, me sucedió la primera vez que Android Studio no podía determinar cual era la activity por default para lanzar la app, y eso era debido a que en el archivo AndroidManifest.xml no estaba definido … por alguna extraña razón XD.

        <activity
            android:name=".MainActivity"
            android:label="@string/title_activity_main">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

El intent-filter con sus definiciones es lo que se necesitaba agregar para solucionar el problema y correr la app :), si ejecutamos la app en un teléfono o emulador con Android 4.x o 5.x tendremos algo como lo siguiente.

app

¿Nada impresionante verdad? En el siguiente tutorial aprenderemos a definir los colores de la aplicación y comenzaremos a crear algunos elementos nuevos en la interfaz. salu2