Como colocar un background sobre un canvas fullscreen en #Android Studio

Como Colocar Background Sobre Canvas FullScreen - CableNaranja

¡Comparte nuestro contenido!

Tomando como base lo que vimos en los artículos “Como crear un canvas en Android Studio” y “Como hacer fullscreen en Android Studio“, vamos a crear un proyecto donde podamos colocar una imagen y no un color como background de la aplicación, algo muy útil para crear aplicaciones más personalizadas o en la creación de videojuegos.

Creando el canvas

  1. Iniciemos un nuevo proyecto con el nombre de CanvasWallpaperComo Colocar Background Sobre Canvas FullScreen - CableNaranja
  2. Elegimos el SDK mínimo a utilizar.Como Colocar Background Sobre Canvas FullScreen - CableNaranja
  3. A continuación, seleccionamos una Empty Activity.Como Colocar Background Sobre Canvas FullScreen - CableNaranja
  4. Se llamará wallpaperfull (el nombre queda a gusto) Presionemos Finish.Como Colocar Background Sobre Canvas FullScreen - CableNaranja
  5. Tan pronto como acabe de crearse el proyecto, sobre nuestro paquete principal, presionamos el botón derecho del ratón, elegimos New y luego Java Class, ya que el canvas siempre es mejor gestionarlo en una clase separada.Como Colocar Background Sobre Canvas FullScreen - CableNaranja
  6. La clase se llamará canvasFull y la Superclass será android.view.View.Como Colocar Background Sobre Canvas FullScreen - CableNaranja
  7. Obtendremos un error, ya que la clase todavía no tiene constructor, para crearlo: Presionamos el botón derecho del ratón sobre la clase y seleccionamos la opción Generate.Como Colocar Background Sobre Canvas FullScreen - CableNaranja
  8. Con un clic o Enter, elegimos Constructor.Como Colocar Background Sobre Canvas FullScreen - CableNaranja
  9. Seleccionemos View (el primero de la lista)Como Colocar Background Sobre Canvas FullScreen - CableNaranja

Añadiéndo el Background a nuestro Canvas

Es momento de añadir la imagen que usaremos de background, recomiendo una resolución de 1080×1920 para que se haga un buen escalado.

  1. Busquemos el directorio res de nuestro proyecto y, coloquemos la imagen dentro de la carpeta drawable, observe el ejemplo:Como Colocar Background Sobre Canvas FullScreen - CableNaranja
  2. Regresando a nuestro proyecto, presionamos el botón derecho del ratón sobre la clase y elegimos Generate nuevamente. La opción a elegir ahora es Override Methods.Como Colocar Background Sobre Canvas FullScreen - CableNaranja
  3. Busquemos el método onDraw y lo elegimos.Como Colocar Background Sobre Canvas FullScreen - CableNaranja

¡Es hora de escribir código!

Necesitamos agregar 3 variables, un Bitmap que manipule la imagen, un Display que nos entregue el ancho y alto de nuestra aplicación y un Rect para guardar los valores de izquierda, derecha, ancho y alto del background.

Bitmap background;
Display display;
Rect screen;

Ahora, vamos a agregar algunas cosas en el constructor de la clase. Lo Primero serán las variables para el ancho y el alto.

int ancho, alto;

Necesitamos un objeto de tipo Point que nos permita obtener el valor X, Y de nuestro Display

Point size = new Point();

Creamos el background a través de BitmapFactory y el la imagen que colocamos en el directorio res, subdirectorio drawable.

background = BitmapFactory.decodeResource(getResources(),R.drawable.fondocanvas);

Obtenemos el defaultDisplay de nuestra aplicación

display = ((Activity)getContext()).getWindowManager().getDefaultDisplay();

Luego obtenemos el tamaño del display y lo pasamos al objeto tipo Point

display.getSize(size);

Los valores x, y de nuestro size se convierten en ancho y alto

ancho = size.x;
alto = size.y;

Ahora, llenamos el objeto tipo Rect con todos los valores que obtuvimos

screen = new Rect(0, 0, ancho, alto);

Finalmente, dentro del método onDraw, debajo de la llamada a super dibujamos el bitmap, usando el background y el objeto Rect

canvas.drawBitmap(background, null, screen, null);

Así queda nuestra clase canvasFull después de todo ese código

Como Colocar Background Sobre Canvas FullScreen - CableNaranja

Es momento de hacer fullscreen

Abirmos el archivo styles.xml que se encuentra dentro de la subcarpeta values dentro del directorio res. Cambiaremos el parent del valor AppTheme por Theme.AppCompat.Light.NoActionBar, luego añadiremos los siguientes items:

<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>

Se debe ver como indica la imagen:

Como Colocar Background Sobre Canvas FullScreen - CableNaranja

Por último, necesitamos hacer tres cosas en nuestra clase principal que llamamos wallpaperfull.

  1. Lo primero será añadir un objeto de tipo canvasFull
    canvasFull miCanvas;
    
  2. Luego, dentro de onCreate, hacemos la instancia del objeto:
    miCanvas = new canvasFull(this);
    
  3. Finalmente, reemplazamos el setContentView original, por el que incluye nuestra clase.
    setContentView(miCanvas);
    

Este debe ser el resultado:

Como Colocar Background Sobre Canvas FullScreen - CableNaranja

¡Probemos todo!

Es hora de probar lo que acabamos de hacer, lancemos el emulador, el resultado final es este.

Como Colocar Background Sobre Canvas FullScreen - CableNaranja

Canvas mostrando una imagen de background

¿Te ha resultado? Déjanos saber en los comentarios aquí abajo, en nuestra cuenta de twitter @cablenaranja7 o en nuestra página de facebook.

¡Comparte nuestro contenido!

Israel García

Docente, IT Manager, Blogger & Developer. Escribo por diversión, educo por pasión. | Grandstanding is not my thing.

Podría también gustarte...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

shares