DESAROLLO DE APLICACIONES EN ANDROID II

INVESTIGACIÓN TEMA I

ALUMNO:
GONZÁLEZ PÁEZ JOSÉ ÁNGEL

FECHA DE ENTREGA:
VIERNES 17 DE SEPTIEMBRE DEL 2021

)LUPDGRGLJLWDOPHQWHSRU-RVp

-RVp
ÈQJHO*RQ]iOH]3iH]
'1FQ -RVpÈQJHO*RQ]iOH]
3iH]JQ -RVpÈQJHO*RQ]iOH]
3iH]F 0;0H[LFRO 0;0H[LFR

ÈQJHO R 7HFQROyJLFRGH(VWXGLRV
6XSHULRUHVGH&KDOFR
RX ,QJHQLHUtDHQ6LVWHPDV

*RQ]iOH] &RPSXWDFLRQDOHV
H MRVHBJS#WHVFKHGXP[
0RWLYR6R\HODXWRUGHHVWH

3iH] GRFXPHQWR
8ELFDFLyQ&KDOFR
)HFKD

1
Contenido

Introducción .................................................................................................................................................. 5
Desarrollo ...................................................................................................................................................... 6
1.1 Animación cuadro a cuadro (Frame animation) ........................................................................... 6
1.1.1 Secuencia de imágenes ......................................................................................................... 6
1.1.2 Lista de animación ................................................................................................................ 6
1.1.3 Iniciar animaciones .............................................................................................................. 8
1.1.4 Selector animado .................................................................................................................. 9
1.1.5 AnimaciónDrawable .............................................................................................................. 9
1.1.6 Atributos XML ..................................................................................................................... 10
1.1.7 Cómo usar AnimationDrawable .......................................................................................... 10
1.2 Animación sincronizada (Tween animation)..................................................................................... 12
1.2.1 Atributos de las transformaciones Tween .......................................................................... 13
1.2.2 Ejemplo: .............................................................................................................................. 14
1.2.3 Interpoladores..................................................................................................................... 15
1.2.4 Interpolador lineal .............................................................................................................. 16
1.2.5 Acelerar Interpolador acelerador interpolador .................................................................. 17
1.2.6 Decelerate Interpolator Deceleration Interpolator ............................................................ 18
1.2.7 El interpolador acelera primero y luego desacelera el interpolador .................................. 19
1.2.8 Bounce Interpolator Bounce Interpolator .......................................................................... 20
1.3 Trabajar con Gráficos 2D............................................................................................................. 21
1.3.1 Recursos dibujables ............................................................................................................ 21
1.3.2 Ejemplo ...................................................................................................................................... 23
Conclusión ................................................................................................................................................... 25
Referencias.................................................................................................................................................. 26

2
Índice de Figuras

Figura 1. Secuencia de imágenes .................................................................................................................. 6

Figura 2. Inicio de animacion. ....................................................................................................................... 8
Figura3. Fin de animacion. ............................................................................................................................ 8
Figura 5. Proceso de Animacion.................................................................................................................... 9
Figura 6. AnimationDrawable ..................................................................................................................... 11
Figura 7. Tween Animation ......................................................................................................................... 12
Figura 8. Interpolador Lineal ....................................................................................................................... 16
Figura 9. Interpolador acelerador interpolador .......................................................................................... 17
Figura 10. Interpolator Deceleration Interpolator ...................................................................................... 18
Figura 11. El interpolador acelera primero y luego desacelera .................................................................. 19
Figura 12. Bounce Interpolator ................................................................................................................... 20
Figura 13. Animacion en 2D ........................................................................................................................ 24

3
Índice de Tablas

Tabla 1. Atributos XML................................................................................................................................ 10

Tabla 2. Atributos especifico Tween Animation ......................................................................................... 14
Tabla 3. Clases de interpolador................................................................................................................... 15

4
Introducción

Android es un sistema operativo multidispositivo, inicialmente diseñado para teléfonos móviles. En la

