Programación Android III-Interfaz

En anteriores tutoriales de programación Android vimos como configurar el entorno de desarrollo y nuestro primer Hola Mundo. Ahora vamos a intentar realizar una interfaz gráfica para el usuario, donde utilizaremos etiquetas, texto, botones y añadiremos un activity nuevo. Para ello creamos un nuevo Proyecto Android al que le pondremos el nombre que queramos.

Vamos a utilizar varios “LinearLayout” (Contenedores) y conseguir poner un TextView y un EditText juntos en la misma línea.

Escribimos en el main.xml:

<?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”

>

<LinearLayout android:orientation=”horizontal”

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”>

<TextView android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”@string/mitexto” />

<EditText android:id=”@+id/probando”

android:layout_width=”fill_parent”

android:layout_height=”wrap_content” />

</LinearLayout>

</LinearLayout>

Dentro de este LinearLayout tenemos los dos elementos, el primero:

<TextView android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”@string/mitexto” />

Renderiza el contenido de la variable “mitexto” que definamos en strings.xml.

Por ello, en dicho fichero, escribimos:

<string name=”mitexto”>Prueba de texto</string>

El otro elemento que definimos en el main.xml :

<EditText android:id=”@+id/probando”

android:layout_width=”fill_parent”

android:layout_height=”wrap_content” />

Es un campo de entrada de texto con identificador probando.

Probamos a arrancar nuestro proyecto:

Ahora vamos a hacer, que al escribir un número en el campo de texto, y al darle a un botón, lo multiplique x2 y aparezca el resultado.

Escribimos en el código del fichero main.xml:

<?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”

>

<LinearLayout android:orientation=”horizontal”

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”>

<TextView android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”@string/numero” />

<EditText android:id=”@+id/numero”

android:layout_width=”fill_parent”

android:layout_height=”wrap_content” />

</LinearLayout>

<LinearLayout android:orientation=”horizontal”

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”>

<TextView android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”Resultado” />

<EditText android:id=”@+id/resultado”

android:layout_width=”fill_parent”

android:layout_height=”wrap_content” />

</LinearLayout>

<Button android:id=”@+id/multiplicar”

android:text=”@string/multiplicar”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content” />

</LinearLayout>

Explicamos por partes:

Añadimos otro Layout, y dentro de él como hicimos anteriormente, ponemos un label (TextView), y un campo a rellenar(EditText), que en este caso será para mostrar el resultado de la multiplicación.

<LinearLayout android:orientation=”horizontal”

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”>

<TextView android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”Resultado” />

<EditText android:id=”@+id/resultado”

android:layout_width=”fill_parent”

android:layout_height=”wrap_content” />

</LinearLayout>

A ambos le damos un “id” identificador que posteriormente añadiremos en el fichero de strings.xml

Luego, fuera de ese layout, añadimos un botón:

<Button android:id=”@+id/multiplicar”

android:text=”@string/multiplicar”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content” />

Este botón tiene un id que corresponde a “multiplicar” y un contenido que definimos en el fichero de strings.xml

Ahora en el fichero de strings.xml editamos:

<?xml version=”1.0″ encoding=”utf-8″?>

<resources>

<string>Interfaz</string>

<string>Numero:</string>

<string>Cantidad</string>

<string>Multiplicar x2</string>

</resources>

Ahora debemos definir la acción determinada, para que cuando pulsemos el botón obtengamos los datos de un campo, lo multipliquemos y aparezca en el de resultado.Vamos a nuestro fichero interfaz.java:

Después de public class Interfaz extends Activity añadimos:

private EditText Minumero;

private EditText Miresultado;

Pulsamos Ctrl+shift+o  y automáticamente añadirá las librerías necesitadas.

Básicamente son “manejadores” que usaremos para entrelazar nuestras acciones en java con la interfaz definida en main.xml

Después de setContentView(R.layout.main), escribimos lo siguiente :

Minumero = (EditText) findViewById(R.id.numero);

Miresultado = (EditText) findViewById(R.id.resultado);

Lo que aquí hacemos, es asignar dichos manejadores a cada elemento definido en el main.xml (R.id.numeroR.id.resultado)

Ahora, añadimos un identificador para el botón justo después de las lineas anteriores:

Button Miboton = (Button) findViewById(R.id.multiplicar);

Que como se puede observar va definido al botón de nuestro xml.

Finalmente vamos a realizar la acción. Cada acción de los botones se define por la función setOnClickListener. Así que escribimos la función que hará que al presionar el botón obtendrá el valor de Minumero, lo multiplicará por dos y lo pondrá en Miresultado.

Miboton.setOnClickListener(new View.OnClickListener() {

public void onClick(View view) {

Miresultado.setText(“”+Double.parseDouble(Minumero.getText().toString())*2);

}

});

