Hola Mundo Android

Si has seguido la serie de post sobre programación Android, tendrás una idea más o menos clara de la estructura y forma de programar. Pero estoy segura de que tendrás ganas de hacer un programa algo más elaborado. Con el post de hoy, eso es precisamente lo que vamos a hacer, vamos a crear el típico Hola Mundo Android, pero algo más elaborado, vamos a ponerle algún botón, área de texto, etc.

La idea es crear un aplicación Hola Mundo Android con un funcionamiento muy sencillo, tendremos un campo de texto, dos botones y un label. Cuando escribamos algo en el campo de texto y pulsemos el botón en el label aparecerá "Hola Mundo ". También pondremos otro botón para limpiar el valor del campo de texto. La apariencia final de la aplicación Hola Mundo Android sería esta:

Entonces, lo primero que debemos hacer es crear el proyecto Hola Mundo Android. Ya vimos como crear un proyecto Android en Eclipse, por lo que no me voy a parar mucho en este punto, simplemente os dejo una imagen de como debe quedar la configuración general:

Una vez que ya tenemos el proyecto Hola Mundo Android creado debemos empezar a programar. Vamos a abrir los dos ficheros que vamos a editar, por un lado "HolaMundoAndroid.java" y por otro "main.xml", el primero es la Actividad principal y el otro es el fichero que define la interfaz de usuario. Vamos a empezar por este último. Lo abrimos, y entramos en la parte de edición XML:

Como podéis ver ya tenemos un "TextView" en la vista, que será el que usemos para mostrar la frase "Hola Mundo Android". Ahora debemos un incluir un campo de texto "EditText" y dos botones de tipo "Button". El archivo XML debe quedarnos así:


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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    >

<EditText android:id="@+id/campoTexto"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

/>



<LinearLayout android:orientation="horizontal"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:gravity="center">

<Button android:id="@+id/decirHolaBt"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Di Hola"/>

<Button android:id="@+id/restablecerBt"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Limpiar"/>

</LinearLayout>



<TextView

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="@string/hello"

    android:id="@+id/texto"

    />

</LinearLayout>



Como veis es un XML muy simple, solo hemos ido incluyendo los elementos que necesitamos para hacer nuestro Hola Mundo Android y les hemos ido dando un nombre con el "id" para luego poder referenciarlos desde el código Java. Os recomiendo que practiquéis un poco jugando con los elementos de la interfaz para posicionarlos en distintos sitios.

Sigue leyendo para ver como acabar la aplicación Hola Mundo Android.


Si ejecutamos ahora mismo nuestro proyecto Hola Mundo Android.

Deberíamos ver nuestra interfaz gráfica, aunque por ahora no hace nada.

Una vez que tenemos nuestra interfaz gráfica debemos darle la funcionalidad, para ello vamos al archivo "HolaMundoAndroid.java". Lo primero que debemos hacer es declarar los elementos de la interfaz como objetos de la clase.


package com.nosolounix.holamundoandroid;



import android.app.Activity;

import android.os.Bundle;

import android.widget.Button;

import android.widget.TextView;



public class HolaMundoAndroid extends Activity {



private TextView texto;

private EditText campoTexto;

private Button diHolabt;

private Button restablecerBt;



    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

    }

}


Ahora debemos relacionar los objetos de la interfaz con los de la clase con la función "findViewById". La función onCreate debería quedarnos más o menos así:


@Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);



        texto = (TextView) findViewById(R.id.texto);

        campoTexto = (EditText) findViewById(R.id.campoTexto);

        diHolabt = (Button) findViewById(R.id.decirHolaBt);

        restablecerBt = (Button) findViewById(R.id.restablecerBt);

    }



Ahora ya solo queda decirle que cuando pulse el botón "diHolabt" escriba "Hola Mundo" en el label, y que cuando se pulse el botón "restablecer" se limpie el campo de texto. Para ello debemos declarar los listener "onClickListener" de ambos botones.



    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

 

        texto = (TextView) findViewById(R.id.texto);

        campoTexto = (EditText) findViewById(R.id.campoTexto);

        diHolabt = (Button) findViewById(R.id.decirHolaBt);

        restablecerBt = (Button) findViewById(R.id.restablecerBt);

 

        diHolabt.setOnClickListener(new OnClickListener(){

public void onClick(View v) {

// TODO Auto-generated method stub



}

        });

        restablecerBt.setOnClickListener(new OnClickListener(){



public void onClick(View v) {

// TODO Auto-generated method stub



}
        });

    }


No olvides usar las ayudas de Eclipse para ir completando el código. Por ejemplo, si pulsas "Ctrl+Shift+O" se incluirán los "import" necesarios automáticamente.
Ahora vamos decirle que cuando el botón "diHolabt" se pulse muestre el texto Hola Mundo Android en el label. Para ello escribimos lo siguiente:


diHolabt.setOnClickListener(new OnClickListener(){

public void onClick(View v) {

// TODO Auto-generated method stub

texto.setText("Hola Mundo, "+campoTexto.getText().toString()+"!!");

}

        });


En el listener de el otro botón le diremos que vacíe el valor del campo de texto y el label.


        restablecerBt.setOnClickListener(new OnClickListener(){

public void onClick(View v) {

// TODO Auto-generated method stub

texto.setText("Hola Mundo...");

campoTexto.setText("");

}

        });


¡Listo! Ya tenemos nuestra aplicación Hola Mundo Android preparada, si la ejecutamos, veremos como funciona correctamente.

Ahora te toca intentarlo a ti, cualquier problema, no dudes en comentar.

Artículos relacionados