Vamos a programar #4 - Calculadora de resistencias para android

Hace algunos días alguien me envió una petición, en ella me preguntaba de la posibilidad de hacer la misma calculadora para resistencia pero en una versión para android.
El día de hoy vamos a ver precisamente eso: Cómo hacer una calculadora de resistencias para android.

¿Qué necesitamos?

  1. Android estudio (se puede usar eclipse).
  2. Un dispositivo que corra android (opcional ya que Android studio incluye emuladores de dispositivos con android).
  3. Un poco de paciencia.
**Nota: Este no es un tutorial para aprender a programar, para poder realizarlo debes de tener el mínimo de conocimiento en programación y Android studio ya instalado**

Paso 1. Creando el proyecto.

 Crearemos un proyecto nuevo.
Seleccionamos proyecto nuevo.
Luego llenaremos los datos que se nos piden. Por lo general  se pueden rellenar con los nombres que uno quiera, pero conveniencia se debe de usar uno de tal modo que no sea tan largo. en este caso y para mi proyecto le puse así:
Por conveniencia se debe de incluir "com" en esta caso el nombre final de mi proyecto es "com.mdev.calculadoraderesistencias".
La siguiente ventana nos muestra el tipo de dispositivo y la versión de android para la cual queremos crear nuestro proyecto, Para este solo marcaremos la opción de "teléfono y tableta" y en Minimum SDK podemos escoger cualquiera, pero solo para esta aplicación. Entre mas "baja" sea la API, en mayor numero de dispositivos funcionara, pero habrá casos en los que alguna característica no este disponible en la versión que seleccionemos, por lo que tendremos que elegir una mas alta. Para este caso podemos elegir cualquiera, ya que no emplearemos funciones complejas. En mi caso opté por la API 7, porque en el teléfono que tengo actualmente, está instalado Android 2.1.
Ademas hay que resaltar que si la aplicación corre en Android 2.1, correrá en 3.0, 4.4, 5.0, etc. entonces siempre en la medida de lo posible, hay que elegir la versión mas baja, así garantizaremos que funcionara en otros dispositivos con una versión superior, 
En este caso uso el API 7 por mi teléfono.
Después se nos preguntara si queremos agregar una "actividad", para está aplicación usaremos "Empty Activity".

Finalmente nos preguntara por los detalles para la "Activity" que queremos crear, no modifivcaremos nada y daremos clic en el botón "Finish".


Paso 2. La interfaz.

Para editar el archivo XML que controla hay que buscarlo en el proyecto. Para eso iremos al apartdo "Project" que se encuentra en el extremo derecho. Haremos clic y se abrirá un panel, navegaremos: app>res>layout>activity_main.xml. Hacemos doble clic en al archivo xml y se abrira el diseñador mostrandonos la interfaz actual.


Para la interfaz debemos de agregar los siguientes controles:
  1. Textview
  2. Spinner.
  3. Botón


En el modo texto pegamos lo siguiente:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.mdev.calculadoraderesistencias.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Color 1:"
        android:id="@+id/TV1"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
    <Spinner
        android:id="@+id/SpnColor1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/TV1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:spinnerMode="dialog" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Color 2"
        android:id="@+id/textView"
        android:layout_below="@+id/SpnColor1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <Spinner
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/SpnColor2"
        android:spinnerMode="dialog"
        android:layout_below="@+id/textView"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="false"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Color 3"
        android:id="@+id/textView2"
        android:layout_below="@+id/SpnColor2"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="false" />

    <Spinner
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/SpnColor3"
        android:spinnerMode="dialog"
        android:layout_below="@+id/textView2"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Color 4"
        android:id="@+id/textView3"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/SpnColor3" />

    <Spinner
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/SpnColor4"
        android:layout_below="@+id/textView3"
        android:spinnerMode="dialog"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Calcular"
        android:id="@+id/BtnCalculateIt"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignRight="@+id/SpnColor4"
        android:layout_alignEnd="@+id/SpnColor4" />

</RelativeLayout>

Tras implementarlo, la aplicacion debera lucir similar a la siguiente:



Por ahora es todo para no hacer tan largo este post, en la siguiente vamos a terminar de implementar toda la interfaz
Los leo luego.

No hay comentarios.