Android / Clases para graficos, drawable

Bienvenidos sean a este post, hoy hablaremos sobre otro clase para graficos llamados drawable y es utilizada para extender de una mejor forma una gran variedad de objetos graficos, su particularidad mas importante es que sus recursos pueden ser definidos por medio de archivos XML, veamos algunos de ellos:

Recurso	Etiqueta XML	Descripcion
bitmapDrawable	< bitmap >	Imagen basada en un archivo (PNG o JPG)
ShapeDrawable	< shape >	Permite realizar graficos a partir de vectoriales primitivas, en el caso de figuras simples por medio de XML, en caso de mas complejas con codigo java
VectorDrawable	< vector >	Es similar a ShapeDrawable pero utiliza Vectores Graficos Escalables y permite dibujar mejores graficos pero es mucho mas complejo y lo veremos mucho mas adelante
LayerDrawable	< layer-list >	Contiene un array de Drawable que se visualiza segun el orden en el Array
StateListDrawable	< selector >	Contiene un conjunto de Drawable de manera que podamos indicar dinamicamente cual de ellos es para mostrar
GradientDrawable	< gradient >	Degradado de color para ser utilizado para botones o fondos
TransitionDrawable	< transition >	Una extension de LayerDrawable que permite un efecto de fundido entre la primera y la segunda capa
AnimationDrawable	< animation-list >	Permite crear una animacion cuadro a cuadro a partir de una serie de objetos Drawable

Ademas de ser dibujada, esta clase permite otras herramientas que indican de que forma ha de ser dibujada, veamos algunos de ellos:

• setBounds(x1,y1,x2,y2), permite indicar un rectangulo donde ha de ser dibujado
• getPadding(Rect), nos proporciona informacion sobre los margenes recomendados para representar contenidos
• setState(int []), permite indicar al Drawable en que estado ha de ser dibujado, por ejemplo «con foco», «seleccionado», etc
• setLevel(int), permite implementar un controlador sencillo para indicar como se representara el Drawable.

Ahora vamos a hacer una serie de ejercicios aprovechando la app creada en el post anterior, abramos la misma con el Android Studio y vayamos a la clase EjemploView, la misma se encuentra dentro de la clase EjemploGraficosActivity y se usa para extender la capacidad de la View, antes de comenzar busquen una foto cualquiera (de su computadora o de internet) y renombrenla a mi_imagen.jpg o mi_imagen.png dependiendo de la extension del mismo, es recomendable cualquiera de estos formatos porque son los mas compatibles con el recurso Drawable. Una vez realizado ahora si podreceremos a trabajar sobre nuestra app pero antes debemos copiar nuestro archivo al recurso drawable, para ello vamos a nuestro archivo con el explorador de windows

Seleccionan el archivo en cuestion y Ctrl+C o con el boton derecho y eligen Copiar, luego van al Android Studio y sobre el recurso drawable hacen Ctrl + V o click con el derecho y seleccionan Paste

Cuando hagan esto aparecera el siguiente cuadro

Aca deben seleccionar el lugar que se ve en la imagen y pulsan Ok para que aparezca el siguiente cuadro

Aca nos pregunta por ultima vez si deseamos cambiarle el nombre o la ubicacion, dejan todo como aparece y pulsan Ok para copiar el archivo dentro de nuestro recurso drawable, debera quedar como se ve en la siguiente imagen

Ahora con nuestro recurso creado si vamos a proceder a la modificacion de la clase EjemploView, para ello vamos a agregar la siguiente linea:

private Drawable miImagen;

A medida que le vayan agregando debera agregar automaticamente el paquete para poder utilizarlo, esta debe ser la primera linea despues de la clase, debe estar de la siguiente forma:

public class EjemploView extends View {
    private Drawable miImagen;