actualidad se puede encontrar también en múltiples dispositivos, como ordenadores, tabletas, GPS,
televisores, discos duros multimedia, miniordenadores, cámaras de fotos, etcétera. Incluso se ha instalado
en microondas y lavadoras. Está basado en Linux, que es un núcleo de sistema operativo libre, gratuito y
multiplataforma. Este sistema operativo permite programar aplicaciones empleando una variación de Java
llamada Dalvik, y proporciona todas las interfaces necesarias para desarrollar fácilmente aplicaciones que
acceden a las funciones del teléfono (como el GPS, las llamadas, la agenda, etcétera) utilizando el lenguaje
de programación Java. Su sencillez, junto a la existencia de herramientas de programación gratuitas, es
principalmente la causa de que existan cientos de miles de aplicaciones disponibles, que amplían la
funcionalidad de los dispositivos y mejoran la experiencia del usuario. Este sistema operativo está
cobrando especial importancia debido a que está superando al sistema operativo por excelencia: Windows.
Los usuarios demandan cada vez interfaces más sencillas e intuitivas en su uso; por esto, entre otras
cosas.Android dispone de tres mecanismos para crear animaciones en las aplicaciones: -
AnimationDrawable: mediante esta clase, ya vista en el apartado anterior, podemos crear drawables que
reproducen una animación fotograma a fotograma (en inglés se denomina Frame Animation). -
Animaciones Tween: crean efectos de translación, rotación, zoom y alfa a cualquier vista de una aplicación
Android, cambiando su representación en la pantalla. - API de animación de Android: anima cualquier
propiedad de un objeto Java sea del tipo Vista o no, modificando el objeto en sí mismo.

5
Desarrollo

1.1 Animación cuadro a cuadro (Frame animation)

1.1.1 Secuencia de imágenes

La idea detrás de una animación de fotogramas es simple: recorreremos una serie de imágenes muy
rápidamente, como un rollo de película antiguo. El "marco" se refiere a una sola imagen. Por tanto, el
primer paso para crear una animación de fotogramas personalizada es crear una secuencia de imágenes.
Se tiene dos opciones aquí: podemos usar elementos de diseño XML (como elementos de diseño de
formas) o archivos de imagen reales. En aras de la simplicidad, se usara la siguiente serie de imágenes
PNG:

Figura 1. Secuencia de imágenes

En una aplicación de producción, también se asegurará de que las imágenes tengan el tamaño adecuado
para las diferentes densidades de pantalla. Por ahora, guarde esas imágenes en la res/drawable-
mdpicarpeta y termine el día. También se recomienda renombrar de una manera autodescriptiva,
como ic_heart_0.png, ic_heart_1.png etc. De esta forma, se conoce el orden de las imágenes sin tener
que verlas.

1.1.2 Lista de animación

Animation-list es la opción de animación de fotogramas predeterminada, ya que se introdujo en la API 1.

Funciona en todas partes y es simple. Simplemente recorre una secuencia de imágenes proporcionadas
en un orden determinado con duraciones determinadas.
Aquí hay un ejemplo de una lista de animación para mi corazón llenándose, colocada en
res/drawable/animation_list_filling.xml:

<?xml version="1.0" encoding="utf-8"?>

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">

<item
android:duration="500"
android:drawable="@drawable/ic_heart_0"/>

6
 <item
android:duration="500"
android:drawable="@drawable/ic_heart_25"/>

<item
android:duration="500"
android:drawable="@drawable/ic_heart_50"/>

<item
android:duration="500"
android:drawable="@drawable/ic_heart_75"/>

<item
android:duration="500"
android:drawable="@drawable/ic_heart_100"/>

</animation-list>

Cada elemento de la lista solo apunta a una de las imágenes de nuestra secuencia anterior. Todo lo que
tendra que hacer es colocar en el orden correcto y luego agregar una duración adecuada en milisegundos.

Y aquí hay un ejemplo de una lista de animación para el vaciado de mi corazón, colocada en

res/drawable/animation_list_emptying.xml:

?xml version="1.0" encoding="utf-8"?>

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">

