Programar en Android sin acabar siendo un mono que teclea (III): Creación del proyecto, icono, Action Bar

7

Comenzamos el tercer artículo de la serie donde por fin empezaremos a crear la App. La semana pasada dejamos todo el entorno de programación preparado, si tuvisteis algún problema en la instalación o configuración de Eclipse comentádmelo en los comentarios del artículo anterior o en Twitter.

 

¿Qué veremos en este artículo?

  • Creación de un nuevo proyecto.
  • Creación de un icono para la App, con la herramienta Google Assets Studio
  • Importación de librerías
  • Implantación de Action Bar, para versiones de Android inferiores a ICS.
  • Estilo personalizado para la Action Bar

 

Al final de nuestro artículo este será el aspecto de nuestra App:

17

Sin más, comienzo con la creación del proyecto. Para ello, tras abrir Eclipse, iremos a  File>New>Android Application Project.  Ahí configuraremos las propiedades del nuevo proyecto.

1

 

2

 

3

 

4

 

5

 

 

Ya tendremos creado nuestro proyecto. Si miráis a la izquierda podréis ver como se ha creado una carpeta llamada “MiTiendaAndroid“, que si hacéis doble click en ella podreís ver todas las carpetas que contiene una App Android. Poco a poco sabremos  qué contiene cada una.

El siguiente paso será escoger un icono y añadírselo a la App.  Para ello yo he cogido esta imagen open source de internet. Fijáos que al ser en formato svg le podremos dar la resolución que queramos sin perder calidad 

 

 

Pero no podremos insertar la imagen directamente al proyecto. Una App de Android, como sabemos, puede ejecutarse desde en un pequeño dispositivo hasta en una pantalla de televisión, y siempre intentaremos que las imágenes se vean bien en todas las resoluciones. Para ello, los proyectos de Android tienen diferentes carpetas para las imágenes, dependiendo de la resolución de la pantalla donde se mostrará.  Para ello, Google  nos proporciona una herramienta (no conocida por muchos programadores), Android  Asset Studio. Esta herramienta nos  permite adaptar las imágenes a las diferentes resoluciones. La abrimos, pinchamos en Launcher Icon (que nos permite hacer el icono principal de la App). Después pincharemos en la pestaña “Image” y subiremos nuestra imagen. Automáticamente nos generará nuestra imagen en las distintas resoluciones.

 

7

 

Por último pincharemos en Download zip y se nos descargará un archivo comprimido llamado ic_launcher. Para añadirlo al proyecto tendremos que seleccionar la carpeta res que hay dentro, y extraerla en la carpeta de nuestro proyecto (Los proyectos están en la carpeta que teníamos que elegir en el tutorial anterior) Nos preguntará si queremos sobrescribir los archivos, a lo que contestaremos que sí. Volvemos a Eclipse y hacemos doble click sobre nuestro proyecto, y luego en las carpeta res. Podemos ver unas carpetas con el nombre de Drawable seguido de otras letras. Estas son las carpetas donde se almacenan todas las imágenes de nuestro proyecto, para las distintas resoluciones.

El tema de las imágenes y distintas  resoluciones en Android nos daría para un curso completo pero como sabéis, en estos artículos quiero ir a lo básico. Si queréis más información la podéis encontrar en la documentación oficial de Android. Por cierto, esa web, será a partir de ahora vuestra Biblia, si queréis seguir programando en Android.

El siguiente paso de este artículo será crear la ActionBar. ¿Qué es la Action Bar? Actualmente casi todas las Apps de Android la usan, podemos encontrar ejemplos de ella en apps como las de Youtube o Facebook.

10 11

 

Ésta suele contener  el título de la aplicación y/o algunos iconos. Para implementarla habrá que utilizar una librería, ya que la forma que propone Android para incorporar la Action Bar, solo funciona en dispositivos con versiones iguales o superiores a ice cream sandwich. ¿Qué es una librería? Las librerías son proyectos de Android que podremos descargar y adjuntar a nuestro proyecto que nos facilitarán ciertas tareas. Básicamente nos permitirán no tener que “reinventar la rueda” cada vez que queramos incorporar un nuevo elemento.  La que vamos a utilizar se llama ActionBar Sherlock. Y nos permite utilizar la ActionBar en versiones de Android inferiores a la 4.0. Para descargarla nos iremos a su web oficial y pincharemos en el enlace que señala la imagen

12

