Lección: 12 ➜ Diseñando la Calculadora IGV en XML

¿Cómo se empieza a crear una app?

Para crear una app en este caso una App para Calcular el IGV, debes tener una idea clara de los que deseas construir, tienes que pensar, hacer uso de tu creatividad y ello debe ser plasmado en un bosquejo,

¿Qué es un bosquejo o Mockups?

Es la idea traducida en un lienzo acerca de lo que se piensa desarrollar, normalmente se usa lápiz y papel, luego se puede llevar a un diseño digital como una imagen e incluso hay programas que simulan la interactividad.

En esta parte se debe plasmar las actividades que pueden realizar los usuarios al usar la Aplicación, entonces podemos deducir que viene a ser un prototipo en idea, pero aún no es un producto mínimo viable. 

Bosquejo del diseño de la Calculadora IGV

Es como debería verse la app cuando este desarrollada

Diseño XML

Es aquí donde declaramos los elementos que se usarán en la interfaz de la Aplicación Calculadora IGV, notaremos que los layouts tendrán una orientación vertical esto para apilar los elementos internos, estos elementos deben estar identificados con el atributo id para poder hacer referencia desde la actividad y asi acceder a ellos por código Java.

Entonces tendremos :

• 02 EditTexts, para entrada del subtotal e IGV
• 01 Button para lanzar el cálculo mediante un click
• 02 TextViews para mostrar el valor numérico y el valor pero en letras.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    android:layout_gravity="center_vertical"
    android:gravity="center_vertical"
    android:orientation="vertical"
    android:padding="10dp"
    tools:context=".MainActivity">
    <android.support.v7.widget.CardView
        app:cardElevation="10dp"
        android:background="#fff"
        android:padding="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:layout_gravity="center_vertical"
            android:gravity="center_vertical"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <EditText
                android:id="@+id/subtotal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Ingrese Subtotal" />

            <EditText
                android:id="@+id/igv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Ingrese IGV %" />

            <Button
                android:id="@+id/btncalcula"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="CALCULAR" />

            <TextView
                android:id="@+id/total"
                android:gravity="center_horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="0.00" />

            <TextView
                android:id="@+id/totaltexto"
                android:gravity="center_horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="..." />
        </LinearLayout>
    </android.support.v7.widget.CardView>


</LinearLayout>

Haciendo un parentesis hemos agregado más diseño a la interfaz como el elemento CardView, el cual debemos implementar agregando una dependencia adicional en el Gradle veamos :

implementation 'com.android.support:cardview-v7:28.0.0'

Con ésta dependencia podremos usar CardView para agregar un poco más de diseño a la Calculadora IGV, como sombra, color de fondo, etc..