<item
android:duration="500"
android:drawable="@drawable/ic_heart_100"/>

<item
android:duration="500"
android:drawable="@drawable/ic_heart_75"/>

<item
android:duration="500"
android:drawable="@drawable/ic_heart_50"/>

<item
android:duration="500"
android:drawable="@drawable/ic_heart_25"/>

<item
android:duration="500"
android:drawable="@drawable/ic_heart_0"/>

</animation-list>

7
Es posible que observe android:oneshot=”true”en ambos fragmentos de código, que es simplemente un
atributo de la lista de animación para reproducir la animación una vez y luego detenerse. Si se establece
en "falso", la animación se repetirá.

En producción, la duración de 500ms. También se tendrá en cuenta que cinco fotogramas no son muchas
imágenes para una transición suave. La cantidad de marcos que se utilizarán y cuánto tiempo se mostrarán
es un problema que se debe resolver de forma individual. Para un marco de referencia, 15 cuadros a 15
ms es muy suave.

1.1.3 Iniciar animaciones

El comportamiento para iniciar las animaciones difiere entre las dos implementaciones, por lo que se
comenzara con la lista de animaciones.

Lista de animación

En la Actividad, se tomará una referencia a ImageView y luego comenzará la animación, así:

ImageView mImageViewFilling = (ImageView)

findViewById(R.id.imageview_animation_list_filling);
((AnimationDrawable) mImageViewFilling.getBackground()).start();

Asi es como se ve:

Figura 2. Inicio de animacion.

Ahora para su código de socio (idéntico excepto por la identificación):

ImageView mImageViewEmptying = (ImageView)

findViewById(R.id.imageview_animation_list_emptying);
((AnimationDrawable) mImageViewEmptying.getBackground()).start();

Y así es como se ve esa parte:

Figura3. Fin de animacion.

8
Esos fragmentos de código se pueden colocar onCreate(comienzan automáticamente cuando comienza
la actividad) o en un OnClickListener(espera la interacción del usuario).

1.1.4 Selector animado

Cuando se utiliza el selector animado, la animación se activará siempre que se cumpla la condición basada
en el estado para el selector. En la muestra simple, se agrega un oyente de clics al ImageView en
el onCreate método de la Actividad:

ImageViewSelector.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mImageViewSelector.setActivated(!mImageViewSelector.isActivated());
}
});

Cuando el usuario hace clic en nuestro corazón, el corazón se llenará o se vaciará, según el estado
actual. Aquí hay un bonito GIF de mi corazón dando vueltas hacia adelante y hacia atrás para siempre
(presumiblemente con un usuario haciendo clic en cada estado lleno y vacío):

Figura 5. Proceso de Animacion.

1.1.5 AnimaciónDrawable

Objeto que se utiliza para crear animaciones fotograma a fotograma, definido por una serie de objetos
dibujables, que se pueden utilizar como fondo de un objeto de vista.
La forma más sencilla de crear una animación fotograma a fotograma es definir la animación en un archivo
XML, colocarlo en la carpeta res / drawable / y establecerlo como fondo de un objeto View. Luego,
llame start() para ejecutar la animación.
Un AnimationDrawable definido en XML consta de un solo <animation-list>elemento y una serie
de <item>etiquetas anidadas.

9
1.1.6 Atributos XML

android:drawable Referencia a un recurso dibujable para usar en el

marco.

android:duration Cantidad de tiempo (en milisegundos) para

mostrar este marco.

Si es verdadero, la animación solo se ejecutará

android:oneshot
una vez y luego se detendrá.

android:variablePadding Si es verdadero, permite que el relleno del

elemento de diseño cambie según el estado actual
seleccionado.
android:visible Proporciona el estado de visibilidad inicial del
dibujable; el valor predeterminado es falso.

Tabla 1. Atributos XML

1.1.7 Cómo usar AnimationDrawable

Una forma de animar Drawables es cargar una serie de recursos de elementos de diseño uno tras otro
para crear una animación. Se trata de una animación tradicional, en el sentido de que se crea con una
secuencia de imágenes diferentes que se reproducen en orden, como un rollo de película. La clase
AnimationDrawable es la base de las animaciones de elementos de diseño.
Si bien puedes definir los fotogramas de una animación en tu código con la API de la clase
AnimationDrawable, es más sencillo hacerlo con un solo archivo XML que detalla los fotogramas que
componen la animación. El archivo XML para este tipo de animación debe encontrarse en el directorio
res/drawable/ de tu proyecto de Android. En este caso, las instrucciones son el orden y la duración de cada
fotograma de la animación.
El archivo XML consta de un elemento <animation-list> como nodo raíz y una serie de nodos
secundarios <item> que definen un fotograma cada uno: un recurso de elemento de diseño para el
fotograma y la duración de este. A continuación, se incluye un ejemplo de archivo XML para una animación
de elementos de diseño:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
<item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
<item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>

10
Esta animación se ejecuta durante solo tres fotogramas. Si configuras el atributo android:oneshot de la
lista como true, la animación se reiniciará una sola vez y, luego, se detendrá y se mantendrá en el último
fotograma. Si lo configuras como false, la animación se repetirá de manera indefinida. Con este XML
guardado como rocket_thrust.xml en el directorio res/drawable/ del proyecto, se puede agregar como
imagen de fondo a una vista y, luego, se lo puede llamar para reproducirlo. A continuación, se muestra un
ejemplo de actividad en el que la animación se agrega a una ImageView y después se anima cuando se
toca la pantalla:

Figura 6. AnimationDrawable

11
1.2 Animación sincronizada (Tween animation)

Una animación “tween” (del inglés “between”, que significa en medio o entre) consiste en realizar una serie
de transformaciones simples en las Vistas de una Actividad, como su posición, tamaño, rotación y
transparencia. Por ejemplo, es posible mover, rotar, modificar el tamaño o cambiar la transparencia a un
objeto del tipo TextView.
La clase Animation de Android es la que permite crear animaciones en las Vistas de una Actividad.
Las instrucciones que definen esta animación son transformaciones donde indicamos cuándo ocurrirán y
cuánto tiempo tardarán en completarse. Estas transformaciones pueden ejecutarse de forma secuencial o
simultánea. Cada tipo de transformación posee unos parámetrosespecíficos, si bien existen unos
parámetros comunes a todas ellas, como son el tiempo de duración y de inicio.
Los ficheros XML que definen animaciones deben almacenarse en el directorio res/
anim/ del proyecto Android y deben contener un único elemento raíz que indique las transformaciones que
deseamos ejecutar. Esta etiqueta raíz debe ser una de las siguientes:
- <translate>: mueve la Vista.

- <rotate>: rota la Vista.

- <scale>: escala la Vista.

- <alpha>: modifica la opacidad de la Vista.

- <set>: conjunto de varias transformaciones anteriores.

Por defecto, todas las instrucciones de una animación ocurren a partir del instante inicial. Si es necesario
que una animación comience más tarde, hay que especificar su atributo startOffset

Figura 7. Tween Animation

12
1.2.1 Atributos de las transformaciones Tween

Los atributos siguientes se aplican a todas las transformaciones:

- startOffset: instante inicial de la transformación en milisegundos.

- duration: duración de la transformación en milisegundos.

- repeatCount: número de repeticiones adicionales de la animación.

- Interpolator: permite acelerar o desacelerar la animación.

Alguno de sus valores posibles es:

o accelerate_decelerate_interpolator
o accelerate_interpolator
o anticipate_interpolator
o anticipate_overshoot_interpolator
o bounce_interpolator
o cycle_interpolator
o decelerate_interpolator
o linear_interpolator
o overshoot_interpolator

Veamos ahora la lista de transformaciones que tiene atributos específicos:

Nombre transformación Atributo Descripción

fromXDelta Valores inicial y final del

toXDelta desplazamiento en el eje X.
<translate>
efromYDelta Valores inicial y final del
toYDelta desplazamiento en el eje Y.

Grado inicial y final de la

