Desarrollo de Aplicaciones en Android II

Reporte de prácticas
Tema 1. Animación y Gráficos

Nombre del alumno:

ROSALES MIGUEL ALAN

Nombre del profesor:

M. en R.I Iván Azamar Palma

Grupo:4953

Chalco, Edo. de México a 25 de septiembre de 2020.

1
Contenido

Marco Teórico.................................................................................................................................... 4

Práctica 1. Alto y Ancho de Canvas................................................................................................... 6

Código fuente................................................................................................................................. 6

Funcionamiento.............................................................................................................................. 7

Resultado........................................................................................................................................ 7

Práctica 2: Métodos para propiedades del texto................................................................................8

Código fuente................................................................................................................................. 8

Funcionamiento............................................................................................................................ 11

Resultado...................................................................................................................................... 11

Práctica 3: Coordenadas del Width y Height del dispositivo............................................................12

Código fuente............................................................................................................................... 12

Funcionamiento............................................................................................................................ 14

Resultado...................................................................................................................................... 14

Práctica 4: Dimensiones del Canvas................................................................................................ 14

Código fuente............................................................................................................................... 14

Funcionamiento............................................................................................................................ 16

Resultado...................................................................................................................................... 16

Práctica 5: Curvas............................................................................................................................ 17

Código Fuente.............................................................................................................................. 17

Funcionamiento............................................................................................................................ 19

Resultado...................................................................................................................................... 19

Práctica 6: Traslaciones y rotaciones............................................................................................... 20

Código fuente............................................................................................................................... 20

Funcionamiento............................................................................................................................ 22

Resultado...................................................................................................................................... 22

Práctica 7: Siguiendo una curva....................................................................................................... 23

Código fuente............................................................................................................................... 23

Funcionamiento............................................................................................................................ 25

Resultado...................................................................................................................................... 26

Practica 8,9 y 10: Gráficos interactivos............................................................................................ 26

2
 Código fuente............................................................................................................................... 26

Funcionamiento............................................................................................................................ 28

Resultado...................................................................................................................................... 28

Conclusiones.................................................................................................................................... 29

3
Marco Teórico

En el lienzo podremos también establecer algunas transformaciones geométricas.

Para dibujar determinados tipos de elementos deberemos especificar también el tipo de pincel a
utilizar (Paint), donde definiremos el color (setColor), el tipo de línea (setPathEffect), el estilo
(setStyle), el grosor (setStrokeWidth) además se puede aplicar antialiasing (isAntiAlias) a los
gráficos para evitar el efecto sierra.

Android proporciona a través de su API gráfica una potente y variada colección de funciones
que pueden cubrir prácticamente cualquier necesidad gráfica de una aplicación. La clase Canvas
representa una superficie donde podemos dibujar. Dispone de una serie de métodos que nos
permiten representar líneas, círculos, texto, etc.

El método onDraw recibe como parámetro el lienzo (Canvas) en el que deberemos dibujar. En
este lienzo podremos dibujar diferentes tipos de elementos, como primitivas geométricas. Una vez
establecido el tipo de pincel, podremos utilizarlo para dibujar diferentes elementos en el lienzo,
utilizando métodos de la clase Canvas.

Para especificar el tipo de fuente y sus atributos, utilizaremos las propiedades del objeto Paint.
Las propiedades que podemos especificar del texto son la fuente (typeface), el tamaño (textSize),
anchura (textScaleX), inclinación (textSkewX), la alineación (textAlign), el contorno de texto, que
aunque esto no es una propiedad del texto, el objeto Paint también nos permite obtener el contorno
(Path) de un texto dado, para así poder aplicar al texto los mismos efectos que a cualquier otro
contorno que dibujemos (Curso de Android y Java para Dispositivos Móviles, 2010).

Para una animación tween puede realizar series de transformaciones simples (posición,
tamaño, rotación y transparencia) en el contenido de un objeto View. Por ejemplo, si tienes un
objeto TextView puedes moverlo, rotarlo, aumentarlo, disminuirlo o cambiarle la transparencia al
texto.

4
Práctica 1. Alto y Ancho de Canvas
Código fuente

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.os.Bundle;

