«

»

dic 01 2011

Tutorial: Mi primera App

Hoy os traigo un tutorial de una app completa, que seguro hará las delicias de los que se están iniciando.
Esta aplicación se basa en el cálculo de nuestro Índice de Masa Corporal, para ello necesitamos como entrada un peso en kg y una altura en cm.

Aqui unas capturas de la app terminada:

Para saber mas seguid leyendo…

Lo primero es crear un nuevo proyecto en nuestro eclipse con éstos parámetros:

Nombre de la app: IMC

Target: 1.6 (API 4)

Minimo sdk: 4

Nombre del paquete: prueba.imc

Nombre de la actividad principal: IMCActivity

 

Una vez creado el proyecto , empezamos a diseñar los elementos que configurarán la apariencia gráfica de nuestra aplicación. Para ello nos vamos al archivo main.xml .
Añadimos el primer LineraLayout que suele venir por defecto:

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

Lo primero es añadir un texto de Bienvenida:

 <TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="Calculadora del IMC (Índice de Masa Corporal)"
android:textSize="20sp" />

Añadimos un texto invitando a introducir nuestro peso:

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Introduzca su peso en Kg" />

Añadimos el EditText donde el usuario puede introducir su peso:

(Le decimos que la entrada será un número, para evitar que se introduzcan caracteres extraños)

(Le decimos que la longitud máxima serán 3 dígitos) (Nadie pesa mas de xxx kg)

<EditText
android:id="@+id/peso"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="number"
android:maxLength="3" >

<requestFocus />
</EditText>

Nota: Con “requestFocus” le indicamos al sistema que al iniciar coloque por defecto aquí el foco.
Colocamos otro texto invitando a introducir la altura:

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="20dp"
android:text="Introduzca su altura en Cm" />

Añadimos el EditText para poder introducir la altura

(Otra vez limitamos la entrada a numeros de como máxmio 3 dígitos)(nadie mide mas de xxx cm)

<EditText
android:id="@+id/altura"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="number"
android:maxLength="3" />

Añadimos un LinearLayout horizontal para los botones:

<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="horizontal" >

Añadimos un botón para realizar los cálculos con los datos:

<button
android:id="@+id/calcular"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="20dp"
android:text="Calcular" />

Añadimos otro botón que servirá de Ayuda si necesitamos explicar algo:

<Button
android:id="@+id/ayuda"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="20dp"
android:text="Ayuda" />

Y cerramos los dos LinearLayout:

 </LinearLayout>

</LinearLayout>

Nos vamos ahora a hacerlo funcionar editando nuestro IMCActivity:

Lo primero es añadir a nuestra clase los EditTExt:

EditText peso, altura;

y en el onCreate referenciarlo y poner los Listeners, que reaccionarán al evento Botón:

Button calcular = (Button) findViewById(R.id.calcular);
calcular.setOnClickListener(this);

Button ayuda = (Button) findViewById(R.id.ayuda);
ayuda.setOnClickListener(this);

peso = (EditText) findViewById(R.id.peso);
altura = (EditText) findViewById(R.id.altura);

Ahora, le decimos, que se va a usar el onClickListener en nuestro Activity:

public class IMCActivity extends Activity implements OnClickListener {

Y añadimos la función correspondiente al evento onClik:

@Override
public void onClick(View v) {}

Añadimos un switch, con dos casos, que se seleccionan por id (ayuda y calcular):
(En el caso de calcular, ya creamos un intent que abre una nueva clase, que contiene otra función).

switch (v.getId()) {
case R.id.ayuda:
Intent i = new Intent(this, Ayuda.class);
startActivity(i);
break;
case R.id.calcular:
break;

Ahora haremos todos los cálculos y comprobaciones en el caso de calcular:

-Se comprueba que ningun campo esté en blanco, en ese caso se muestra un Toast invitando a rellenarlo

-Se pasan todos los strings a float y se realizan los cálculos

-Se muestra en un Toast corto el resultado en número, y su descripción.

if (peso.getText().toString().trim().length() == 0) {
peso.requestFocus();

Toast.makeText(IMCActivity.this,
"No te olvides de rellenar el peso", Toast.LENGTH_SHORT)
.show();
} else if (altura.getText().toString().trim().length() == 0) {
altura.requestFocus();

Toast.makeText(IMCActivity.this,
"No te olvides de rellenar la altura",
Toast.LENGTH_SHORT).show();
}

else {

float kg = Float.parseFloat(peso.getText().toString());
float cm = Float.parseFloat(altura.getText().toString());
float m = (cm / 100);
float bmi = (kg / (m * m));

if (bmi < 18.5) {
Toast.makeText(IMCActivity.this,
"Tu IMC es " + bmi + "\n" + "Estás delgado",
Toast.LENGTH_SHORT).show();
} else {
if (bmi < 24.9) {
Toast.makeText(
IMCActivity.this,
"Tu IMC es " + bmi + "\n"
+ "Tu peso es normal",
Toast.LENGTH_SHORT).show();
} else {
if (bmi < 29.9) {
Toast.makeText(
IMCActivity.this,
"Tu IMC es " + bmi + "\n"
+ "Tienes sobrepeso",
Toast.LENGTH_SHORT).show();

} else {
if (bmi > 30) {
Toast.makeText(
IMCActivity.this,
"Tu IMC es " + bmi + "\n"
+ "Padeces obesidad",
Toast.LENGTH_SHORT).show();

}
}
}
}

Ya casi lo tenemos, vamos ahora a crear la clase que nos falta, Ayuda.java, dentro del paquete prueba.imc:
(Lo único que hace es mostrar un layout distinto, denominado ayuda.xml)

package prueba.imc;

import android.app.Activity;
import android.os.Bundle;

public class Ayuda extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.ayuda);
}
}

