Drawing Bitmaps onto Canvas in Custom Views with Kotlin XML for Android

In Android development, creating custom views often involves drawing bitmaps onto a Canvas. This process allows developers to create unique visual elements tailored to specific application needs. Using Kotlin with XML layouts offers a flexible and efficient approach to achieve this. This article will guide you through the process of drawing bitmaps onto a Canvas in custom views, integrating both Kotlin and XML in Android development.

Understanding Custom Views in Android

A custom view in Android is a UI component that you create to perform specific drawing or UI-related tasks that are not available in the standard Android UI toolkit. Custom views are highly flexible and can be used to implement complex visual elements or interaction patterns.

Why Use Custom Views with Bitmaps?

• Visual Customization: Create unique UI components with customized graphics.
• Performance: Optimize drawing operations for smoother UI rendering.
• Flexibility: Implement complex interactions and visual effects.

Prerequisites

• Android Studio installed.
• Basic knowledge of Kotlin and Android development.
• Understanding of XML layouts in Android.

Step-by-Step Guide to Drawing Bitmaps onto Canvas

Step 1: Create a New Android Project

Open Android Studio and create a new project with Kotlin support. Choose a suitable project template, such as ‘Empty Activity’.

Step 2: Define the Custom View Class

Create a new Kotlin class that extends the View class. This will serve as your custom view. Implement the necessary constructors for the view to be properly instantiated.

import android.content.Context
import android.graphics.Bitmap
import android.graphics.BitmapFactory
import android.graphics.Canvas
import android.util.AttributeSet
import android.view.View
import com.example.bitmapdrawing.R

class BitmapView(context: Context, attrs: AttributeSet? = null) : View(context, attrs) {

    private var bitmap: Bitmap? = null

    init {
        // Initialize bitmap here or load it from a resource
        bitmap = BitmapFactory.decodeResource(resources, R.drawable.your_image)
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        
        bitmap?.let {
            canvas.drawBitmap(it, 0f, 0f, null)
        }
    }
}

• BitmapView: The name of our custom view.
• context: Context, attrs: AttributeSet? = null: Constructors to support XML inflation.
• bitmap: Bitmap? = null: A variable to hold the bitmap we will draw.
• BitmapFactory.decodeResource(): Loads a bitmap from resources. Replace R.drawable.your_image with your image resource.
• onDraw(canvas: Canvas): This method is called to draw the view. We draw the bitmap onto the canvas using canvas.drawBitmap().

Step 3: Add an Image Resource

Place the image you want to draw in the res/drawable directory. This image will be loaded into the Bitmap object.

Step 4: Use the Custom View in XML Layout

Open your layout file (e.g., activity_main.xml) and add the custom view, referencing it by its fully qualified class name.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.example.bitmapdrawing.BitmapView
        android:id="@+id/bitmapView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Ensure you replace com.example.bitmapdrawing.BitmapView with the correct package and class name of your custom view.

Step 5: Adjust Bitmap Drawing Parameters (Optional)

The drawBitmap method can take additional parameters to control the placement and appearance of the bitmap. Let’s look at a more complex example that uses a Paint object to apply color filters.

import android.content.Context
import android.graphics.Bitmap
import android.graphics.BitmapFactory
import android.graphics.Canvas
import android.graphics.Paint
import android.graphics.ColorMatrix
import android.graphics.ColorMatrixColorFilter
import android.util.AttributeSet
import android.view.View
import com.example.bitmapdrawing.R

class BitmapView(context: Context, attrs: AttributeSet? = null) : View(context, attrs) {

    private var bitmap: Bitmap? = null
    private val paint = Paint()

    init {
        // Load bitmap
        bitmap = BitmapFactory.decodeResource(resources, R.drawable.your_image)
        
        // Apply a grayscale color filter
        val matrix = ColorMatrix()
        matrix.setSaturation(0f) // 0 means grayscale
        val filter = ColorMatrixColorFilter(matrix)
        paint.colorFilter = filter
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        
        bitmap?.let {
            // Draw bitmap with the applied paint (grayscale)
            canvas.drawBitmap(it, 0f, 0f, paint)
        }
    }
}

Explanation:

• private val paint = Paint(): A Paint object is created to hold drawing properties.
• ColorMatrix and ColorMatrixColorFilter: These are used to create a grayscale effect. matrix.setSaturation(0f) sets the color saturation to 0, making the bitmap grayscale.
• paint.colorFilter = filter: Applies the color filter to the paint.
• canvas.drawBitmap(it, 0f, 0f, paint): Draws the bitmap with the applied paint, resulting in a grayscale image.

