Curso Android Básico App para un Restaurante
¿Cómo diseñar una calculadora IGV en XML con Android Studio?
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
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,
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.
Es como debería verse la app cuando este desarrollada
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 :
<?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..
4168 visitas
« Capítulo 11 – Botones y el evento onclick
Capítulo 13 – Programando la Calculadora en JAVA »
Descarga el código fuente del proyecto adquiriendo el curso completo
Comprar© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2024