Como se observa, setText es el método relacionado para añadir el valor y getText para obtenerlo. Ejecutamos nuestro programa:

Para acabar vamos a crear una nueva activity y vamos a ver como ir de una pantalla a otra. En el fichero manifest.xml, después de </activity> añadimos:

<activity android:name=”.Activity2″></activity>

Aquí le decimos que aparte del Activity principal, también existe otro que se llama Activity2. Como un Activity, depende directamente de su propia interfaz (main.xml) y un fichero Java, tendremos que crear en cada carpeta unos nuevos para Activity2.En mi caso los he llamado main2.xmlActivity2.java

En nuestro main.xml añadimos un nuevo botón para pasar a la siguiente pantalla:

<Button android:id=”@+id/pantalla”

android:text=”Siguiente”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content” />

Definimos está variable al inicio:

private static final int REQST_CODE = 0;

Y definimos un nuevo botón  junto al anterior:

Button Next = (Button) findViewById(R.id.pantalla);

Ahora escribimos la acción que al presionar dicho botón nos llevará a Actitivity2:

Next.setOnClickListener(new View.OnClickListener() {

public void onClick(View view) {

startActivityForResult(new Intent(Interfaz.this,Activity2.class),REQST_CODE);

}

});

Así quedaría el código:

Arrancamos la aplicación y comprobamos que efectivamente al pulsar el botón pasamos de una pantalla a otra.

Si realizamos lo mismo añadiendo el botón y la acción correspondiente pero a la inversa en nuestro main2.xml y Activity2.java seremos capaces de ir de una ventana para otra.

Próximamente enseñaré como conectarnos a una página web mostrando una imagen, añadir iconos y cambiar el fondo de pantalla.

Ofertas en móviles y smartwatches
¿Buscas móvil nuevo o un smartwatch? No te pierdas estas ofertas! Podrás escoger tu móvil según el precio, tamaño de pantalla o marca para que escojas el que mejor se adapta a tus necesidades.
Móviles libres de ofertaSmartwatches