fromDegrees rotación. Para realizar un giro
toDegrees completo en sentido antihorario
debemos establecer 0 y 360
respectivamente. Para sentido
horario, de 360 a 0 o de 0 a -360.
Para dos giros consecutivos
<rotate> escribe 0 y 720.

Punto sobre el que se realiza el

pivotX giro que queda fijo en la pantalla.
pivotY

13
 fromXScale Valor inicial y final para la escala
toXScale del eje X (0.5=50%, 1=100%)

fromYScale Valor inicial y final para la escala

<scale> toYScale del eje Y

pivotX Punto sobre el que se realiza el

pivotY giro que queda fijo en la pantalla.

fromAlpha, Valor inicial y final de la

<Alpha> toAlpha opacidad.

Tabla 2. Atributos especifico Tween Animation

1.2.2 Ejemplo:

Archivo XML guardado en res/anim/hyperspace_jump.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<scale

android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1.0"
android:toXScale="1.4"
android:fromYScale="1.0"
android:toYScale="0.6"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="false"
android:duration="700" />
<set
android:interpolator="@android:anim/accelerate_interpolator"
android:startOffset="700">
<scale
android:fromXScale="1.4"
android:toXScale="0.0"
android:fromYScale="0.6"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="400" />
<rotate
android:fromDegrees="0"
android:toDegrees="-45"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="400" />
</set>
</set>

14
Este código de la aplicación aplicará la animación a un ImageView y comenzará la animación:

ImageView image = (ImageView) findViewById(R.id.image);

Animation hyperspaceJump = AnimationUtils.loadAnimation(this,
R.anim.hyperspace_jump);
image.startAnimation(hyperspaceJump);

1.2.3 Interpoladores

Un interpolador es un modificador de animación definido en XML que afecta la velocidad de cambio en una animación.
Esto permite que los efectos de animación existentes se aceleren, se desaceleren, se repitan, reboten, etc.
Se aplica un interpolador a un elemento de animación con el atributo android:interpolator, cuyo valor es una referencia
a un recurso de interpolador.
Todos los interpoladores disponibles en Android son clases secundarias de la clase Interpolator. Para cada clase de
interpolador, Android incluye un recurso público al que puedes hacer referencia a fin de aplicar el interpolador a una
animación mediante un atributo android:interpolator. En la siguiente tabla, se especifica el recurso que corresponde usar
para cada interpolador:

Clase de interpolador ID del recurso

AccelerateDecelerateInterpolator @android:anim/accelerate_decelerate_interpolator
AccelerateInterpolator @android:anim/accelerate_interpolator
AnticipateInterpolator @android:anim/anticipate_interpolator
AnticipateOvershootInterpolator @android:anim/anticipate_overshoot_interpolator
BounceInterpolator @android:anim/bounce_interpolator
CycleInterpolator @android:anim/cycle_interpolator
DecelerateInterpolator @android:anim/decelerate_interpolator

Tabla 3. Clases de interpolador

Aquí se indica cómo se puede aplicar uno de estos con el atributo android:interpolator:

<set android:interpolator="@android:anim/accelerate_interpolator">
...
</set>

15
1.2.4 Interpolador lineal

ID de recurso: @android: anim / linear_interpolator

etiqueta xml: linearInterpolator
Fórmula de función: y = t
Explicación del sistema de coordenadas: el eje x representa el progreso de la animación, el rango de valores es [0.0,
1.0] y el eje y representa el valor obtenido, que puede ser positivo o negativo, 1.0 es su valor objetivo, el significado de
los siguientes gráficos es el mismo

Figura 8. Interpolador Lineal

16
1.2.5 Acelerar Interpolador acelerador interpolador

ID de recurso: @android: anim / accelerate_interpolator

etiqueta XML: accelerateInterpolator

Fórmula de función: y = t ^ (2f)

Constructor de parámetros: public AccelerateInterpolator (factor flotante) atributo xml: android: factor

Descripción: la velocidad inicial es 0, la velocidad es cada vez más rápida y el movimiento se acelera. Vea la imagen
para ver el efecto del tamaño del factor en la curva.