    public EjemploView(Context context){
    ....
}

Ahora vamos a modificar el constructor de la clase de la siguiente forma:

public EjemploView(Context context){
    Resources res = context.getResources();
    miImagen = res.getDrawable(R.drawable.mi_imagen);
    miImagen.setBounds(30,30,200,200);
    super(context);
}

Estas lineas se encargaran de crear el recurso Drawable y por ultimo define el tamaño y la forma de como se va a ver la imagen, esto por medio del setBounds(), vamos a modificar el metodo onDraw() de la siguiente forma:

protected void onDraw(Canvas canvas){
    miImagen.draw(canvas);
}

Ahora si probamos nuestra app obtendremos el siguiente resultado

Como pueden ver pudimos mostrar nuestra imagen, puede variar dependiendo a la que elijan, y como se ve se definio un tamaño para nuestro elemento y rellenarlo con la imagen nuestra. Ahora vamos a ver un ejemplo de como trabajar con GradientDrawable, para ello vamos a crear un nuevo archivo en el recurso drawable, para eso click con el boton derecho sobre el recurso y seleccionamos New -> Drawable resource file como se ve en la siguiente imagen

Una vez seleccionado nos aparecera el siguiente cuadro

Modificaremos File Name a degradado, el resto debe quedar como se ve en la imagen. una vez hecho presionen Ok para cerrar el cuadro y proceder con la creacion de nuestro archivo, una vez generado debera quedarnos de la siguiente forma

Ahora si abrimos nuestro archivo, el codigo es el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

</selector>

Lo modificaremos por el siguiente codigo:

<?xml version="1.0" encoding="utf-8"?>
<shape  xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#FFFFFF"
        android:endColor="#0000FF"
        android:angle="270" />
</shape>

Con esto establecimos nuestros elementos para hacer el degradado, establecimos un color de inicio, un color final y el angulo de degrado. Con esto establecido podemos utilizarlo como fondo para ello debemos modificar el constructor de la clase EjemploView agregando la siguiente linea:

setBackgroundResource(R.drawable.degradado);

Esta se encargara de utilizar este recurso como fondo, el codigo final quedara asi:

public class EjemploView extends View {
    private Drawable miImagen;

    public EjemploView(Context context){
        super(context);
        Resources res = context.getResources();
        miImagen = res.getDrawable(R.drawable.mi_imagen);
        miImagen.setBounds(30,30,200,200);
        setBackgroundResource(R.drawable.degradado);
    }

    @Override
    protected void onDraw(Canvas canvas){
        miImagen.draw(canvas);
    }
}

Si probamos nuestra app nos quedara de la siguiente forma

Ahora podemos hacer una modificacion mas, eliminamos la linea ingresada al constructor, luego iremos a nuestro archivo activity_main.xml y agregaremos la siguiente linea:

android:background="@drawable/degradado"

Asi quedara nuestro nuevo codigo del archivo:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    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:background="@drawable/degradado"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".EjemploGraficosActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Se deberia obtener un resultado similar pero yo les recomiendo hacerlo por codigo, es mas seguro su funcionamiento, veamos un ejemplo mas con nuestra app para este caso va a ser ShapeDrawable.
Vamos de nuevo a la clase EjemploView y vamos a modificar la siguiente linea:

private Drawable miImagen;

Lo reemplazaremos por esta linea

private ShapeDrawable miImagen;

Basicamente cambiamos la clase de Drawable por ShapeDrawable para nuestro objeto miImagen. Ahora modificaremos el constructor  para nuestro nuevo objeto:

public EjemploView(Context context){
    super(context);
    miImagen = new ShapeDrawable(new OvalShape());
    miImagen.getPaint().setColor(0xff0000ff);
    miImagen.setBounds(10,10,310,60);
    setBackgroundResource(R.drawable.degradado);
}

Como pueden ver para el objeto miImagen utilizaremos su constructor por medio del new y a su vez le pasaremos como argumento que utilice OvalShape para crear un ovalo, luego le diremos que lo pinte de azul, despues definiremos las dimensiones del rectangulo que contendra al ovalo y por ultimo utilizaremos el recurso del degradado del fondo de pantalla, procdemos a probar nuestra app y deberan un resultado similar a este

Como pueden ver se realizo la figura solicitada, se puede observar como fue contenido por el rectangulo de Drawable, en este caso ShapeDrawable, y como se pudo pintar con una simple modificacion en nuestro constructor y para la la llamada al metodo fue transparente.

En resumen, hoy hemos visto como trabajar con otra clase para graficos, hemos visto algunos recursos disponibles, hemos visto algunos ejemplos puestos en practica, como trabajan por medio de XML y codigo Java, espero les haya sido util sigueme en Twitter, Facebook o Google+ para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.