La carpeta comprimida que se nos descargará la descomprimiremos en nuestra carpeta de proyectos (o en cualquier otra que queramos). Posteriormente abriremos de nuevo Eclipse y pincharemos en File>Import, pincharemos en “Existing Android Code into WorkSpace” y buscaremos la carpeta que acabamos de descomprimir. Pulsaremos aceptar, y nos aparecerá  debajo de Projects todos los proyectos que contiene la librería. Marcaremos sólo el que pone actionbarsherlock en la pestaña New Project Name y posteriormente pincharemos Finish. A la izquierda de la pantalla junto al otro proyecto nos aparecerá uno nuevo con el nombre Actionbar Sherlock. Pincharemos con el botón derecho del ratón en él, y pulsaremos en properties. Después pulsaremos en la pestaña Android , y comprobamos que esté marcada la casilla “Is Library”.

 

13

 

Para añadir esta librería a nuestro proyecto. Iremos a  MiTiendaAndroid pincharemos con el botón derecho y, de nuevo en Properties, y en la pestaña  Android posteriormente. Dentro del apartado Library, pulsaremos en Add y seleccionaremos el proyecto de ActionBar Sherlock. Después pulsaremos en Apply, y después en OK. Ahora sí que vamos a escribir nuestras primeras lineas de código. Iremos a la carpeta res del proyecyo y haremos click con el botón derecho del ratón en ella. Pulsaremos en New>Folder y llamaremos a esta nueva carpeta “drawable“. Haremos click con el botón derecho del ratón en esta recién creada carpeta y pincharemos en New>Android XML File  La llamaremos fondoactionbar y pulsaremos en finish.

Se nos abrirá el archivo, en el que borraremos el código que aparece y copiaremos este:


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
 
    <gradient
        android:angle="90"
        android:endColor="#084B8A"
        android:startColor="#0174DF" />
 
</shape>

Me pararé un poco a explicar este primer código. Este archivo utiliza el lenguaje XML.  Este tipo de archivos se utilizan en Android para crear todas las vistas, es decir para crear todo lo relacionado con el diseño de la aplicación.

Este código de comporta de la siguiente manera:

Tras declarar la versión y codificación (es siempre igual, 1ª línea)

Crea una forma, mediante la instrucción <shape A esta le pone 2 propiedades, la primera simplemente explica dónde tiene que encontrar Android la infomación sobre los elementos (es obligatoria en todos los archivos xml que veáis en Android, y siempre es  igual) La segunda especifica que la forma que queremos es un rectángulo. Tras esto cierra la inicialización de shape con >. A partir de ahí y hasta que aparezca el fin de la forma (</shape>) se pondrán todos los elementos que están dentro de ella. En este caso , dentro del cuadrado hemos metido un degradado que va del primer color al segundo (colores en hexadecimal), con un ángulo de 90º. Tras esto, simplemente, cerramos la definición de la forma con (</shape>)

 

Ahora nos vamos al proyecto y abrimos res>values, y de la misma forma que antes creamos un nuevo archivo xml que se llame themes. Pinchamos en la pestaña que muestra la imagen y borramos el codigo que hay. Tras esto, añadimos el siguiente:

 


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MiTema"
           parent="Theme.Sherlock.Light.DarkActionBar">
        <item name="actionBarStyle">@style/Widget.Styled.ActionBar</item>
        <item name="android:actionBarStyle">@style/Widget.Styled.ActionBar</item>
    </style>
    <style name="Widget.Styled.ActionBar"
           parent="Widget.Sherlock.Light.ActionBar.Solid.Inverse">
        <item name="background">@drawable/fondoactionbar</item>
        <item name="android:background">@drawable/fondoactionbar</item>
    </style>
</resources>


 

Este código lo explicaré más por encima porque me gustaría más adelante profundizar en los temas y estilos. A grandes rasgos este código lo que hace es crear un tema para el proyecto. Los estilos y temas en Android lo que nos permiten es  separar el contenido del diseño, aplicando una serie de carácteristicas (color,tamaño,posición, etc) comunes a una serie de elementos

Este tema coge características de uno de los que contiene nuestra librería, pero le añade algunos  elementos más.

El siguiente paso será irnos a nuestra actividad principal, que está en la carpeta src>com.example.mitiendaandroid y abrimos el archivo MainActivity.java. Aunque más adelante comprendemos mejor el concepto de actividad en Android, se podría definir como cada  “pantalla” de la aplicación. A su vez cada activity lleva asociada un layout, que es un archivo en xml que contiene el diseño de esa  “pantalla”.  Dentro de MainActivity.java deberemos borrar el código existente y poner este (poco a poco conoceréis la función de cada parte del código):

package com.example.mitiendaandroid;

import android.os.Bundle;

