Hello Android!

Posted on febrero 6, 2021 Actualizado enn enero 31, 2022

Comenzamos con nuestro Hola Mundo en Android.
Se debe suponer que ya instalaste el entorno de desarrollo para android, explicado en el post anterior.

OK, una vez instalados los no pocos archivos bajados con anterioridad, entramos a Eclipse y creamos un nuevo proyecto File>New>Project A continuación seleccionamos Android>Android Project y Next.

En Project Name ponemos ‘HolaMundo’, luego Next y seleccionamos la plataforma en la que queremos trabajar. Enseguida damos los parámetros que se muestran en la imagen y damos clic en Finish.

Ahora tenemos que crear los siguientes directorios:

/libs (dentro del directorio raíz ‘HolaMundo’)

/assets/www

Buscamos la carpeta de phonegap (la cual descargamos anteriormente [http://phonegap.com/download] y descomprimimos), nos vamos a lib>android.

Copiamos el archivo phonegap.js en /assets/www

Copiamos el archivo phonegap.jar en /libs

Copiamos la carpeta xml en /res

A continuación damos clic derecho sobre la carpeta libs>Build path>Configure Build Path, luego en la pestaña Libraries damos clic en el botón Add JARs… y seleccionamos phonegap-1.x.x.jar ubicado en la carpeta /libs.

Ahora abrimos el archivo App.java (HolaMundo>src>com.phonegap.HolaMundo>App.Java) y modificamos el código para que quede de la siguiente manera:

• Agregamos import com.phonegap.*;
• Cambiamos la clase Activity por DroidGap
• Reemplazamos la línea setContentView() con super.loadUrl(“file:///android_asset/www/index.html”);

Luego, damos clic derecho sobre el archivo AndoridManifest.xml (que se encuentra en el árbol de la izquierda) y seleccionamos Open With>Text Editor, borramos el código XML  y pegamos el siguiente código:

<?xml version=»1.0″ encoding=»utf-8″?>
<manifest xmlns:android=»http://schemas.android.com/apk/res/android»
package=»com.phonegap.HolaMundo»
android:versionCode=»1″
android:versionName=»1.0″ >

<supports-screens
android:largeScreens=»true»
android:normalScreens=»true»
android:smallScreens=»true»
android:resizeable=»true»
android:anyDensity=»true»
/>
<uses-permission android:name=»android.permission.CAMERA» />
<uses-permission android:name=»android.permission.VIBRATE» />
<uses-permission android:name=»android.permission.ACCESS_COARSE_LOCATION» />
<uses-permission android:name=»android.permission.ACCESS_FINE_LOCATION» />
<uses-permission android:name=»android.permission.ACCESS_LOCATION_EXTRA_COMMANDS» />
<uses-permission android:name=»android.permission.READ_PHONE_STATE» />
<uses-permission android:name=»android.permission.INTERNET» />
<uses-permission android:name=»android.permission.RECEIVE_SMS» />
<uses-permission android:name=»android.permission.RECORD_AUDIO» />
<uses-permission android:name=»android.permission.MODIFY_AUDIO_SETTINGS» />
<uses-permission android:name=»android.permission.READ_CONTACTS» />
<uses-permission android:name=»android.permission.WRITE_CONTACTS» />
<uses-permission android:name=»android.permission.WRITE_EXTERNAL_STORAGE» />
<uses-permission android:name=»android.permission.ACCESS_NETWORK_STATE» /> <uses-permission android:name=»android.permission.GET_ACCOUNTS» />
<uses-permission android:name=»android.permission.BROADCAST_STICKY» />

<uses-sdk android:minSdkVersion=»8″ />

<application
android:icon=»@drawable/ic_launcher»
android:label=»@string/app_name» >
<activity
android:name=».App»
android:label=»@string/app_name» >
<intent-filter>
<action android:name=»android.intent.action.MAIN» />

<category android:name=»android.intent.category.LAUNCHER» />
</intent-filter>
</activity>
<activity
android:name=»com.phonegap.DroidGap»
android:label=»@string/app_name»
android:configChanges=»orientation|keyboardHidden»>
<intent-filter>
</intent-filter>
</activity>
</application>

</manifest>

 

 

Básicamente estamos añadiendo parámetros de configuración de la aplicación, como el uso de cámara, localización, internet, etc.

Para finalizar, creamos un archivo llamado index.html y lo guardamos en la carpeta /assets/www con el siguiente código:

NOTA IMPORTANTE! es necesario cambiar src=”phonegap.js” por src=”phonegap.1.x.x.js”. Donde ‘1.x.x.’ es la versión que hayan bajado de phonegap. Otra opción es renombrar el archivo a ‘phonegap.js’ y listo, quedaría como en el ejemplo de arriba.

 

<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
http://strongphonegap.js/strong
</head>
<body>
<h1>Hello Android</h1>
</body>
</html>

Para configurar la máquina virtual vamos a Window>AVD Manager>New. En Name: podemos poner lo que queramos (como ‘máquina virtual’), Target: La plataforma que deseamos, Size: Memoria RAM que le asignaremos a la máquina y en Built-in: la resolución.

Ahora sí, damos clic derecho sobre la carpeta raíz HolaMundo>Run As>Android Application y ¡Voilá! tenemos nuestro HolaMundo en Android.

Espero les haya servido el presente tutorial. Cualquier duda o aclaración puede verse dentro de los mismos comentarios.

Adicional !
Puedes jugar con el contenido de index.html para irte familiarizando con las etiquetas HTML  y estilos css:
por ejemplo:

<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
http://”phonegap-1.4.1.js”
</head>
<body style=»background:#111″>
<h1 style=»font-family:arial; color:#EEE; font-size:20px; font-weight:normal»>Probando css inline</h1>
<p style=»font-family:arial; color:#CCC; font-size:12px; font-weight:normal»>Hello Android!</p>
<p style=»font-family:arial; color:#AAA; font-size:11px; font-weight:bold»>Tutorial completo :)</p>
<p style=»font-family:arial; color:#999; font-size:9px; font-weight:bold»><i>Ziscko Design</i></p>
</body>
</html>

Ejecutando ese código, tendrás como resultado algo como esto: