Inicio » Cursos » Android Básico App Restaurante

Diseñando la Calculadora IGV en XML | Curso Android Básico 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

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

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


3046 visitas

Curso Android Básico App Restaurante

Curso Android Básico App Restaurante

Descarga el código fuente del proyecto

USD 12.00 17.00


COMPRAR CURSO

Codea App
Codea App FullStack

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados Codea App | Cursos de programación | 2020 - 2022