import com.actionbarsherlock.app.SherlockActivity;
import com.actionbarsherlock.view.Menu;
import com.actionbarsherlock.view.MenuInflater;

public class MainActivity extends SherlockActivity {

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

	@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getSupportMenuInflater();
        inflater.inflate(R.menu.main, menu);
        return true;
    }

}

Por último nos faltaría editar el AndroidManifest (que en siguientes tutoriales explicaré su función), añadiendo esta línea:

15

 

Para terminar el artículo, pincharemos el siguiente botón y se nos abrirá un emulador corriendo nuestra App.

16

 

Si todo ha salido bien, éste será el aspecto que tendrá nuestra App.

17

 

Muy poco a poco, pero vamos cogiendo velocidad en la creación de la App. El artículo de hoy es uno de los más pesados, pero poco a poco vamos a ir creando todos los elementos, que ya veréis que no es nada difícil. Cualquier mínima duda o sugerencia la atenderé sin problema. Y agradeceré todos vuestros comentarios.

 

 

Share.

About Author

Mi nombre es Pablo González Carrizo, aunque mi seudónimo en este mundo sea Un mono que teclea. Mis estudios de Imagen y Sonido en Telecomunicaciones me permiten estar informado de todas las novedades en tecnología, que intento siempre compartir.

7 comentarios

  1. Hola Pablo, muchas gracias por estos artículos, estoy siguiendo el tutorial, sin embargo cuando intento correr el programa me aparece un error en:

    res/values/themes.xml

    en la línea:

    @style/Widget.Styled.ActionBar

    el error dice : “android:actionBarStyle requires API level 11 (current min is 8)

    verifiqué en el SDK manager y yo me bajé todos lo que indicaste en el segundo artículo, incluyendo “Android 3.0 (API 11)

    qué crees que me falte?

    Saludos,
    Richard

    • Pablo González Carrizo on

      Hola Richard, me alegro que te estén ayudando estos artículos. Ya irás viendo que la programación no son matemáticas, y que hay mil variables que no controlamos que hacen que salgan errores aunque hayamos puesto exactamente los mismos códigos.

      Ve a Android Manifest y comprueba que existan estas líneas:

      Si es así, pueba estas dos cosas:

      1 Simplemente con reiniciar Eclipse en muchas ocasiones se han solucionado cosas así.

      2 Pincha en el proyecto y arriba en la barra de menú pincha en Project>Clean

      Si no funciona puedes hacer lo siguiente:

      Ve en la barra de menú a Window>Preferences Abre la pestaña Android y luego Lint Error Checking y en NewApi cambia el nivel de severidad (abajo a la derecha) a Ignore. Pincha en apply, y vuelve a darle a limpiar el proyecto (Project>Clean)

      Espero que te sirva. Saludos

  2. Miguel Angel on

    Buenos días, Pablo te felicito por el tremendo esfuerzo de las explicaciones del tutorial. El detallar cada paso me ha resultado imprescindible para entender el código. Un saludo

  3. Hola, al abrir el SDK Manager a través de Android Studio para actualizar, me descarga todo menos el: Android SDK Tools, revision 22.6.2
    Sale un mensaje de error:
    Failed to rename directory C:\Program Files\Android\android-studio\sdk\tools to C:\Program Files\Android\android-studio\sdk\temp\ToolPackage.old01.

    [find_lock] Directory locked by cmd.exe;java.exe
    Me puedes ayudar ?.
    Gracias,

  4. Tengo el siguiente fragment (con varias imágenes) que proviene del menú:

    import android.annotation.SuppressLint;
    import android.app.Fragment;
    import android.content.Intent;
    import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.ImageView;
    import android.widget.Toast;

    @SuppressLint(“NewApi”)

    public class Razas extends Fragment

    implements View.OnClickListener {
    ImageView imageAmerica;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.continentes, container, false);

    imageAmerica = (ImageView) rootView.findViewById(R.id.imageAmerica);

    imageAmerica.setOnClickListener(this);

    return rootView;
    }

    @Override
    public void onClick(View ImageView) {

    Toast.makeText(this.getActivity(),
    “Has pulsado America”, Toast.LENGTH_LONG).show();

    }

    }

    Hasta aquí funciona.
    Pero quiero sustituir el Toast y declarar varias imágenes (en este fragment) y que al pulsar cada una me lance a unas activity llamadas america.xml, europa.xml,…etc.
    Estoy perdido…

Leave A Reply

Uso de cookies

Este sitio web utiliza cookies para una mejor experiencia de usuario. Si continúas navegando estás dando tu consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies