Diseñando la Calculadora IGV en XML

Lección 12 del Curso App Restaurante

Para diseñar una Calculadora debemos empezar por un bosquejo, para tener idea de los elementos que tendrá la interfaz traducidas a XML, vamos a diseñarla

Diseñando la Calculadora IGV en XML
Diseñando la Calculadora IGV en XML

¿Cómo diseñar una calculadora IGV en XML con Android Studio?

COMPRA ESTE CURSO

Y accede a todos los recursos y videos, explicación, scripts y descarga del código fuente disponible con la compra del curso

COMPRAR

¿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

Wireframe de la App Calculadora IGV

 

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">
            ....
        </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..


COMPRA ESTE CURSO

Y accede a todos los recursos y videos, explicación, scripts y descarga del código fuente disponible con la compra del curso

COMPRAR

906 visitas

Logo Codea App

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020