39 comentarios

  1.   Nacho dijo

    nice!

  2.   rikimm dijo

    Sigo insistiendo q t adelantas mucho para los que no saben programar deverias enseñar. Como q mas detallado las cosas para que sepan que es loq estan escriviendo solo tas dando la solucion pero no dices para que sirve cada codigo y el porque deve ser asi y una pregunta el codigo android en que lenguaje se basa en xml o en cual

    1.    Javi dijo

      No se puede pretender programar así de pronto, por arte de magia, algunos programadores incluso tenemos estudios!!! Fíjate!

      Creo que el tutorial es muy bueno. Sigue así.

  3.   L3st dijo

    Buenas, como ya dije en su momento, Android es Java(motor)+Xml(interfaz). Ya comenté que es necesario tener nociones de programación y de Java y de Xml, ya que la API de Android se basa en ella. No se puede construir la casa por el tejado.
    En este ejemplo, lo más “complicado” son los métodos que pueda tener un objeto, como un botón(onClickListener) o un texto…el resto son solo declaraciones.Un saludo

  4.   basi dijo

    Quería darte las gracias y animarte a seguir con estos tutoriales me están sirviendo de mucho. Gracias

  5.   L3st dijo

    Me alegro!.Dentro de semana y media publicaré el siguiente, ya que tengo que presentar un proyecto a Google España y ando corto de tiempo.Saludos

  6.   Jesús dijo

    Muchas gracias por el tutorial, me está resultando tremendamente útil. Tenía la programación olvidada desde hace algunos años, y estoy intentando volver a hacer algunas cosillas en mi tiempo libre 🙂

    Obviamente, está pensado para gente que ya conoce Java y XML. Pero como tú dices, es un requisito previo antes de empezar. Si quieren aprender Java desde cero, hay otros miles de sitios en la red para comenzar…

    Enhorabuena por tu trabajo.

  7.   danilo dijo

    excelente tutorial, me ha ayudado bastante ha solucionar algunas tareas en la universidad,
    saludos

    1.    Maestrillo dijo

      Ahora toca solucionar tareas del colegio y aprender ortografía, ánimo!

  8.   yedi dijo

    Entusiasmado con tus tutoriales y expectante del siguiente, puedes decir sobre que tratara?

    Un saludo y muchisimas gracias por tus explicaciones.

    P.D. Suerte con tu entrega. Si funciona bien pasate el apk y lo probamos en el mov.

  9.   gaby dijo

    Solo encuentro hasta el post 3 “Programacion Android III” ¿va a haber un IV?

  10.   L3st dijo

    Buenas, este domingo intentaré hacer un manual sencillo, y muy rápido y práctico de lo que adelanté anteriormente.

    Un saludo

  11.   zsewdc dijo

    Genial sigue así. por favor no lo dejes¡¡¡¡

  12.   Redd dijo

    Genial el tutorial, perfecto incluso para los que venimos de otros lenguajes y nos animamos con android 🙂
    Gracias y animo!

  13.   Chuker dijo

    Esta el tutorial número 4? No lo encrontré. Muy bueno tu trabajo!

  14.   nacholixh dijo

    excelente!
    espero mas tutoriales porque la verdad que son muy buenos 🙂

  15.   Miguel dijo

    Muy buenos , buen trabajo
    Por favor sigue publicando

  16.   Sph dijo

    Menuda mierda de tutorial, ponle ganas anda… no explicas una mierda.

  17.   Ser Lancelot dijo

    Estimado L3st, te agradezco sinceramente que emples tu tiempo en ayudar a la gente a programar para android, pero tengo que decirte que lamentablemente y despues de 3 entregas todavia no se ni siquiera abrir el proyecto cuento menos realizar capas,sentencias,cadenas ni el coñ…… su madre, quizas por que sea un inutil, quizas, quien sabe, pero tambien por que estoy hasta los webs de la gente( a nivel general, no es un comentario esclusivo para tu persona) que hace cursos orientados a la gente que sabe y yo creo que la gente que sabe no necesita cursos, quizas una pequeña orientacion, en este pais hacen falta cursos de nivel 0,0 patatero, por que incluso los de pago empiezan ya suponiendo que los niños saben correr y ni siquiera les han enseñado a andar… lamentablemente tengo que dar un voto negativo al curso, de forma constructiva y nunca con la intencion de ofender, solo con la intencion de qui si tu sabes programar y quieres compartir tus conocimientos con la gente, por favor hazlo desde 0 ,QUE ES ANDROID?, DE QUE SE COMPONE?,CUAL ES SU ESTRUCTURA?,QUE SENTENCIAS SE PUEDEN PROGRAMAR?,etc…. o si sabes de alguna pagina donde den este curso postea el link , muchas gracias.

  18.   Patri dijo

    Hola, tengo que hacer una aplicación con android donde tengo que centrarme básicamente en el interfaz de usuario. Podrias ayudarme con un tutorial centrandote basicamente en dudas como el tamaño de las imagenes, insertar imagenes en botones, q tamañan de pantalla utilizar para una aplicación que quieres q funciones en diferentes tamaños,etc.. muchas gracias!
    Patri

  19.   Foxi dijo

    Buenas, L3st:
    Me siento profundamente apenado al comprobar que hay gente ingrata que no sabe reconocer un trabajo de tipo cultural, como puede ser ‘el compartir conocimientos’.
    Reconozco que, como ignorante recién iniciado del tema que soy, me he perdido en algunas de las explicaciones de los diferentes post… Aunque sí que me han servido como base para: retocando al gusto; con pinceladas de otros post; y un poco de intuición de programador creativo… Al final, quedarme a muy poquito de completar el ‘maldito’ ejemplo final.
    Antes de completar tu mini-cursillo, he querido darme una pausa para felicitarte y animarte, y de paso protestar por la falta de detalle (sin duda culpa de nuestra ignorancia), de la cual algunos compañeros protestan con muy malas maneras.
    Sin mas, saludos, Foxi.

  20.   Joseba dijo

    Aún no empecé con el tutorial. No sé si me servirá o si no, aunque vengo de programar en otros lenguajes y espero poder aprovecharlo. Primero para pequeñas cosas y poco a poco llegar a dominarlo. La gente no es consciente de la generosidad de alguien que domina un tema y se molesta en compartir aunque sea un 10% de su conocimiento. No te va a enseñar todo, pero con que puedas atisbar como se pueden hacer las cosas ya es mucho. Hasta la gente que llevamos años programando nos atascamos. Hay que solucionar los problemas uno a uno. No se puede pretender que en un tutorial te lo cuenten todo. Solo quería dar las gracias.

  21.   egrojack dijo

    hola!!! son geniales tus tutos,,, oie donde puedo conseguir informacion de de las librerias
    bueno k andes genial
    saludos!!

  22.   Introduce tu nombre... dijo

    Felicidades por el tutorial, gracias. ¿para cuando la cuarta entrega?

  23.   eladerezador dijo

    Hola, no he conseguido reproducir el ejemplo, que rabia, pero tiene que ser una tonteria, solo me da un error, justo en está instrucción:

    startActivityForResult(new Intent(Interfaz.this,Activity2.class),REQST_CODE);

    Y el error en eclipse es: No enclosing instance of the type Interface is accesible in scope, es como si desde la clase principal, no pudiera acceder a Interfaz.class, el error justo me da en el paso de parámetro “Interfaz.this”

    ¿Me puede echar alguien una mano?

    1.    Omar dijo

      creo que llegue un poco tarde pero aun si contestare la pregunta de eladerezador, tal vez a alguien mas le ayude, tu problema consiste, desde mi punto de vista, es que no invocas al nombre de tu clase, !!que es lo que debes hacer!!, poner el nombre de tu clase principal en lugar de interfaz bueno, yo iwal soy nuevo, pero a mi me jala bien todo de perlas…

  24.   ixrikixrik dijo

    Muchas gracias por estos tutoriales, en verdad me están sirviendo de mucho para adentrarme al mundo de la programación para android. Sigue adelante 😀 (y).

  25.   Mirna dijo

    Hola, me resulta muy útil el tutorial, sigue así. Tengo una duda: cómo relaciono mi nuevo activity con el main2.xml, porque le he puesto un botón y sale en blanco. ¿Cómo se relacionan las clases java con su correspondiente interfaz xml?

    Gracias

  26.   Javier dijo

    Hola, primero te felicito por poner tus conocimientos y tu tiempo al servicio de todos.
    Lamentablemente hay que leer cosas como: no explicás nada, como aprendo desde 0 y programo una aplicación top en el market??, en youtube he visto comentarios a alguién que le pedia que le pase la pagina o el video desde donde habia aprendido a tocar un determinado tema.
    Estamos mal acostumbrados a que en la página tal o googleando todo se resuelve, para que voy a ir a estudiar 10 años una carrera si buscando un tutorial o wikipedia ya está?
    Lo que vos (tu) hacés (haces) es un complemento o una manera rapida y comoda de ver código para estudiarlo, en fin.
    Un saludo y dejo una pregunta haber si me pueden ayudar:
    quiero entrar a trabajar en Aerolineas y necesitaria alguna página o algún tutorial para aprender a manejar un boing 777.
    saludos

  27.   Jafir dijo

    espero que alguien me pueda solucionar este error que me sale al correr la aplicacion
    [2011-09-02 11:32:29 – Emulator] invalid command-line parameter: Files.
    [2011-09-02 11:32:29 – Emulator] Hint: use ‘@foo’ to launch a virtual device named ‘foo’.
    [2011-09-02 11:32:29 – Emulator] please use -help for more information

    1.    ikatznet dijo

      Jafir, es posible que sea la ruta de la sdk, q por defecto se instala en c:\Program Files ó c:\Program Files (x86). y son los blancos de la ruta lo que provoca el fallo, prueba poniendo el path de esta forma: C:\Progra~1\ o C:\Progra~2\ (en caso de que sea program files (x86)).
      (en mi caso x ejemplo: C:\Progra~2\Android\android-sdk)

      L3ST Enhorabuena por el tutorial, un excelente trabajo, aunque visto queda que hay gente muy poco agradecida además de mal educada.

  28.   arucha dijo

    hola a todos! esto funciona genial, muchísimas gracias!! ¿existe un iv? estoy aprendiendo un montón y me gustaría seguir con este tutorial que sale todo clarísimo!

    Gracias!

  29.   Julio Rodriguez dijo

    Muy aporte mano que genial la idea de publicarlo, Saludos!

  30.   dannka dijo

    Muy buena informacion me ayudo mucho solo que lo que quiero es cachar una direccion y cuando precione aceptar se lance a la pagina (“buscador”) si pudieras ayudar en eso esto es lo que llevo
    hola = (EditText) findViewById(R.id.EditText01);

    this.peticion.setOnClickListener(new OnClickListener()
    {

    public void onClick(View arg0) {
    //mipagina.getTex(String.valueOf(hola));
    hola.setText(mipagina);
    Uri uri = Uri.parse(hola);
    Intent intent = new Intent(Intent.ACTION_VIEW, uri);
    startActivity(intent);
    }
    });

  31.   Julian_62 dijo

    Hasta Ahora todo de maravillas espero no avandones este proyecto por lo menos hasta que consideres que podemos volar sólos. desde ya muchas gracias

  32.   Julian_62 dijo

    Hasta Ahora todo de maravillas espero no avandones este proyecto por lo menos hasta que consideres que podemos volar sólos. desde ya muchas gracias

  33.   Pollito Kadaj S dijo

    como paso datos de un edittext a un login en una pagina web alguna idea?

  34.   Jordi dijo

    muchas gracias!, no sabía como conseguir poner dos botones en la misma línea y tu ejemplo me ha venio muy bien.
    Otra cosa: alguién sabe como hacer que un DatePicker se muestre en formato dia mes año, en vez de mes dia año?.
    Muchas gracias.

  35.   Pablo Fort dijo

    no lo podrías subir al proyecto?, lo intente copiar y me dio errores por todos lados, sobre todo con los IDs

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *