Android Bitmaps — BitBeauty (Part 2)
Well in Part 1 we have gone through working with loading bitmaps and working on them. What if I want to draw shapes, gradients and combine it with whatever we learnt from Part 1? Well, using BitBeauty I created something like this:
You can read the first part in here
The idea in here was to create a note, pinned with a red pin on a grey board, with a hint of grey shadow near the red pin. Apart from code for loading the image from the URL, the below is all what was needed to get the final above output:
//Resize the original bitmap for better calculation
t.resize(applicationContext, 600, 600, false)//Draw small holders on the corners as if they are holding the image
BitBeauty.Shapes.drawCircle(t, Color.WHITE, 30F, Point(0,0))
BitBeauty.Shapes.drawCircle(t, Color.WHITE, 30F, Point(0,600))
BitBeauty.Shapes.drawCircle(t, Color.WHITE, 30F, Point(600,0))
BitBeauty.Shapes.drawCircle(t, Color.WHITE, 30F, Point(600,600))//Create the bigger frame (to make the pin half outside the image)
val frame = BitBeauty.Creator.createBitmap(applicationContext, 700, 900, Color.TRANSPARENT)//Create the frame to contain the image
val frameContainer = BitBeauty.Creator.createBitmap( applicationContext, 700, 800, Color.WHITE)
val ca = IntArray(3)
ca[0] = Color.WHITE
ca[1] = Color.LTGRAY
ca[2] = Color.WHITE
BitBeauty.LinearGradient.drawRect(frameContainer, 0F, 0F, 700F, 900F, 0F, 100F, 500F, 600F, ca, null, Gradient.Mode.CLAMP)BitBeauty.Editor.combine(frameContainer, frame, Point(0, 100))
BitBeauty.Editor.combine(t, frame, Point(100, 250))//Create the red pin to hold the image
BitBeauty.Shapes.drawCircle(frame, Color.RED, 50F, Point(350, 50))//Write the text at the bottom
BitBeauty.Text.write(frame, "Soumya Kanti Kar", 75F, Color.BLACK, PointF(50F, 810F))//Rotate the image 10 degree to give it a tilt feel
val rotate = frame.rotate(applicationContext, frame, -10F)
So relax and let us see the components involved and try to understand it.
Shapes
BitBeauty allows us to draw various shapes like, circle, rectangle (hence square), oval, polygon and freeform. By freeform, we mean that we can define the points and the method will then draw the required shape.
These shapes can be drawn on an any bitmap and using any color we want. These are directly drawn on the bitmap provided. For example, to draw a circle of radius 20 pixels at the coordinate (50,50) on the bitmap, we need to call:
BitBeauty.Shapes.drawCircle(bitBmp, Color.BLACK, 20F, Point(50,50)Internally this is implemented as following:
val canvas = Canvas(bitBeautyBitmap.getBitmap())
val paint = Paint(Paint.ANTI_ALIAS_FLAG)
paint.color = colorIntcanvas.drawCircle(center.x.toFloat(), center.y.toFloat(), radius, paint)
Canvas provides the drawCircle method and using the paint object we can specify the color which we need used to draw the circle. The other canvas methods which are being used to draw the shapes are, drawOval, drawRect, drawLine and drawPath (which is being used for freeform drawing).
BitBeauty also provides a method to draw polygons. The below call would draw a hexagon (6 sides) filled with black color, at coordinate (50, 50) with a radius of 20.
BitBeauty.Shapes.drawPolygon(bitBmp, Color.BLACK, 50F, 50F, 20F, 6)
Gradient
Gradient provides the ability to, draw a pallet is shades across a defined region.It can be radial gradient, linear gradient or one that extends Shaders. BitBeauty offers two different gradient support, linear and radial.
Pictures are worth a thousand words, so let us see Linear Gradient in action. We can see how the color pallet is transitioning from the three colours we have specified.
Below is the implementation for the LinearGradient
import android.graphics.LinearGradient as AndroidLinearGradientval shaderModel = Gradient.convertShaderMode(mode)
val linearGradient = AndroidLinearGradient(gradStartX, gradStartY, gradEndX, gradEndY, colorArray, stepArray, shaderModel)val canvas = Canvas(bitBeautyBitmap.getBitmap())
val paint = Paint(Paint.ANTI_ALIAS_FLAG)
paint.shader = linearGradient
canvas.drawRect(rectStartX, rectStartY, rectEndX, rectEndY, paint)
If we look into the method we will notice two arrays, (1) colorArray and (2) stepArray. The first array defines the list of colours which will be used for the gradient purpose. The second array, stepArray, is used to define the positions for the range for each of the colours. Passing it as null will equally space out the colours.
Text
Text class allows to write text on the bitmaps. The implementation uses drawText method of canvas class. We can use the font color, font size and the location wherein we want to render the text.
val canvas = Canvas(bitBeautyBitmap.getBitmap())
val paint = Paint(Paint.ANTI_ALIAS_FLAG)
paint.color = color
paint.textSize = textSize
paint.textAlign = align
paint.style = Paint.Style.FILL
paint.typeface = typefacecanvas.drawText(text, anchor.x, anchor.y, paint)
In here we are using the canvas to render the text and the paint object to define the renderer. We can also use custom fonts to draw the text on the bitmap by using the typeface.
Using these methods is combination we can create more amazing bitmaps on our application. Using BitBeauty, the entire process gets abstracted, and the developer can concentrate more on the implementation of the fantastic part of the fascinating application being developed.
Gradle — Bit Beauty
The library is already available through JitPack. The gradle definition is provided below.
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}
dependencies {
compile 'com.github.wwdablu:bitbeauty:0.1.0'
}This is the end for this journey into bitmaps and BitBeauty. Hope I have been able to share my thoughts and knowledge as clearly as I could. Let me know if you have any suggestion or feedback. Till then, waiting for another spark for the next story.