Step 6: Handle Resizing and Scaling

To ensure your bitmap fits properly within the view, you can resize it programmatically. Here’s how to scale the bitmap based on the view’s dimensions:

import android.content.Context
import android.graphics.Bitmap
import android.graphics.BitmapFactory
import android.graphics.Canvas
import android.util.AttributeSet
import android.view.View
import com.example.bitmapdrawing.R

class BitmapView(context: Context, attrs: AttributeSet? = null) : View(context, attrs) {

    private var bitmap: Bitmap? = null

    init {
        bitmap = BitmapFactory.decodeResource(resources, R.drawable.your_image)
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        // Scale the bitmap to fit the view's dimensions
        bitmap = bitmap?.let { Bitmap.createScaledBitmap(it, w, h, false) }
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        
        bitmap?.let {
            canvas.drawBitmap(it, 0f, 0f, null)
        }
    }
}

Explanation:

• onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int): This method is called when the view’s size changes. It is used to scale the bitmap to the new dimensions.
• Bitmap.createScaledBitmap(it, w, h, false): Creates a new scaled bitmap with the specified width (w) and height (h). The false argument specifies that the filter should not be used (better performance).

Step 7: Clean Up Bitmap Resources

To prevent memory leaks, especially when dealing with large bitmaps, it’s essential to recycle the bitmap when the view is no longer needed. Override the onDetachedFromWindow method:

import android.content.Context
import android.graphics.Bitmap
import android.graphics.BitmapFactory
import android.graphics.Canvas
import android.util.AttributeSet
import android.view.View
import com.example.bitmapdrawing.R

class BitmapView(context: Context, attrs: AttributeSet? = null) : View(context, attrs) {

    private var bitmap: Bitmap? = null

    init {
        bitmap = BitmapFactory.decodeResource(resources, R.drawable.your_image)
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        
        bitmap?.let {
            canvas.drawBitmap(it, 0f, 0f, null)
        }
    }
    
    override fun onDetachedFromWindow() {
        super.onDetachedFromWindow()
        bitmap?.recycle()
        bitmap = null
    }
}

Explanation:

• onDetachedFromWindow(): This method is called when the view is detached from the window.
• bitmap?.recycle(): Recycles the bitmap, freeing up the memory.
• bitmap = null: Sets the bitmap reference to null to ensure it is garbage collected.

Complete Example

Here’s the complete example combining all the above steps:

import android.content.Context
import android.graphics.Bitmap
import android.graphics.BitmapFactory
import android.graphics.Canvas
import android.graphics.Paint
import android.graphics.ColorMatrix
import android.graphics.ColorMatrixColorFilter
import android.util.AttributeSet
import android.view.View
import com.example.bitmapdrawing.R

class BitmapView(context: Context, attrs: AttributeSet? = null) : View(context, attrs) {

    private var bitmap: Bitmap? = null
    private val paint = Paint()

    init {
        bitmap = BitmapFactory.decodeResource(resources, R.drawable.your_image)
        
        // Optional: Apply a grayscale color filter
        val matrix = ColorMatrix()
        matrix.setSaturation(0f) // 0 means grayscale
        val filter = ColorMatrixColorFilter(matrix)
        paint.colorFilter = filter
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        // Scale the bitmap to fit the view's dimensions
        bitmap = bitmap?.let { Bitmap.createScaledBitmap(it, w, h, false) }
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        
        bitmap?.let {
            canvas.drawBitmap(it, 0f, 0f, paint)
        }
    }
    
    override fun onDetachedFromWindow() {
        super.onDetachedFromWindow()
        bitmap?.recycle()
        bitmap = null
    }
}

Layout XML (activity_main.xml):

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.example.bitmapdrawing.BitmapView
        android:id="@+id/bitmapView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Best Practices

• Efficient Bitmap Loading: Load large bitmaps efficiently using BitmapFactory.Options to avoid OutOfMemoryError.
• Memory Management: Recycle bitmaps when they are no longer needed to prevent memory leaks.
• Performance Optimization: Use hardware acceleration and optimize drawing operations for smoother UI rendering.

Conclusion

Drawing bitmaps onto a Canvas in custom views allows you to create highly customized UI components in Android using Kotlin and XML. By understanding how to load, scale, draw, and manage bitmap resources efficiently, you can enhance the visual experience of your applications and deliver unique user interfaces.