Figura 9. Interpolador acelerador interpolador

17
1.2.6 Decelerate Interpolator Deceleration Interpolator

ID de recurso: @android: anim / decelerate_interpolator

etiqueta XML: decelerateInterpolator
Fórmula de función: y = 1- (1-t) ^ (2f)
Constructor parametrizado: public DecelerateInterpolator (factor flotante) atributo xml: android: factor
Descripción: La velocidad inicial no es 0, la velocidad es cada vez más lenta y la velocidad final es 0, desacelerando.
Vea la imagen para ver el efecto del tamaño del factor en la curva.

Figura 10. Interpolator Deceleration Interpolator

18
1.2.7 El interpolador acelera primero y luego desacelera el interpolador

ID de recurso: @android: anim / accelerate_decelerate_interpolator

etiqueta XML: accelerateDecelerateInterpolator

Fórmula de función: y = cos ((t + 1) π) /2+0.5

Descripción: la velocidad comienza desde 0, primero acelera y luego acelera, y finalmente la velocidad es 0

Figura 11. El interpolador acelera primero y luego desacelera

19
1.2.8 Bounce Interpolator Bounce Interpolator

ID de recurso: @android: anim / bounce_interpolator

etiqueta XML: bounceInterpolator

Figura 12. Bounce Interpolator

20
1.3 Trabajar con Gráficos 2D

Los recursos dibujables son una técnica popular en las aplicaciones de Android. Al igual que con otros recursos,
Drawable Resources son declarativos: se definen en archivos XML. Este enfoque permite una separación limpia del
código de los recursos. Esto puede simplificar el desarrollo y el mantenimiento porque no es necesario cambiar el código
para actualizar o cambiar los gráficos en una aplicación de Android. Sin embargo, aunque los recursos dibujables son
útiles para muchos requisitos gráficos simples y comunes, carecen del poder y el control de la API de Canvas.
La otra técnica, que utiliza el objeto Canvas , es muy similar a otros marcos de API tradicionales como System.Drawing
o Core Drawing de iOS. El uso del objeto Canvas proporciona el mayor control sobre cómo se crean los gráficos 2D. Es
apropiado para situaciones en las que un recurso dibujable no funcionará o será difícil trabajar con él. Por ejemplo,
puede ser necesario dibujar un control deslizante personalizado cuya apariencia cambiará según los cálculos
relacionados con el valor del deslizador.

1.3.1 Recursos dibujables

Los recursos dibujables se definen en un archivo XML en el directorio /Resources/drawable. A diferencia de la

incrustación de PNG o JPEG, no es necesario proporcionar versiones específicas de densidad de Drawable
Resources. En tiempo de ejecución, una aplicación de Android cargará estos recursos y usará las instrucciones
contenidas en estos archivos XML para crear gráficos 2D. Android define varios tipos diferentes de recursos dibujables:

• ShapeDrawable : este es un objeto dibujable que dibuja una forma geométrica primitiva y aplica un conjunto
limitado de efectos gráficos en esa forma. Son muy útiles para cosas como personalizar botones o configurar
el fondo de TextViews. Veremos un ejemplo de cómo usar un ShapeDrawablemás adelante en este artículo.

• StateListDrawable : este es un recurso dibujable que cambiará la apariencia según el estado de un widget /
control. Por ejemplo, un botón puede cambiar su apariencia dependiendo de si se presiona o no.

• LayerDrawable : este recurso dibujable que apilará varios otros elementos dibujables uno encima del
otro. En la siguiente captura de pantalla se muestra un ejemplo de LayerDrawable :

• TransitionDrawable : este es un LayerDrawable pero con una diferencia. Un TransitionDrawable puede

animar una capa que se muestra sobre otra.

• LevelListDrawable : es muy similar a StateListDrawable en el sentido de que mostrará una imagen basada en
ciertas condiciones. Sin embargo, a diferencia de StateListDrawable , LevelListDrawable muestra una imagen
basada en un valor entero. Un ejemplo de LevelListDrawable sería mostrar la fuerza de una señal WiFi. A
medida que cambia la intensidad de la señal WiFi, el elemento de diseño que se muestra cambiará en
consecuencia.

• ScaleDrawable / ClipDrawable : como su nombre lo indica, estos elementos de diseño proporcionan funciones
de escalado y recorte. El ScaleDrawable escalará otra Disponibles, mientras que el ClipDrawable recortará
otra Disponibles.

• InsetDrawable : este Drawable aplicará inserciones en los lados de otro recurso Drawable. Se utiliza cuando
una vista necesita un fondo más pequeño que los límites reales de la vista.

• XML BitmapDrawable : este archivo es un conjunto de instrucciones, en XML, que se ejecutarán en un mapa
de bits real. Algunas de las acciones que puede realizar Android son el mosaico, el difuminado y el
suavizado. Uno de los usos más comunes de esto es colocar un mapa de bits en el fondo de un diseño.

21
Para dibujar figuras geometricas:

• drawCircle(float cx, float cy, float radio, Paint pincel)

• drawOval(RectF ovalo, Paint pincel)

• drawRect(RectF rect, Paint pincel)

• drawPoint(float x, float y, Paint pincel)

• drawPoints(float [] pts, Paint pincel)

Para dibujar lineas y arcos:

• drawLine(float iniX, float iniY, float finX, float finY, Paint pincel)

• drawLines(float [] pts, Paint pincel)

• drawArc(RectF ovalo, float iniAngulo, float angulo, boolean usarCentro, Paint pincel)

• drawPath(Path trazo, Paint pincel)

Este simplemente dibujara lineas y arcos con las coordenadas enviadas

Para dibujar texto:

• drawText(String texto, float x, float y, Paint pincel)

• drawTextOnPath(String texto, Path trazo, float desplazamHor, float desplazamVer, Paint pincel)

• drawPosText(String texto, float [] posicion, Paint pincel)

Este es el metodo para “dibujar” o mejor dicho representar texto dentro de nuestra area de canvas

Para rellenar con color nuestra area:

• drawColor(int color)

• drawARGB(int alfa, int rojo, int verde, int azul)

• drawPaint(Paint pincel)

22
1.3.2 Ejemplo

Una vez creada la app se prosigue a modificar nuestra clase EjemploGraficosActivity veamos su codigo actual:

package org.example.ejemplograficos;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class EjemploGraficosActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

Se modificará con el siguiente código:

package org.example.ejemplograficos;

import android.content.Context;
import android.graphics.Canvas;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class EjemploGraficosActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new EjemploView(this));
}

public class EjemploView extends View {

public EjemploView(Context context){
super(context);
}

@Override
protected void onDraw(Canvas canvas){
// Aca iran las proximas instrucciones
}
}
}

23
Con este código simple se podrá hacer pruebas para dibujar en un canvas para ello se realizará la siguiente modificación
en el método onDraw():

protected void onDraw(Canvas canvas){

Paint pincel = new Paint();
pincel.setColor(Color.BLUE);
pincel.setStrokeWidth(8);
pincel.setStyle(Paint.Style.STROKE);
canvas.drawCircle(150,150,100,pincel);
}

Se crea un objeto pincel de la clase Paint, se iniciara, luego se le asigna el color azul por medio de esa constante, luego
se define el ancho del mismo, seteamos el estilo y por último se utiliz el metodo drawCircle() con unas coordenadas
para dibujarlo obteniendo el siguiente resultado

Figura 13. Animacion en 2D

24
Conclusión