import android.view.View;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

5
 setContentView(R.layout.activity_main);

GraficoView grafico=new GraficoView(this);

setContentView(grafico);

private class GraficoView extends View {

public GraficoView(Context context){

super(context);

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

Paint paint= new Paint();

paint.setColor(Color.WHITE);

canvas.drawPaint(paint);

int width=canvas.getWidth();

int heigth=canvas.getHeight();

paint.setColor(Color.BLACK);

paint.setTextSize(30);

paint.setAntiAlias(true);

canvas.drawText("ancho" + width + ", alto "+heigth,20,40,paint);

paint.setColor(Color.rgb(100,20,0));

canvas.drawLine(0,40,width,40,paint);

paint.setColor(Color.rgb(0,100,20));

canvas.drawLine(20,0,20,heigth,paint);

Funcionamiento

Se instancia la clase GráficoView.

6
Creación de una clase la cual heredara de la clase View

Se crea un método dibujar onDraw , de instanciar la clase Paint, donde crearemos un pincel y se le
asignara un color de fondo a nuestro lienzo, se crearán dos variables width y height donde se
almacenarán los valores de las dimensiones del dispositivo móvil y nuestro anti alias estará
activado.

Resultado

Se muestra un texto con un tamaño de letra visible que indica las cantidades del alto y ancho del
dispositivo, así como dos líneas una horizontal que muestra el ancho y una vertical que mostrará el
alto.

Práctica 2: Métodos para propiedades del texto.

Código fuente

import androidx.appcompat.app.AppCompatActivity;

7
import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.Typeface;

import android.os.Bundle;

import android.view.View;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

GraficoView grafico=new GraficoView(this);

setContentView(grafico);

private class GraficoView extends View {

public GraficoView(Context context){

super(context);

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

//Instanciar un pincel con caracteristicas

Paint paint= new Paint();

paint.setColor(Color.WHITE);

canvas.drawPaint(paint);

int width=canvas.getWidth();

8
 int heigth=canvas.getHeight();

paint.setTextSize(30);

paint.setAntiAlias(true);

paint.setColor(Color.rgb(0,100,20));

canvas.drawLine(width/2,0,width/2,heigth,paint);

paint.setColor(Color.BLACK);

paint.setTextAlign(Paint.Align.RIGHT);

canvas.drawText("Align RIGTH",width/2,160,paint);

paint.setTextAlign(Paint.Align.CENTER);

canvas.drawText("Align CENTER",width/2,120,paint);

paint.setTextAlign(Paint.Align.LEFT);

canvas.drawText("Align LEFT",width/2,80,paint);

paint.setTextSkewX(0.2f);

canvas.drawText("SkewX 0.2",20,210,paint);

paint.setTextSkewX(-0.2f);

canvas.drawText("SkewX -0.2",width/2,210,paint);

paint.setTextSkewX(0f);

paint.setTextScaleX(2f);

canvas.drawText("TextScaleX 2",10,250,paint);

paint.setTextScaleX(-2f);

canvas.drawText("TextScaleX -2",width,290,paint);

paint.setTextSize(60);

paint.setTextScaleX(0.5f);

canvas.drawText("TextScaleX 0.5",width/2,360,paint);

paint.setTextScaleX(1f);

paint.setTextSize(30);

paint.setTypeface(Typeface.SANS_SERIF);

canvas.drawText("Sans serif",20,330,paint);

paint.setTypeface(Typeface.DEFAULT_BOLD);

9
 canvas.drawText("Default bold",20,370,paint);

paint.setTypeface(Typeface.MONOSPACE);

canvas.drawText("Monospace",20,410,paint);

paint.setTypeface(Typeface.SERIF);

canvas.drawText("Serif",20,450,paint);

paint.setTypeface(Typeface.DEFAULT);

paint.setTextSize(50);

paint.setAntiAlias(false);

canvas.drawText("Antialias false",20,500,paint);

paint.setAntiAlias(true);

canvas.drawText("Antialias true",20,550,paint);

Funcionamiento

Se generarán las mismas instancias que en la práctica anterior, y en este caso generar el método
para dibujar onDraw.

Se colocan textos de manera que esté alineado al centro(align.center), a la izquierda (align.left) y a

la derecha (align.right) para así indicar las coordenadas de cada texto así como algunos tipos de
letra, e inclusive se muestra el texto escrito al revés.

Se coloca el código para preparar el Anti alias y se le asigna un tamaño a dichos textos que serán
usados como pruebas.

Resultado

10
Los textos se colocaron los textos en diferentes coordenadas para una mejor visualización de la
ubicación de dichos textos.

Práctica 3: Coordenadas del Width y Height del dispositivo.

Código fuente

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.Typeface;

import android.os.Bundle;

import android.view.View;

public class MainActivity extends AppCompatActivity {

11
 @Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

SpecialView myView=new SpecialView(this);

setContentView(myView);

private class SpecialView extends View {

public SpecialView(Context context) {

super(context);

@Override

protected void onDraw(Canvas canvas) {

int width = canvas.getWidth();

int heigth = canvas.getHeight();

canvas.drawColor(Color.WHITE);

Paint paintBlack = new Paint();

Paint paintGray = new Paint();

paintBlack.setColor(Color.BLACK);

paintGray.setColor(Color.GRAY);

for (int i = 30; i < heigth; i += 30) {

canvas.drawLine(0, i, width, i, paintGray);

canvas.drawText("" + i, 30, i, paintBlack);

paintBlack.setTextSize(40);

paintBlack.setAntiAlias(true);

canvas.drawText("height= " + heigth, 100, heigth / 2, paintBlack);

}}

12
Funcionamiento

Se generan mediante el código previo líneas con un espacio de 30 abarcando el ancho y el alto de
medida exacta de la pantalla del dispositivo, y se utiliza un ciclo if el cual indica que se dibujaran
líneas hasta llegar al límite del alto.

Resultado

Se muestra el texto que contiene el número de pixeles con los que cuenta la pantalla del dispositivo
sobre las líneas que se dibujan por todo el ancho de manera consecutiva y con cierta distancia.

Práctica 4: Dimensiones del Canvas.

Código fuente

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

13
import android.graphics.Paint;

import android.graphics.Typeface;

import android.os.Bundle;

import android.view.View;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

SpecialView myView=new SpecialView(this);

setContentView(myView);

private class SpecialView extends View {

public SpecialView(Context context) {

super(context);

@Override

protected void onDraw(Canvas canvas) {

canvas.drawColor(Color.WHITE);

//Instanciar un pincel con caracteristicas

Paint = new Paint();

paint.setColor(Color.BLACK);

paint.setTextSize(30);

paint.setAntiAlias(true);

int width = getMeasuredWidth();

int heigth = getMeasuredHeight();

int bottom = getBottom();

14
 int right = getRight();

paint.setTextAlign(Paint.Align.CENTER);

canvas.drawText("Width " + width, width / 2, 40, paint);

canvas.drawText("Height " + heigth, width / 2, 80, paint);

canvas.drawText("Right " + right, width / 2, 120, paint);

canvas.drawText("Bottom " + bottom, width / 2, 160, paint);

paint.setColor(Color.BLUE);

canvas.drawLine(0, 0, right, bottom, paint);

canvas.drawLine(right, 0, 0, bottom, paint);

Funcionamiento

Se desarrolla un código que nos permitirá dibujar líneas en coordenadas diferentes para colocarlas
de manera cruzada y formar una “X” en toda la pantalla sin contar la parte donde se encuentra la
barra del título, también se muestra en pantalla el alto y tamaño del dispositivo.

Resultado

Se muestran los textos del ancho y alto, así como las líneas atravesadas.

15
Práctica 5: Curvas.
Código Fuente

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.DashPathEffect;

import android.graphics.Paint;

import android.graphics.Path;

import android.graphics.Typeface;

import android.os.Bundle;

import android.view.View;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

16
 super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

SpecialView myView=new SpecialView(this);

setContentView(myView);

private class SpecialView extends View {

public SpecialView(Context context) {

super(context);

@Override

protected void onDraw(Canvas canvas) {

canvas.drawColor(Color.WHITE);

Paint paint = new Paint();

paint.setColor(Color.BLACK);

paint.setStyle(Paint.Style.STROKE);

paint.setStrokeWidth(2);

paint.setAntiAlias(true);

int width = getMeasuredWidth();

int heigth = getMeasuredHeight();

Path path = new Path();

path.moveTo(0, 0);

for (int i = 1; i < width; i++) {

path.lineTo(i, (float) Math.sin(i / 20f) * (-50f));

path.offset(0, 100);

canvas.drawPath(path, paint);

17
 float[] intervalos = {10, 10};

DashPathEffect dash = new DashPathEffect(intervalos, 1);

paint.setPathEffect(dash);

path.offset(0, 100);

canvas.drawPath(path,paint);

float[] intervalos2 = {10, 10,2,10};

DashPathEffect dash2 = new DashPathEffect(intervalos2, 1);

paint.setPathEffect(dash2);

path.offset(0, 100);

canvas.drawPath(path,paint);

float[] intervalos3 = {2, 4};

DashPathEffect dash3 = new DashPathEffect(intervalos3, 1);

paint.setPathEffect(dash3);

path.offset(0, 100);

canvas.drawPath(path,paint);

Funcionamiento

En esta práctica se muestra el código que nos permite colocar líneas curvas en pantalla, que utiliza
un ciclo for, en el cual se incluyó el valor de Sin (seno) para lograr generar las líneas con diferentes
aspectos.

Resultado

Se pueden apreciar las líneas curveadas con diferentes aspectos, los cuales se logran jugando y
variando los valores para experimentar diferentes resultados.

18
Práctica 6: Traslaciones y rotaciones.
Código fuente

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.DashPathEffect;

import android.graphics.Paint;

import android.graphics.Path;

import android.graphics.Rect;

import android.graphics.Typeface;

import android.os.Bundle;

import android.view.View;

public class MainActivity extends AppCompatActivity {

19
 @Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

SpecialView myView=new SpecialView(this);

setContentView(myView);

private class SpecialView extends View {

public SpecialView(Context context) {

super(context);

@Override

protected void onDraw(Canvas canvas) {

canvas.drawColor(Color.WHITE);

Paint paint = new Paint();

paint.setTextSize(60);

paint.setAntiAlias(true);

int x=50;

int y=60;

String texto="Rotacion del canvas";

Rect bounds = new Rect();

paint.getTextBounds(texto,0,texto.length(),bounds);

paint.setColor(Color.RED);

paint.setStyle(Paint.Style.STROKE);

canvas.drawRect(bounds,paint);

20
 canvas.save();

float centerX=bounds.exactCenterX();

float centerY=bounds.exactCenterY();

canvas.rotate(-45,centerX,centerY);

paint.setColor(Color.BLACK);

paint.setStyle(Paint.Style.FILL);

canvas.drawText(texto,0,0,paint);

canvas.restore();

canvas.drawText("Tras la rotacion restore", 100,300,paint);

Funcionamiento

La realización de esta práctica consiste en mostrar dos textos diferentes en la pantalla indicando un
texto inicial y un texto que se encuentra rotado y un rectángulo de color rojo que se encontrará
centrado y representará el lugar de donde se rotó el texto.

Resultado

Se muestran los textos uno con la rotación de -45 grados y el otro mostrando el inicio del texto. Así
como el rectángulo rojo en las coordenadas iniciales.

21
Práctica 7: Siguiendo una curva
Código fuente

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.Path;

import android.os.Bundle;

import android.view.View;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

22
 setContentView(R.layout.activity_main);

Grafico objeto = new Grafico(this);

setContentView(objeto);

private class Grafico extends View {

public Grafico(Context context) {

super(context);

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

Paint pincel = new Paint();

pincel.setColor(Color.rgb(200,200,200));

canvas.drawPaint(pincel);

pincel.setTextSize(60);

pincel.setColor(Color.GRAY);

Path ruta = new Path();

Path.Direction direction = Path.Direction.CCW;

int ancho = getMeasuredWidth();

23
 int radio = 200;

ruta.addCircle(ancho/2,500,radio,direction);

ruta.offset(0,0);

float hOffset=0;

float vOffset=20;

canvas.drawPath(ruta,pincel);

pincel.setColor(Color.BLACK);

canvas.drawTextOnPath("Texto en el path externo punto inicial",ruta,hOffset,vOffset,pincel);

hOffset=200;

vOffset=100;

pincel.setTextSize(40);

pincel.setColor(Color.GREEN);

canvas.drawTextOnPath("Texto interior comenzando a " + hOffset+"del punto inicial "

,ruta,hOffset,vOffset,pincel);

canvas.drawCircle(500,500,200,pincel);

canvas.drawRect(200,200,300,300,pincel);

Funcionamiento

24
En ésta práctica se entendió y se puso a prueba el código que nos permite colocar dos textos tanto
dentro como por fuera de un círculo dibujado.

Resultado

Se muestran los textos ingresados de forma circular siguiendo a línea roja que se encuentra al
centro.

Practica 8,9 y 10: Gráficos interactivos

Código fuente

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.os.Bundle;

import android.view.MotionEvent;

import android.view.View;

public class MainActivity extends AppCompatActivity {

25
 @Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

SpecialView myView = new SpecialView(this);

setContentView(myView);

class SpecialView extends View {

float x = 50;

float y = 50;

public SpecialView(Context context){

super(context);

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

canvas.drawColor(Color.LTGRAY);

Paint paint = new Paint();

paint.setAntiAlias(true);

paint.setColor(Color.RED);

canvas.drawCircle(x, y, 20, paint);

paint.setColor(Color.BLACK);

paint.setTextSize(35);

canvas.drawText("x= " + x, 100, 50, paint);

canvas.drawText("y= " + y, 100, 90, paint);

26
Funcionamiento

Para terminar con el tema de gráficos, se realizó una aplicación que genera un punto de color rojo,
un texto donde se visualizan las coordenadas en ancho y alto donde se posicione el punto rojo al
tocar la pantalla a través de un evento down, también se muestra otro evento up donde se puede
colocar al punto en una posición y al arrastrar el dedo sin levantarlo de la pantalla colocarlo en otro
lado, pero el punto solo se quitará y aparecerá en el otro lado.

Resultado

Se muestran los diferentes pintos seleccionados, así como la posición en la que se encuentra el
punto.

Conclusiones

27
 Como conclusión de este trabajo adquirí conocimientos de programación en el desarrollo
de aplicaciones móviles, con las explicaciones de nuestro docente en cada una de las clases
ayudo a pudiéramos comprender como alumnos como se desarrollan este tipo de ejercicios
mediante programación en android studio.
Este tipo de practicas nos ayudan a los alumnos a poder prepararnos en desarrollo de
aplicaciones móviles ya que, aunque no son tan complejas estas practicas si nos ayudan a ir
comprendiendo poco a poco como implementar esto en una aplicación móvil más completa.
También nos ayudara mucho a la realización de el proyecto semestral el cual es una
aplicación mas desarrollada, mas implementada y mas completa con muchas mas funcionalidades
y el desarrollo de estas practicas nos hacen comprender como implementar más dicha aplicación.
Siguiendo las instrucciones indicadas por el docente y con el conocimiento compartido en
las clases de la materia se pudo lograr el objetivo, el desarrollo de estas prácticas el cual realice
una sola aplicación e ingrese cada una de las practicas desarrolladas en android studio.
El desarrollo de aplicaciones móviles es algo muy importante ya que se le puede dar
solución a muchos problemas y es por eso que es algo muy gratificante e importante que en
nuestra formación académica nos enseñen desde lo más básico como lo son estas prácticas y de
ahí ir implementando mas funcionalidades ya teniendo las bases
La realización de este trabajo lo fui realizando poco a poco ya que si hubo algunas dudas,
pero se pudieron resolver en las clases de la materia y por consiguiente corregir en la
programación en android studio
Al cumplir con el objetivo de desarrollar estas prácticas también se cumplió con el objetivo
de mejorar en cuanto al conocimiento de desarrollo de aplicaciones móviles el cual seguiremos
aprendiendo durante el ciclo semestral.
Personalmente la programación es algo que se me dificulta un poco sin embargo con este
tipo de ejercicios se ha ido comprendiendo mas el de tema de programación en dispositivos
móviles.

28