Inicio » Cursos » Android Básico App Restaurante

Introducción al Curso

App Hola Mundo

App Calculadora

App Restaurante

  • 14.ImageView
  • 15.Layouts
  • 16.Activitys
  • 17.Bosquejos de la Aplicación
  • 18.Diseñando la App restaurante en XML
  • 19.Diseño del Menú de Opciones
  • 20.Diseño XML de las opciones Platos y Bebidas
  • 21.Diseño XML de las Pantallas Empresa y Galería
  • 22.Programación en Java de la pantalla inicial
  • 23.Programación en Java del menú de opciones
  • 24.Testing final

Curso Android Básico App Restaurante

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

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


3488 visitas

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Descargar ahora

Más cursos que pueden interesarte

Más cursos

Codea Codea App

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

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023