En la animación, puede agregar elementos visuales para que los usuarios comprendan lo que
está sucediendo en su aplicación. Son especialmente útiles cuando la interfaz de usuario cambia
de estado, como cuando se carga nuevo contenido o hay nuevas acciones disponibles. La
animación también proporciona una apariencia completa para su aplicación, lo que se traduce
en una apariencia y sensación de mayor calidad. Android incluye diferentes API de animación,
según el tipo de animación que desee. En esta página, verá una descripción general de las
diferentes formas de agregar acciones a la interfaz de usuario.Hay tres opciones diferentes de
animación y gráficos aplicados en Android: animación cuadro a cuadro, animación sincronizada,
animación 2D.El primer tipo de animación es muy similar a la animación stop motion o películas,
excepto que en lugar de usar fotos de objetos o imágenes, se refiere a mostrar una animación
de carga personalizada compuesta por varias imágenes, o si desea que un icono se convierta en
otro. después del usuario Realice una acción de una en una. Debemos enfatizar la aplicación de
cada animación, yo Hay algunas preguntas sobre cómo aplicarlo o cómo hacerlo, porque todo
tipo de animación tiene Sus propios métodos y elementos (son muchos, entienda de qué se trata
en la encuesta Complicado), creo que será cada vez más claro si se elaboran en detalle las
prácticas correspondientes. Explica correctamente la aplicación de cada elemento del método.
Animación. Por supuesto, primero debe comenzar con la animación cuadro por cuadro, así que
siempre Leyendo, es innegable, es lo más fácil de aplicar, y finalmente hay que aplicar animación.
2D o incluso 3D. Entre los ejemplos detallados en la encuesta, su Implementación en una
aplicación móvil, además, desde un Un sitio web dedicado a explicar algunos de los temas del
desarrollo de aplicaciones de Android. Siempre que sea posible, sus animaciones deben usar
efectos físicos del mundo real para que se vean naturales. Por ejemplo, deben permanecer
motivados cuando sus objetivos cambian y mostrar transiciones suaves durante el cambio. Para
admitir estos comportamientos, la biblioteca de compatibilidad de Android incluye API de
animación basadas en la física que utilizan las leyes de la física para controlar sus animaciones.
Un principio importante de Material Design es mantener la interacción con los usuarios, es decir,
todo en nuestra interfaz de usuario debe ser interactivo. Cuando se usa una interfaz en nuestra
aplicación, debe significar una acción y reacción, y la aplicación debe poder responder a la
interacción del usuario. Todas las empresas de éxito tienen una cosa en común: se guían por la
innovación tecnológica y se mantienen al día con las tendencias del mercado. En un mundo
donde los usuarios necesitan inmediatez, simplificación e hiperconectividad, las aplicaciones
pueden satisfacer las necesidades de los clientes en cualquier segmento del mercado actual.
Asimismo, sus procedimientos son muy versátiles, lo que permite a las empresas desarrollar
formas disruptivas para mostrar sus servicios al público. Con esto, el modelo escalable de
startups puede seguir siendo efectivo en el tiempo. Ya se ha mencionado la importancia de las
apps en otros aspectos de la experiencia del usuario, pero la personalización es una
característica significativa. Las aplicaciones confieren al consumidor la impresión de que el
servicio está hecho a su medida, lo que propicia la identificación con la marca. De esta manera,
las empresas ofrecen servicios más humanizados y pueden llevar de la mano al usuario durante
todo el proceso de compra. De esta forma se facilita la transacción o exploración del producto en
un lenguaje cercano y con acciones inmediatas. Por lo tanto las animaciones en las aplicaciones
móviles facilitan muchísimo visualizar los contenidos de una manera más llamativa, además de
mejorar la experiencia de usuario y así este mas involucrado en la misma.

25
Referencias

Compton, M. (12 de Mayo de 2015). Big Nerd Ranch. Obtenido de Big Nerd Ranch:
https://bignerdranch.com/blog/frame-animations-in-android/

developers. (s.f.). Recuperado el 09 de Septiembre de 2021, de developers:

https://developer.android.com/reference/android/graphics/drawable/AnimationDrawable#setConst
antState(android.graphics.drawable.DrawableContainer.DrawableContainerState)

Fernández, D. R. (3 de Julio de 2016). Colección Aula Mentor. Recuperado el 2021 de Septiembre de 10,
de https://kupdf.net/download/desarrollo-de-aplicaciones-para-android-
ii_59ded00708bbc5ce07e65446_pdf

26