Creamos el último archivo que vamos a necesitar, el ayuda.xml:
(Es solo un ScrollView con un TextView que mostrará una ayuda al usuario)

 

Nos vamos ahora al res/values/strings.xml y añadimos los textos que nos faltan:

IMC
Ayuda de IMC
IMC es una aplicación de ejemplo creada con el fin de calcular nuestro Indice de Masa Corporal. Para tal fin debemos introducir nuestro peso en Kilogramos (kg) y nuestra altura en Metros (m) y pulsar el botón calcular. Para cualquier consulta visita <strong>www.androcode.es</strong>

Por último entramos en nuestro AndroidManifest.xml y lo editamos:
(Añadimos un nuevo Activity Ayuda y le damos un estilo de dialog)

<activity
android:label="@string/about_title"
android:name="prueba.imc.Ayuda"
android:theme="@android:style/Theme.Dialog" >
</activity>

Bueno, espero que os haya gustado,  aqui os dejo el APK para que lo probéis y el codigo fuente.

 

Acerca del autor

Breogangf

Desarrollador de Android, estudiante de Teleco, fundador @cogiloo, co-fundador @redinput , redactor @androcode.

  • Nightrain

    Muchas gracias.
    Una app muy instructiva para empezar.
    Saludos.

  • http://dev2web.com.mx Alejandro

    Muy buen tutorial. Solo un detallito, te falto agregar el id al boton de calcular.
    android:id=”@+id/calcular. Ese errorsito me torturo durante un rato, es que soy principiante.
    Saludos

    • http://www.cogiloo-labs.com Breogangf | Redactor

      Ya está actualizado, gracias!

  • Hidráulico

    Mil gracias por el tutorial, genial para los que estamos introduciendonos en el androide.
    Me sale un error en la clase Ayuda.java:

    @Override
    protected void onCreate(Bundle saveInstanceState) {
    super.onCreate(savedInstanceState); //Error: savedInstanceState cannot be resolved

    setContentView(R.layout.ayuda);
    }

    Soy muy novato y todavía no tengo demasiado claras muchas sentencias.
    Gracias.

    • Hidráulico

      Vale, me equivoqué, en el primero tenía saveInstanceState y en el segundo savedInstanceState.
      Un saludo y seguid con estos tutoriales, gracias ;)

  • Quim

    hola, gracias por el ejemplo!

    soy novatisimo en java y android…y tengo una duda
    por que a veces se utiliza
    public void onCreate(Bundle savedInstanceState) {

    y en la activity ayuda se utiliza
    protected void onCreate(Bundle saveInstanceState) {

    gracias por adelantado..

    • http://hackedbrain.blogspot.com/ JMPergar | Editor Jefe

      es public, debe de haber alguna errata

  • Rafa Barron

    Gracias por la app, estoy empezando en este mundo y soy alumno de exitae, me ha yudado bastante este ejemplo.seguid asi, por favor.

  • JDanienl

    hola estoy creando este ejemplo y me gustaria que se pudiera introducir Libras en lugar de kilogramos como puedo crear la formula ??

  • X@V1

    La Verdad Muy Bueno!!! hasta ahora es que estoy iniciando en este mundo de las app!!! Gracias por la explicacion, solo falta que yo la programe!

  • Fabi

    No me sale en mi Android Studio :( descargue el archivo y no me lo hace funcionar