I am making an app that involves a CameraX API and Bitmap, My goal is to make the camera not only to capture a simple image, but to take the image and to draw a Watermark text on top of the image before making the file, however the Azimuth, Pitch and Roll shows as null results when the bitmap is finished, here is the result of it. [![The actual output of the JPEG file. If I didn't explained it correctly or made a mistake while explaining, please do let me know as soon as possible, also having some questions, I'll answer them. Thank you in advance.
I'm gonna give additional meaning of the image and translate from Bulgarian to English and what it stands for:
Посока -> Direction: where(West,South,North,East) Azimuth,
Наклон -> Tilting: Pitch, Roll
private val mSensorEvent: SensorEvent? = null
override fun onImageSaved(output: ImageCapture.OutputFileResults) {
//Azimuth, Pitch and Roll
val azimuthWMText = resources.getString(R.string.value_format_2, mSensorEvent?.values?.get(0))
val pitchWMText = resources.getString(R.string.value_format_2, mSensorEvent?.values?.get(1))
val rollWMText = resources.getString(R.string.value_format_2, mSensorEvent?.values?.get(2))
//Bitmap that contains the addWatermark method and detecting the new photo path that is been taken and implements the watermark
//BitmapFactory.decodeFile(path.toString(), BitmapFactory.Options()) -> through File
//resources, R.layout.activity_preview_photo, BitmapFactory.Options() -> through resources
val originalBitmap = AddWatermark().addWatermark(
BitmapFactory.decodeFile(photoFile.toString(), BitmapFactory.Options()),
firstWatermarkText = "Дължина: $longitudeWM${resources.getString(R.string.degrees)}, Ширина: $latitudeWM${resources.getString(R.string.degrees)}",
secondWatermarkText = "Височина: ${altitudeWM}м, Ориентация: $orientationWM",
thirdWatermarkText = "Точност: Хоризонтална: ${hozAccuracyWM}м, Вертикална: ${verAccuracyWM}м",
fourthWatermarkText = "Посока: where $azimuthWMText${resources.getString(R.string.degrees)}",
fifthWatermarkText = "Наклон: pitchTilt $pitchWMText${resources.getString(R.string.degrees)}, rollTilt $rollWMText${resources.getString(R.string.degrees)}",
sixthWatermarkText = "Дата и Час: $dateTimeFormatWMText",
AddWatermark.WatermarkOptions(
AddWatermark.Corner.TOP_LEFT,
textSizeToWidthRation = 0.017f,
paddingToWidthRatio = 0.03f,
Color.parseColor("#FF0000"),
shadowColor = Color.BLACK,
strokeOutline = null,
typeface = null
)
)
previewView.bitmap.let { originalBitmap }
val outputStream = FileOutputStream(photoFile)
originalBitmap.compress(Bitmap.CompressFormat.JPEG, 90, outputStream)
outputStream.flush()
outputStream.close()
Toast.makeText(
this#CameraActivity,
"Обработването и запазено успешно! Запазено е в: $photoFile",
Toast.LENGTH_LONG
).show()
}
The watermark class code:
class AddWatermark : AppCompatActivity() {
//Adding watermark method is here for declaring on to the top
fun addWatermark(
bitmap: Bitmap,
firstWatermarkText: String,
secondWatermarkText: String,
thirdWatermarkText: String,
fourthWatermarkText: String,
fifthWatermarkText: String,
sixthWatermarkText: String,
options: WatermarkOptions = WatermarkOptions()): Bitmap {
val result = bitmap.copy(bitmap.config, true)
val canvas = Canvas(result)
val paint = Paint(Paint.ANTI_ALIAS_FLAG or Paint.DITHER_FLAG)
//val strokePaint = Paint()
//We are including the Enum class and connecting with the data class WatermarkOptions variable
paint.textAlign = when (options.corner) {
//We include the alignment LEFT from Enum class and connecting with Paint variable
Corner.TOP_LEFT,
Corner.BOTTOM_LEFT -> Paint.Align.LEFT
//We include the alignment RIGHT from Enum class and connecting with Paint variable
Corner.TOP_RIGHT,
Corner.BOTTOM_RIGHT -> Paint.Align.RIGHT
}
/*strokePaint.textAlign = when (options.corner) {
Corner.TOP_LEFT,
Corner.BOTTOM_LEFT -> Paint.Align.LEFT
Corner.TOP_RIGHT,
Corner.BOTTOM_RIGHT -> Paint.Align.RIGHT
}
*/
//We connect the new textSize variable with the bitmap width(default is 0) and we multiply with the WatermarkOption's textSize
val textSize = result.width * options.textSizeToWidthRation
//Connecting the Paint textSize variable with the new textSize variable
paint.textSize = textSize//70.5f
//Connecting the Paint color variable with the WatermarkOptions textColor
paint.color = options.textColor
//If the shadowColor of the WMOptions is not null, then we make it as a Paint shadowLayer variable
if (options.shadowColor != null) {
paint.setShadowLayer( 2.5f, 0f, 0f, options.shadowColor)
}
/*if (options.strokeOutline != null) {
strokePaint.textSize = textSize//72f
strokePaint.color = options.strokeOutline
strokePaint.style = Paint.Style.STROKE
strokePaint.strokeWidth = 4.17f
}
*/
//If typeface of the WMOptions is not null,we make paint typeface variable and connecting with the WMOptions variable
if (options.typeface != null) {
paint.typeface = options.typeface
}
//We connect the new padding variable with the bitmap width(default is 0) and multiply with WMOptions padding
val padding = result.width * options.paddingToWidthRatio
//Create a variable that has something to do with the coordinates method
val coordinates = calculateCoordinates(
firstWatermarkText,
secondWatermarkText,
thirdWatermarkText,
fourthWatermarkText,
fifthWatermarkText,
sixthWatermarkText,
paint,
options,
canvas.width,
canvas.height,
padding)
/**drawText text as a Watermark, using Canvas**/
//canvas.drawText(firstWatermarkText, coordinates.x, coordinates.y, strokePaint)
//canvas.drawText(secondWatermarkText, coordinates.x, 240f, strokePaint) //We change the Y horizontal coordinates by typing the float number
//canvas.drawText(thirdWatermarkText, coordinates.x, 310f, strokePaint)
//canvas.drawText(fourthWatermarkText, coordinates.x, 380f, strokePaint)
//canvas.drawText(fifthWatermarkText, coordinates.x, 450f, strokePaint)
when (Build.VERSION.SDK_INT) {
//Android 11
30 -> {
canvas.drawText(firstWatermarkText, coordinates.x, coordinates.y, paint)
canvas.drawText(secondWatermarkText, coordinates.x, 240f, paint)
canvas.drawText(thirdWatermarkText, coordinates.x, 310f, paint)
canvas.drawText(fourthWatermarkText, coordinates.x, 380f, paint)
canvas.drawText(fifthWatermarkText, coordinates.x, 450f, paint)
canvas.drawText(sixthWatermarkText, coordinates.x, 520f, paint)
}
//Android 9
28 -> {
canvas.drawText(firstWatermarkText, coordinates.x, coordinates.y, paint)
canvas.drawText(secondWatermarkText, coordinates.x, 240f, paint)
canvas.drawText(thirdWatermarkText, coordinates.x, 310f, paint)
canvas.drawText(fourthWatermarkText, coordinates.x, 380f, paint)
canvas.drawText(fifthWatermarkText, coordinates.x, 450f, paint)
canvas.drawText(sixthWatermarkText, coordinates.x, 520f, paint)
}
//Android 5.0
21 -> {
canvas.drawText(firstWatermarkText, coordinates.x, coordinates.y, paint)
canvas.drawText(secondWatermarkText, coordinates.x, 270f, paint)
canvas.drawText(thirdWatermarkText, coordinates.x, 330f, paint)
canvas.drawText(fourthWatermarkText, coordinates.x, 420f, paint)
canvas.drawText(fifthWatermarkText, coordinates.x, 480f, paint)
canvas.drawText(sixthWatermarkText, coordinates.x, 540f, paint)
}
}
return result
}
//This it he corner alignment calculation method and using it on the drawText
private fun calculateCoordinates(
firstWatermarkText: String,
secondWatermarkText: String,
thirdWatermarkText: String,
fourthWatermarkText: String,
fifthWatermarkText: String,
sixthWatermarkText: String,
paint: Paint,
options: WatermarkOptions,
width: Int,
height: Int,
padding: Float
): PointF {
val x = when (options.corner) {
Corner.TOP_LEFT,
Corner.BOTTOM_LEFT -> {
padding
}
Corner.TOP_RIGHT,
Corner.BOTTOM_RIGHT -> {
width - padding
}
}
val y = when (options.corner) {
Corner.BOTTOM_LEFT,
Corner.BOTTOM_RIGHT -> {
height - padding
}
Corner.TOP_LEFT,
Corner.TOP_RIGHT -> {
val bounds = Rect()
paint.getTextBounds(firstWatermarkText, 0, firstWatermarkText.length, bounds)
paint.getTextBounds(secondWatermarkText, 0, secondWatermarkText.length, bounds)
paint.getTextBounds(thirdWatermarkText, 0, thirdWatermarkText.length, bounds)
paint.getTextBounds(fourthWatermarkText, 0, fourthWatermarkText.length, bounds)
paint.getTextBounds(fifthWatermarkText, 0, fifthWatermarkText.length, bounds)
paint.getTextBounds(sixthWatermarkText, 0, sixthWatermarkText.length, bounds)
val textHeight = bounds.height()
textHeight + padding
}
}
return PointF(x, y)
}
enum class Corner {
TOP_LEFT,
TOP_RIGHT,
BOTTOM_LEFT,
BOTTOM_RIGHT
}
data class WatermarkOptions(
val corner: Corner = Corner.BOTTOM_RIGHT,
val textSizeToWidthRation: Float = 0.04f,
val paddingToWidthRatio: Float = 0.03f,
#ColorInt val textColor: Int = Color.parseColor("#FFC800"),
#ColorInt val shadowColor: Int? = Color.BLACK,
#ColorInt val strokeOutline: Int? = Color.BLACK,
val typeface: Typeface? = null
)
}
Ok, I found out my issue and instead of using a new mSensorEvent, I used the sensor event inside "onSensorChanged(event: SensorEvent?)" instead and recasting all the lateinit variables, so here is the answer to my question:
private var azimuthDegree: Double = 0.0
private var currentAzimuth: Double = 0.0
private var currentPitch: Double = 0.0
private var currentRoll: Double = 0.0
//'dirs' is the directions array list of type String and 'currentDirection' will be used for recasting
private var dirs = ArrayList<String>()
private lateinit var currentDirection: String
override fun onResume() {
super.onResume()
window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_FULLSCREEN
actionBar?.hide()
//Makes a register to the listener about the default sensor for the Azimuth orientation type
mSensorManager.registerListener(this,
mSensorManager.getDefaultSensor(Sensor.TYPE_ORIENTATION),
SensorManager.SENSOR_DELAY_GAME)
}
override fun onPause() {
super.onPause()
//If it fails, to unregister the listener from it's sensor
mSensorManager.unregisterListener(this)
}
/**The sensor method initializes the type sensors and calculates the gravity and geomagnetic field**/
#SuppressLint("CutPasteId")
override fun onSensorChanged(event: SensorEvent?) {
//Portrait measurements - Correct by default
try {
val windowOrientation = windowManager.defaultDisplay.orientation
//Azimuth
degreeAzimuth = event!!.values[0].toDouble()
val azimuthTxt = findViewById<TextView>(R.id.azimuthText)
//This makes sure that the calculations between Pitch and Roll, doesn't switch places when the orientation is turned between Portrait and Landscape by default
var degreeRoll: Double
var degreePitch: Double
if (windowOrientation == 1 || windowOrientation == 3) {
degreeRoll = event.values[1].toDouble()
degreePitch = event.values[2].toDouble()
} else {
degreeRoll = event.values[2].toDouble()
degreePitch = event.values[1].toDouble()
}
//Orientation calculations for the Pitch in degrees, when it's Portrait, Landscape, Reverse Portrait and Reverse Landscape, to stay the same case with each and every value
when (windowOrientation) {
Surface.ROTATION_0 -> {
degreePitch += 90
}
1 -> {
if (abs(degreeRoll) > 90) {
degreePitch -= 90
degreeRoll = if (degreeRoll < 0)
-(180 + degreeRoll)
else
180 - degreeRoll
} else {
degreePitch = 90 - degreePitch
}
}
2 -> {
degreePitch = if (degreePitch < 90)
90 - degreePitch
else
-(degreePitch - 90)
degreeRoll = -degreeRoll
}
3 -> {
if (abs(degreeRoll) > 90) {
degreePitch = -(90 + degreePitch)
degreeRoll = if (degreeRoll < 0)
-(180 + degreeRoll)
else
180 - degreeRoll
} else {
degreePitch += 90
degreeRoll = -degreeRoll
}
}
}
/*Calculations when Azimuth is been turned with a new orientation, that "azimuth"
is the new variable for making azimuth and window display to be times 90 degrees.
After that we change the new variable "azimuth" to the dirs array list.*/
//Direction display from the array list from 1 to 9 elements
val where = findViewById<TextView>(R.id.direction_text)
dirs = arrayListOf(
"North",
"North East",
"East",
"South East",
"South",
"South West",
"West",
"North West",
"North"
)
// We change the "azimuth" variable here, along with it's calculations.
var azimuth = degreeAzimuth + (windowOrientation * 90)
when (windowOrientation) {
//Portrait
Surface.ROTATION_0 -> {
if (azimuth > 360) {
azimuth -= 360
}
azimuthTxt.text = resources.getString(R.string.value_format, azimuth)
where.text = dirs[((azimuth + 22.5) / 45.0).toInt()]
}
//Landscape
Surface.ROTATION_90 -> {
if (azimuth > 360) {
azimuth -= 360
}
azimuthTxt.text = resources.getString(R.string.value_format, azimuth)
where.text = dirs[((azimuth + 22.5) / 45.0).toInt()]
}
//Reverse Portrait
Surface.ROTATION_180 -> {
if (azimuth > 360) {
azimuth -= 360
}
azimuthTxt.text = resources.getString(R.string.value_format, azimuth)
where.text = dirs[((azimuth + 22.5) / 45.0).toInt()]
}
//Reverse Landscape
Surface.ROTATION_270 -> {
if (azimuth > 360) {
azimuth -= 360
}
azimuthTxt.text = resources.getString(R.string.value_format, azimuth)
where.text = dirs[((azimuth + 22.5) / 45.0).toInt()]
}
}
currentDirection = dirs[((azimuth + 22.5) / 45.0).toInt()]
currentAzimuth = azimuth
val azimuthText = findViewById<TextView>(R.id.azimuthText)
azimuthText.text = resources.getString(R.string.value_format_2, currentAzimuth)
currentPitch = degreePitch
val pitchText = findViewById<TextView>(R.id.pitchText)
pitchText.text = resources.getString(R.string.value_format, currentPitch)
currentRoll = degreeRoll
val rollText = findViewById<TextView>(R.id.rollText)
rollText.text = resources.getString(R.string.value_format, currentRoll)
} catch (e: Exception) {
e.printStackTrace()
}
}
currentAzimuth, currentPith, currentRoll - Those are recasting and using them as an end result
azimuthDegree - This is used for calculation reasons only in order to make for every orientation of the display surface
Also the other way around since the Sensor.TYPE_ORIENTATION is deprecated from Java, the suggest way is this:
override fun onResume() {
super.onResume()
window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_FULLSCREEN
actionBar?.hide()
//Makes a register to the listener about the default sensor for the Azimuth gravity and magnetic field
mSensorManager.registerListener(this,
mSensorManager.getDefaultSensor(Sensor.TYPE_MAGNETIC_FIELD),
SensorManager.SENSOR_DELAY_GAME)
mSensorManager.registerListener(this,
mSensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER),
SensorManager.SENSOR_DELAY_GAME)
}
/**The sensor method initializes the type sensors and calculates the gravity and geomagnetic field**/
#SuppressLint("CutPasteId")
override fun onSensorChanged(event: SensorEvent?) {
//Portrait measurements - Correct by default
try {
val windowOrientation = windowManager.defaultDisplay.orientation
//Announcing the alpha for timing
val alpha = 0.97f
//The Sensor Event selects a type between Accelerometer and Magnetic Field
when (event!!.sensor.type) {
Sensor.TYPE_ACCELEROMETER -> {
mGravity[0] = alpha * mGravity[0] + (1 - alpha) * event.values[0]
mGravity[1] = alpha * mGravity[1] + (1 - alpha) * event.values[1]
mGravity[2] = alpha * mGravity[2] + (1 - alpha) * event.values[2]
}
Sensor.TYPE_MAGNETIC_FIELD -> {
mGeomagnetic[0] = alpha * mGeomagnetic[0] + (1 - alpha) * event.values[0]
mGeomagnetic[1] = alpha * mGeomagnetic[1] + (1 - alpha) * event.values[1]
mGeomagnetic[2] = alpha * mGeomagnetic[2] + (1 - alpha) * event.values[2]
}
}
val rotationMatrix = FloatArray(9)
val inclinationMatrix = FloatArray(9)
val success: Boolean = SensorManager.getRotationMatrix(rotationMatrix, inclinationMatrix, mGravity, mGeomagnetic)
if (success) {
//Azimuth
degreeAzimuth = event!!.values[0].toDouble()
val azimuthTxt = findViewById<TextView>(R.id.azimuthText)
//This makes sure that the calculations between Pitch and Roll, doesn't switch places when the orientation is turned between Portrait and Landscape by default
var degreeRoll: Double
var degreePitch: Double
if (windowOrientation == 1 || windowOrientation == 3) {
degreeRoll = event.values[1].toDouble()
degreePitch = event.values[2].toDouble()
} else {
degreeRoll = event.values[2].toDouble()
degreePitch = event.values[1].toDouble()
}
// We change the "azimuth" variable here, along with it's calculations.
var azimuth = degreeAzimuth + (windowOrientation * 90)
when (windowOrientation) {
//Portrait
Surface.ROTATION_0 -> {
if (azimuth > 360) {
azimuth -= 360
}
azimuthTxt.text = resources.getString(R.string.value_format, azimuth)
where.text = dirs[((azimuth + 22.5) / 45.0).toInt()]
}
//Landscape
Surface.ROTATION_90 -> {
if (azimuth > 360) {
azimuth -= 360
}
azimuthTxt.text = resources.getString(R.string.value_format, azimuth)
where.text = dirs[((azimuth + 22.5) / 45.0).toInt()]
}
//Reverse Portrait
Surface.ROTATION_180 -> {
if (azimuth > 360) {
azimuth -= 360
}
azimuthTxt.text = resources.getString(R.string.value_format, azimuth)
where.text = dirs[((azimuth + 22.5) / 45.0).toInt()]
}
//Reverse Landscape
Surface.ROTATION_270 -> {
if (azimuth > 360) {
azimuth -= 360
}
azimuthTxt.text = resources.getString(R.string.value_format, azimuth)
where.text = dirs[((azimuth + 22.5) / 45.0).toInt()]
}
}
currentAzimuth = azimuth
val azimuthText = findViewById<TextView>(R.id.azimuthText)
azimuthText.text = resources.getString(R.string.value_format_2, currentAzimuth)
currentPitch = degreePitch
val pitchText = findViewById<TextView>(R.id.pitchText)
pitchText.text = resources.getString(R.string.value_format, currentPitch)
currentRoll = degreeRoll
val rollText = findViewById<TextView>(R.id.rollText)
rollText.text = resources.getString(R.string.value_format, currentRoll)
}
}
Then onImageSave() method when assign the AddWatermark class within it as it follows:
val originalBitmap = AddWatermark().addWatermark(
BitmapFactory.decodeFile(photoFile.absolutePath),
firstWatermarkText = "Azimuth:$dirs, $currentAzimuth",
secondWatermarkText = "Pitch: $currentPitch, Roll: $currentRoll",
AddWatermark.WatermarkOptions(
AddWatermark.Corner.TOP_LEFT,
textSizeToWidthRatio = 0.017f,
paddingToWidthRatio = 0.03f,
textColor = Color.parseColor("#FF0000"),
shadowColor = null,
typeface = null
)
)
viewFinder.bitmap.let { originalBitmap }
val outputStream = FileOutputStream(photoFile.toString())
originalBitmap.compress(Bitmap.CompressFormat.JPEG, 90, outputStream)
outputStream.flush()
outputStream.close()
Background
Starting from Android O, apps can have adaptive icons, which are 2 layers of drawables: foreground and a background. The background is a mask that gets to be a shape of the launcher/user's choice, while the OS has a default shape for it too.
Here's an example of what Nova Launcher allows to do:
As you can see, it allows not only to choose which shape to use, but also avoid a shape at all (in "prefer legacy icons").
Here are some links about it:
https://www.youtube.com/watch?v=5MHFYfXno9c
https://medium.com/#ianhlake/vectordrawable-adaptive-icons-3fed3d3205b5
The problem
While I know how to create a AdaptiveIconDrawable instance, and I'm aware of the wizard that helps creating one for the current app, I don't get how, given an AdaptiveIconDrawable instance, launchers change the shape.
Not only that, but I remember I saw a launcher or two that allows to not have any shape.
Sadly I can't find any information about this part, maybe because this is a relatively very new feature. There isn't even a keyword for it here on StackOverflow.
What I've tried
I tried reading about adaptive icons, but couldn't find a reference to the receiver side.
I know it has the 2 drawables within it:
https://developer.android.com/reference/android/graphics/drawable/AdaptiveIconDrawable.html#getBackground()
https://developer.android.com/reference/android/graphics/drawable/AdaptiveIconDrawable.html#getForeground()
I know, at least, how to get an AdaptiveIconDrawable instance out of a third party app (assuming it has one) :
PackageManager pm = context.getPackageManager();
Intent launchIntentForPackage = pm.getLaunchIntentForPackage(packageName);
String fullPathToActivity = launchIntentForPackage.getComponent().getClassName();
ActivityInfo activityInfo = pm.getActivityInfo(new ComponentName(packageName, fullPathToActivity), 0);
int iconRes = activityInfo.icon;
Drawable drawable = pm.getDrawable(packageName, iconRes, activityInfo.applicationInfo); // will be AdaptiveIconDrawable, if the app has it
The questions
Given a AdaptiveIconDrawable instance, how do you shape it, to be of a circular shape, rectangle, rounded rectangle, tear, and so on?
How do I remove the shape and still have a valid size of the icon (using its foreground drawable in it) ? The official size of an app icon for launchers is 48 dp, while the official ones for AdaptiveIconDrawable inner drawables are 72dp (foreground), 108dp (background). I guess this would mean taking the foreground drawable, resize it somehow, and convert to a bitmap.
In which case exactly is it useful to use IconCompat.createWithAdaptiveBitmap() ? It was written that "If you’re building a dynamic shortcut using a Bitmap, you might find the Support Library 26.0.0-beta2’s IconCompat.createWithAdaptiveBitmap() useful in ensuring that your Bitmap is masked correctly to match other adaptive icons." , but I don't get which cases it's useful for.
EDIT: In order to create a bitmap out of the foreground part of the adaptive icon, while resizing to a proper size, I think this could be a good solution:
val foregroundBitmap = convertDrawableToBitmap(drawable.foreground)
val targetSize = convertDpToPixels(this, ...).toInt()
val scaledBitmap = ThumbnailUtils.extractThumbnail(foregroundBitmap, targetSize, targetSize, ThumbnailUtils.OPTIONS_RECYCLE_INPUT)
fun convertDrawableToBitmap(drawable: Drawable?): Bitmap? {
if (drawable == null)
return null
if (drawable is BitmapDrawable) {
return drawable.bitmap
}
val bounds = drawable.bounds
val width = if (!bounds.isEmpty) bounds.width() else drawable.intrinsicWidth
val height = if (!bounds.isEmpty) bounds.height() else drawable.intrinsicHeight
val bitmap = Bitmap.createBitmap(if (width <= 0) 1 else width, if (height <= 0) 1 else height,
Bitmap.Config.ARGB_8888)
val canvas = Canvas(bitmap)
drawable.setBounds(0, 0, canvas.width, canvas.height)
drawable.draw(canvas)
drawable.bounds = bounds;
return bitmap
}
fun convertDpToPixels(context: Context, dp: Float): Float = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, context.resources.displayMetrics)
Might be able to avoid having 2 bitmaps at the same time, but this is ok I think.
About the creation of a shaped drawable of various types, I'm still not sure how to do it. Only solution I've seen by the answers below is of using a rounded rectangle or a circle, but there are other shapes (for example the tear) that can come to mind.
EDIT:
I was told as some point by Google (here) that I should use AdaptiveIconDrawable.getIconMask(), but I wasn't given any further information. However, I've found a nice article about this here.
I don't get how, given an AdaptiveIconDrawable instance, launchers change the shape.
Launchers are just apps, so they simply draw the background in the shape they want (or the user selected) and then draw the foreground on top.
I don't have a sample project of my own, but Nick Butcher made a great sample project and series of blog posts: AdaptiveIconPlayground.
Given a AdaptiveIconDrawable instance, how do you shape it, to be of a circular shape, rectangle, rounded rectangle, tear, and so on?
The simplest way is to rasterize the drawable and draw the bitmap using a shader like it is done in Nick's AdaptiveIconView:
private val backgroundPaint = Paint(Paint.ANTI_ALIAS_FLAG)
private val background: Bitmap
// ...
background = Bitmap.createBitmap(layerSize, layerSize, Bitmap.Config.ARGB_8888)
backgroundPaint.shader = BitmapShader(background, CLAMP, CLAMP)
// < rasterize drawable onto `background` >
// draw desired shape(s)
canvas.drawRoundRect(0f, 0f, iconSize.toFloat(), iconSize.toFloat(),
cornerRadius, cornerRadius, backgroundPaint)
How do I remove the shape and still have a valid size of the icon (using its foreground drawable in it) ? The official size of an app icon for launchers is 48 dp, while the official ones for AdaptiveIconDrawable inner drawables are 72dp (foreground), 108dp (background). I guess this would mean taking the foreground drawable, resize it somehow, and convert to a bitmap.
If you don't want a background, just don't draw it. You're in full control. The size does not really matter, because you usually know how big your icons should be drawn. The documentation states that foreground and background should be 108dp, so you can simply downscale your drawing. If foreground/background use vector graphics, then size really does not matter, as you can just draw them however big you like.
If you rasterize the foreground, then you can do custom drawing as seen above, or choose Canvas#drawBitmap(...), which also offers multiple options to draw a Bitmap, including to pass in a transformation matrix, or simply some bounds.
If you don't rasterize your drawable you can also use drawable.setBounds(x1, y1, x2, y2), where you can set the bounds on where the drawable should draw itself. This should also work.
In which case exactly is it useful to use IconCompat.createWithAdaptiveBitmap() ? It was written that "If you’re building a dynamic shortcut using a Bitmap, you might find the Support Library 26.0.0-beta2’s IconCompat.createWithAdaptiveBitmap() useful in ensuring that your Bitmap is masked correctly to match other adaptive icons." , but I don't get which cases it's useful for.
ShortCutInfo.Builder has a setIcon(Icon icon) method where you need to pass it in. (And the same applies for the compat versions)
It seems that Icon is used to have control over the kind of Bitmap that gets passed in as an icon. Right now I could not find any other usage for Icon. I don't think that you would use this when creating a launcher.
More information reflecting the last comment
Do you wrap the AdaptiveIconDrawable class with your own drawable? I just want to convert it somehow to something I can use, to both an ImageView and a Bitmap, and I wish to control the shape, using all shapes I've shown on the screenshot above. How would I do it?
If you follow the links above you can see a custom AdaptiveIconView that draws the AdaptiveIconDrawable, so doing a custom view is definitely an option, but everything mentioned can be moved just as easily into a custom Drawable, which you then could also use with a basic ImageView.
You can achieve the various different backgrounds by using the methods available on Canvas along with a BitmapShader as shown above, e.g. additionally to drawRoundRect we would have
canvas.drawCircle(centerX, centerY, radius, backgroundPaint) // circle
canvas.drawRect(0f, 0f, width, height, backgroundPaint) // rect
canvas.drawPath(path, backgroundPaint) // more complex shapes
To switch between background shapes you could use anything from if/else, over composition, to inheritance, and just draw the shape you like.
OK I got something to work, but for some reason the inner icon seems smaller than what's done with the AdaptiveIconDrawable. Also for some reason, on the way, it affected the original AdaptiveIconDrawable (even if I used mutate on any drawable I used) so I had to create a new one to demonstrate the original vs new one. Another small annoyance is that to create the masked bitmap, I had to have 2 Bitmap instances (drawable converted to one, and needed an output too).
I wonder if it's possible to convert the drawable directly to a Bitmap/Drawable that has the given shape, so I asked about this here.
So, suppose you have a Path instance. You can get one from the AdaptiveIconDrawable.getIconMask function (which is the one of the system), or you can create one yourself, such as the one used here (repository here) or here.
If anyone knows how to solve those issues I've mentioned above (smaller foreground and affects original drawable, and maybe a better conversion), please let me know. For now, you can either use this solution, or use a library like here.
Now, suppose you get the AdaptiveIconDrawable instance, and you want to shape it in the same shape as of the Path instance.
So, what you can do is something like what's below (PathUtils is converted to Kotlin from either repositories) , and the result:
MainActivity.kt
class MainActivity : AppCompatActivity(R.layout.activity_main) {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val appIcon = applicationInfo.loadIcon(packageManager)
originalIconImageView.setImageDrawable(applicationInfo.loadIcon(packageManager))
if (appIcon is AdaptiveIconDrawable) {
val iconMask = getPath(PATH_SQUIRCLE)
val maskedBitmap = getMaskedBitmap(appIcon.background, iconMask)
val foreground = appIcon.foreground
val layerDrawable = LayerDrawable(arrayOf(BitmapDrawable(resources, maskedBitmap), foreground))
maskedImageView.setImageDrawable(layerDrawable)
}
}
companion object {
const val PATH_CIRCLE = 0
const val PATH_SQUIRCLE = 1
const val PATH_ROUNDED_SQUARE = 2
const val PATH_SQUARE = 3
const val PATH_TEARDROP = 4
fun resizePath(path: Path, width: Float, height: Float): Path {
val bounds = RectF(0f, 0f, width, height)
val resizedPath = Path(path)
val src = RectF()
resizedPath.computeBounds(src, true)
val resizeMatrix = Matrix()
resizeMatrix.setRectToRect(src, bounds, Matrix.ScaleToFit.CENTER)
resizedPath.transform(resizeMatrix)
return resizedPath
}
fun getMaskedBitmap(src: Bitmap, path: Path, resizePathToMatchBitmap: Boolean = true): Bitmap {
val pathToUse = if (resizePathToMatchBitmap) resizePath(path, src.width.toFloat(), src.height.toFloat()) else path
val output = Bitmap.createBitmap(src.width, src.height, Bitmap.Config.ARGB_8888)
val canvas = Canvas(output)
val paint = Paint(Paint.ANTI_ALIAS_FLAG)
paint.color = 0XFF000000.toInt()
canvas.drawPath(pathToUse, paint)
paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN)
canvas.drawBitmap(src, 0f, 0f, paint)
return output
}
fun getMaskedBitmap(drawable: Drawable, path: Path, resizePathToMatchBitmap: Boolean = true): Bitmap = getMaskedBitmap(drawable.toBitmap(), path, resizePathToMatchBitmap)
fun getPath(pathType: Int): Path {
val path = Path()
val pathSize = Rect(0, 0, 50, 50)
when (pathType) {
PATH_CIRCLE -> {
path.arcTo(RectF(pathSize), 0f, 359f)
path.close()
}
PATH_SQUIRCLE -> path.set(PathUtils.createPathFromPathData("M 50,0 C 10,0 0,10 0,50 C 0,90 10,100 50,100 C 90,100 100,90 100,50 C 100,10 90,0 50,0 Z"))
PATH_ROUNDED_SQUARE -> path.set(PathUtils.createPathFromPathData("M 50,0 L 70,0 A 30,30,0,0 1 100,30 L 100,70 A 30,30,0,0 1 70,100 L 30,100 A 30,30,0,0 1 0,70 L 0,30 A 30,30,0,0 1 30,0 z"))
PATH_SQUARE -> {
path.lineTo(0f, 50f)
path.lineTo(50f, 50f)
path.lineTo(50f, 0f)
path.lineTo(0f, 0f)
path.close()
}
PATH_TEARDROP -> path.set(PathUtils.createPathFromPathData("M 50,0 A 50,50,0,0 1 100,50 L 100,85 A 15,15,0,0 1 85,100 L 50,100 A 50,50,0,0 1 50,0 z"))
}
return path
}
}
}
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Original:" />
<ImageView
android:id="#+id/originalIconImageView"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="16dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Masked:" />
<ImageView
android:id="#+id/maskedImageView"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="16dp" />
</LinearLayout>
PathUtils.kt
object PathUtils {
/**
* #param pathData The string representing a path, the same as "d" string in svg file.
* #return the generated Path object.
*/
fun createPathFromPathData(pathData: String): Path {
val path = Path()
val nodes = createNodesFromPathData(pathData)
PathDataNode.nodesToPath(nodes, path)
return path
}
/**
* #param pathData The string representing a path, the same as "d" string in svg file.
* #return an array of the PathDataNode.
*/
fun createNodesFromPathData(pathData: String): Array<PathDataNode> {
var start = 0
var end = 1
val list = ArrayList<PathDataNode>()
while (end < pathData.length) {
end = nextStart(pathData, end)
val s = pathData.substring(start, end)
val `val` = getFloats(s)
addNode(list, s[0], `val`)
start = end
end++
}
if (end - start == 1 && start < pathData.length) {
addNode(list, pathData[start], FloatArray(0))
}
return list.toTypedArray()
}
private fun nextStart(s: String, inputEnd: Int): Int {
var end = inputEnd
var c: Char
while (end < s.length) {
c = s[end]
if ((c - 'A') * (c - 'Z') <= 0 || (c - 'a') * (c - 'z') <= 0) return end
end++
}
return end
}
private fun addNode(list: ArrayList<PathDataNode>, cmd: Char, `val`: FloatArray) {
list.add(PathDataNode(cmd, `val`))
}
/**
* Parse the floats in the string.
* This is an optimized version of parseFloat(s.split(",|\\s"));
*
* #param s the string containing a command and list of floats
* #return array of floats
*/
#Throws(NumberFormatException::class)
private fun getFloats(s: String): FloatArray {
if (s[0] == 'z' || s[0] == 'Z')
return FloatArray(0)
val tmp = FloatArray(s.length)
var count = 0
var pos = 1
var end: Int
while (extract(s, pos).also { end = it } >= 0) {
if (pos < end) tmp[count++] = s.substring(pos, end).toFloat()
pos = end + 1
}
// handle the final float if there is one
if (pos < s.length) tmp[count++] = s.substring(pos).toFloat()
return tmp.copyOf(count)
}
/**
* Calculate the position of the next comma or space
*
* #param s the string to search
* #param start the position to start searching
* #return the position of the next comma or space or -1 if none found
*/
private fun extract(s: String, start: Int): Int {
val space = s.indexOf(' ', start)
val comma = s.indexOf(',', start)
if (space == -1) return comma
return if (comma == -1) space else Math.min(comma, space)
}
class PathDataNode(private val type: Char, private var params: FloatArray) {
#Suppress("unused")
constructor(n: PathDataNode) : this(n.type, n.params.copyOf(n.params.size))
companion object {
fun nodesToPath(node: Array<PathDataNode>, path: Path) {
val current = FloatArray(4)
var previousCommand = 'm'
for (pathDataNode in node) {
addCommand(path, current, previousCommand, pathDataNode.type, pathDataNode.params)
previousCommand = pathDataNode.type
}
}
private fun addCommand(path: Path, current: FloatArray, inputPreviousCmd: Char, cmd: Char, floats: FloatArray) {
var previousCmd = inputPreviousCmd
var incr = 2
var currentX = current[0]
var currentY = current[1]
var ctrlPointX = current[2]
var ctrlPointY = current[3]
var reflectiveCtrlPointX: Float
var reflectiveCtrlPointY: Float
when (cmd) {
'z', 'Z' -> {
path.close()
return
}
'm', 'M', 'l', 'L', 't', 'T' -> incr = 2
'h', 'H', 'v', 'V' -> incr = 1
'c', 'C' -> incr = 6
's', 'S', 'q', 'Q' -> incr = 4
'a', 'A' -> incr = 7
}
var k = 0
while (k < floats.size) {
when (cmd) {
'm' -> {
path.rMoveTo(floats[k], floats[k + 1])
currentX += floats[k]
currentY += floats[k + 1]
}
'M' -> {
path.moveTo(floats[k], floats[k + 1])
currentX = floats[k]
currentY = floats[k + 1]
}
'l' -> {
path.rLineTo(floats[k], floats[k + 1])
currentX += floats[k]
currentY += floats[k + 1]
}
'L' -> {
path.lineTo(floats[k], floats[k + 1])
currentX = floats[k]
currentY = floats[k + 1]
}
'h' -> {
path.rLineTo(floats[k], 0f)
currentX += floats[k]
}
'H' -> {
path.lineTo(floats[k], currentY)
currentX = floats[k]
}
'v' -> {
path.rLineTo(0f, floats[k])
currentY += floats[k]
}
'V' -> {
path.lineTo(currentX, floats[k])
currentY = floats[k]
}
'c' -> {
path.rCubicTo(floats[k], floats[k + 1], floats[k + 2], floats[k + 3], floats[k + 4], floats[k + 5])
ctrlPointX = currentX + floats[k + 2]
ctrlPointY = currentY + floats[k + 3]
currentX += floats[k + 4]
currentY += floats[k + 5]
}
'C' -> {
path.cubicTo(floats[k], floats[k + 1], floats[k + 2], floats[k + 3],
floats[k + 4], floats[k + 5])
currentX = floats[k + 4]
currentY = floats[k + 5]
ctrlPointX = floats[k + 2]
ctrlPointY = floats[k + 3]
}
's' -> {
reflectiveCtrlPointX = 0f
reflectiveCtrlPointY = 0f
if (previousCmd == 'c' || previousCmd == 's' || previousCmd == 'C' || previousCmd == 'S') {
reflectiveCtrlPointX = currentX - ctrlPointX
reflectiveCtrlPointY = currentY - ctrlPointY
}
path.rCubicTo(reflectiveCtrlPointX, reflectiveCtrlPointY, floats[k], floats[k + 1], floats[k + 2], floats[k + 3])
ctrlPointX = currentX + floats[k]
ctrlPointY = currentY + floats[k + 1]
currentX += floats[k + 2]
currentY += floats[k + 3]
}
'S' -> {
reflectiveCtrlPointX = currentX
reflectiveCtrlPointY = currentY
if (previousCmd == 'c' || previousCmd == 's' || previousCmd == 'C' || previousCmd == 'S') {
reflectiveCtrlPointX = 2 * currentX - ctrlPointX
reflectiveCtrlPointY = 2 * currentY - ctrlPointY
}
path.cubicTo(reflectiveCtrlPointX, reflectiveCtrlPointY, floats[k], floats[k + 1], floats[k + 2], floats[k + 3])
ctrlPointX = floats[k]
ctrlPointY = floats[k + 1]
currentX = floats[k + 2]
currentY = floats[k + 3]
}
'q' -> {
path.rQuadTo(floats[k], floats[k + 1], floats[k + 2], floats[k + 3])
ctrlPointX = currentX + floats[k]
ctrlPointY = currentY + floats[k + 1]
currentX += floats[k + 2]
currentY += floats[k + 3]
}
'Q' -> {
path.quadTo(floats[k], floats[k + 1], floats[k + 2], floats[k + 3])
ctrlPointX = floats[k]
ctrlPointY = floats[k + 1]
currentX = floats[k + 2]
currentY = floats[k + 3]
}
't' -> {
reflectiveCtrlPointX = 0f
reflectiveCtrlPointY = 0f
if (previousCmd == 'q' || previousCmd == 't' || previousCmd == 'Q' || previousCmd == 'T') {
reflectiveCtrlPointX = currentX - ctrlPointX
reflectiveCtrlPointY = currentY - ctrlPointY
}
path.rQuadTo(reflectiveCtrlPointX, reflectiveCtrlPointY,
floats[k], floats[k + 1])
ctrlPointX = currentX + reflectiveCtrlPointX
ctrlPointY = currentY + reflectiveCtrlPointY
currentX += floats[k]
currentY += floats[k + 1]
}
'T' -> {
reflectiveCtrlPointX = currentX
reflectiveCtrlPointY = currentY
if (previousCmd == 'q' || previousCmd == 't' || previousCmd == 'Q' || previousCmd == 'T') {
reflectiveCtrlPointX = 2 * currentX - ctrlPointX
reflectiveCtrlPointY = 2 * currentY - ctrlPointY
}
path.quadTo(reflectiveCtrlPointX, reflectiveCtrlPointY, floats[k], floats[k + 1])
ctrlPointX = reflectiveCtrlPointX
ctrlPointY = reflectiveCtrlPointY
currentX = floats[k]
currentY = floats[k + 1]
}
'a' -> {
// (rx ry x-axis-rotation large-arc-flag sweep-flag x y)
drawArc(path, currentX, currentY, floats[k + 5] + currentX, floats[k + 6] + currentY, floats[k],
floats[k + 1], floats[k + 2], floats[k + 3] != 0f, floats[k + 4] != 0f)
currentX += floats[k + 5]
currentY += floats[k + 6]
ctrlPointX = currentX
ctrlPointY = currentY
}
'A' -> {
drawArc(path, currentX, currentY, floats[k + 5], floats[k + 6], floats[k], floats[k + 1], floats[k + 2],
floats[k + 3] != 0f, floats[k + 4] != 0f)
currentX = floats[k + 5]
currentY = floats[k + 6]
ctrlPointX = currentX
ctrlPointY = currentY
}
}
previousCmd = cmd
k += incr
}
current[0] = currentX
current[1] = currentY
current[2] = ctrlPointX
current[3] = ctrlPointY
}
private fun drawArc(p: Path, x0: Float, y0: Float, x1: Float, y1: Float, a: Float, b: Float, theta: Float, isMoreThanHalf: Boolean, isPositiveArc: Boolean) {
/* Convert rotation angle from degrees to radians */
val thetaD = Math.toRadians(theta.toDouble())
/* Pre-compute rotation matrix entries */
val cosTheta = Math.cos(thetaD)
val sinTheta = Math.sin(thetaD)
/* Transform (x0, y0) and (x1, y1) into unit space */
/* using (inverse) rotation, followed by (inverse) scale */
val x0p = (x0 * cosTheta + y0 * sinTheta) / a
val y0p = (-x0 * sinTheta + y0 * cosTheta) / b
val x1p = (x1 * cosTheta + y1 * sinTheta) / a
val y1p = (-x1 * sinTheta + y1 * cosTheta) / b
/* Compute differences and averages */
val dx = x0p - x1p
val dy = y0p - y1p
val xm = (x0p + x1p) / 2
val ym = (y0p + y1p) / 2
/* Solve for intersecting unit circles */
val dsq = dx * dx + dy * dy
if (dsq == 0.0) return /* Points are coincident */
val disc = 1.0 / dsq - 1.0 / 4.0
if (disc < 0.0) {
val adjust = (Math.sqrt(dsq) / 1.99999).toFloat()
drawArc(p, x0, y0, x1, y1, a * adjust, b * adjust, theta, isMoreThanHalf, isPositiveArc)
return /* Points are too far apart */
}
val s = Math.sqrt(disc)
val sdx = s * dx
val sdy = s * dy
var cx: Double
var cy: Double
if (isMoreThanHalf == isPositiveArc) {
cx = xm - sdy
cy = ym + sdx
} else {
cx = xm + sdy
cy = ym - sdx
}
val eta0 = Math.atan2(y0p - cy, x0p - cx)
val eta1 = Math.atan2(y1p - cy, x1p - cx)
var sweep = eta1 - eta0
if (isPositiveArc != sweep >= 0) {
if (sweep > 0) {
sweep -= 2 * Math.PI
} else {
sweep += 2 * Math.PI
}
}
cx *= a.toDouble()
cy *= b.toDouble()
val tcx = cx
cx = cx * cosTheta - cy * sinTheta
cy = tcx * sinTheta + cy * cosTheta
arcToBezier(p, cx, cy, a.toDouble(), b.toDouble(), x0.toDouble(), y0.toDouble(), thetaD, eta0, sweep)
}
/**
* Converts an arc to cubic Bezier segments and records them in p.
*
* #param p The target for the cubic Bezier segments
* #param cx The x coordinate center of the ellipse
* #param cy The y coordinate center of the ellipse
* #param a The radius of the ellipse in the horizontal direction
* #param b The radius of the ellipse in the vertical direction
* #param inputE1x E(eta1) x coordinate of the starting point of the arc
* #param inputE1y E(eta2) y coordinate of the starting point of the arc
* #param theta The angle that the ellipse bounding rectangle makes with horizontal plane
* #param start The start angle of the arc on the ellipse
* #param sweep The angle (positive or negative) of the sweep of the arc on the ellipse
*/
private fun arcToBezier(p: Path, cx: Double, cy: Double, a: Double, b: Double, inputE1x: Double, inputE1y: Double, theta: Double, start: Double, sweep: Double) {
// Taken from equations at: http://spaceroots.org/documents/ellipse/node8.html
// and http://www.spaceroots.org/documents/ellipse/node22.html
// Maximum of 45 degrees per cubic Bezier segment
var e1x = inputE1x
var e1y = inputE1y
val numSegments = Math.abs(Math.ceil(sweep * 4 / Math.PI).toInt())
var eta1 = start
val cosTheta = Math.cos(theta)
val sinTheta = Math.sin(theta)
val cosEta1 = Math.cos(eta1)
val sinEta1 = Math.sin(eta1)
var ep1x = -a * cosTheta * sinEta1 - b * sinTheta * cosEta1
var ep1y = -a * sinTheta * sinEta1 + b * cosTheta * cosEta1
val anglePerSegment = sweep / numSegments
for (i in 0 until numSegments) {
val eta2 = eta1 + anglePerSegment
val sinEta2 = Math.sin(eta2)
val cosEta2 = Math.cos(eta2)
val e2x = cx + a * cosTheta * cosEta2 - b * sinTheta * sinEta2
val e2y = cy + a * sinTheta * cosEta2 + b * cosTheta * sinEta2
val ep2x = -a * cosTheta * sinEta2 - b * sinTheta * cosEta2
val ep2y = -a * sinTheta * sinEta2 + b * cosTheta * cosEta2
val tanDiff2 = Math.tan((eta2 - eta1) / 2)
val alpha = Math.sin(eta2 - eta1) * (Math.sqrt(4 + 3 * tanDiff2 * tanDiff2) - 1) / 3
val q1x = e1x + alpha * ep1x
val q1y = e1y + alpha * ep1y
val q2x = e2x - alpha * ep2x
val q2y = e2y - alpha * ep2y
p.cubicTo(q1x.toFloat(), q1y.toFloat(), q2x.toFloat(), q2y.toFloat(), e2x.toFloat(), e2y.toFloat())
eta1 = eta2
e1x = e2x
e1y = e2y
ep1x = ep2x
ep1y = ep2y
}
}
}
}
}
I know two ways to build a custom shaped icon from an AdaptiveIconDrawable. I however think that Google should make a public AdaptiveIconDrawable.setMask(Path path) method:
First way (pretty same way as AOSP code):
public Bitmap createBitmap(#NonNull AdaptiveIconDrawable drawable, #NonNull Path path, int outputSize) {
// make the drawable match the output size and store its bounds to restore later
final Rect originalBounds = drawable.getBounds();
drawable.setBounds(0, 0, outputSize, outputSize);
// rasterize drawable
final Bitmap outputBitmap = Bitmap.createBitmap(outputSize, outputSize, Bitmap.Config.ARGB_8888);
final Canvas tmpCanvas = new Canvas(maskBitmap);
drawable.getBackground().draw(tmpCanvas);
drawable.getForeground().draw(tmpCanvas);
// build a paint with shader composed by the rasterized AdaptiveIconDrawable
final BitmapShader shader = new BitmapShader(outputBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
final Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG |
Paint.FILTER_BITMAP_FLAG);
paint.setShader(shader);
// draw the shader with custom path (shape)
tmpCanvas.drawPath(path, paint);
// restore drawable original bounds
drawable.setBounds(originalBounds);
return outputBitmap;
}
Second way (the one I like most, because it allows to cache the mask bitmap in case of need using multiple times, avoiding Bitmap, Canvas, BitmapShader, and Paint re-allocation). If you don't understand, make sure you check this link out:
#Nullable private Bitmap mMaskBitmap;
#Nullable private Paint mClearPaint;
#NonNull Canvas mCanvas = new Canvas();
#Nullable Path mCustomShape; // your choice
#Nullable Rect mOldBounds;
public Bitmap createBitmap(#NonNull AdaptiveIconDrawable drawable, int outputSize) {
final Bitmap outputBitmap = Bitmap.createBitmap(outputSize, outputSize, Bitmap.Config.ARGB_8888);
mCanvas.setBitmap(outputBitmap);
// rasterize the AdaptiveIconDrawable
mOldBounds = drawable.getBounds();
drawable.setBounds(0, 0, outputSize, outputSize);
drawable.getBackground().draw(mCanvas);
drawable.getForeground().draw(mCanvas);
// finally mask the bitmap, generating the desired output shape
// this clears all the pixels of the rasterized AdaptiveIconDrawable which
// fall below the maskBitmap BLACK pixels
final Bitmap maskBitmap = getMaskBitmap(mCustomShape, outputSize);
mCanvas.drawBitmap(maskBitmap, 0, 0, mClearPaint);
// restore original drawable bounds
drawable.setBounds(mOldBounds);
return outputBitmap;
}
// results a bitmap with the mask of the #path shape
private Bitmap getMaskBitmap(#Nullable Path path, int iconSize) {
if (mMaskBitmap != null && mMaskBitmap.getWidth() == iconSize && mMaskBitmap.getHeight() == iconSize)
// quick return if already cached AND size-compatible
return mMaskBitmap;
// just create a plain, black bitmap with the same size of AdaptiveIconDrawable
mMaskBitmap = Bitmap.createBitmap(iconSize, iconSize, Bitmap.Config.ALPHA_8);
mMaskBitmap.eraseColor(Color.BLACK);
final Canvas tmpCanvas = new Canvas(mMaskBitmap);
// clear the pixels inside the shape (those where the icon will be visible)
mClearPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
mClearPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
if (path != null)
// if path is null, the output adaptive icon will not be masked (square, full size)
tmpCanvas.drawPath(path, mClearPaint);
return mMaskBitmap;
}
I prefer the second way, but the best one depends on the usage. If only one icon is shaped, then the first one would do the job. However, for multiple icons, the second one is better to go. Share your thoughts
Launchers have much less restrictions than applications, so they may use other approaches, but one solution has been nicely showcased in Nick Butcher's Adaptive Icon Playground.
The class you're probably interested in is the Adaptive Icon View which renders adapted versions of the icon by creating a raster of each layer with the background as a canvas bitmap and then drawing those layers as rounded rectangles to implement the clipping.
The linked repo will be much more informative and includes examples of how to transform the layer for movement effects etc., but here is the basic pseudo-code for 'adapting an icon' in an image view:
setIcon() {
//erase canvas first...
canvas.setBitmap(background)
drawable.setBounds(0, 0, layerSize, layerSize)
drawable.draw(canvas)
}
onDraw() {
//draw shadow first if needed...
canvas.drawRoundRect(..., cornerRadius, backgroundPaint)
canvas.drawRoundRect(..., cornerRadius, foregroundPaint)
}
I made a custom ImageView that can have a path set to clip the background/drawable and apply the proper shadow via a custom outline provider, which includes support for reading the system preference (as confirmed on my Pixel 4/emulators, changing system icon shape is propagated to my app.)
View:
import android.content.Context
import android.graphics.*
import android.graphics.drawable.Drawable
import android.os.Build
import android.util.AttributeSet
import android.view.View
import android.view.ViewOutlineProvider
import androidx.appcompat.widget.AppCompatImageView
open class AdaptiveImageView #JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : AppCompatImageView(context, attrs, defStyleAttr) {
// Reusable to reduce object allocation
private val resizeRect = RectF()
private val srcResizeRect = RectF()
private val resizeMatrix = Matrix()
private val adaptivePathPreference = Path()
private val adaptivePathResized = Path()
private var backgroundDelegate: Drawable? = null
// Paint to clear area outside adaptive path
private val clearPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
xfermode = PorterDuffXfermode(PorterDuff.Mode.CLEAR)
}
init {
// Use the adaptive path as an outline provider
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
outlineProvider = object : ViewOutlineProvider() {
override fun getOutline(view: View, outline: Outline) {
outline.setConvexPath(adaptivePathResized)
}
}
}
}
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
updatePathBounds()
}
// We use saveLayer/clear rather than clipPath so we get anti-aliasing
override fun onDraw(canvas: Canvas) {
val count = canvas.saveLayer(0f, 0f, width.toFloat(), height.toFloat(), null)
backgroundDelegate?.draw(canvas)
super.onDraw(canvas)
canvas.drawPath(adaptivePathResized, clearPaint)
canvas.restoreToCount(count)
}
// Background doesn't play nice with our clipping, so hold drawable and null out so
// we can handle ourselves later.
override fun setBackground(background: Drawable?) {
backgroundDelegate = background?.apply {
if (isStateful) state = drawableState
}
if (isLaidOut) updatePathBounds()
// Null out so noone else tries to draw it (incorrectly)
super.setBackground(null)
}
override fun drawableStateChanged() {
super.drawableStateChanged()
backgroundDelegate?.apply {
if (isStateful) state = drawableState
}
}
fun setAdaptivePath(path: Path?) {
path?.let { adaptivePathPreference.set(it) } ?: adaptivePathPreference.reset()
updatePathBounds()
}
private fun updatePathBounds() {
resizePath(
left = paddingLeft.toFloat(),
top = paddingTop.toFloat(),
right = width - paddingRight.toFloat(),
bottom = height - paddingBottom.toFloat()
)
backgroundDelegate?.apply {
setBounds(
paddingLeft,
paddingTop,
width,
height
)
}
invalidate()
invalidateOutline()
}
// No object allocations
private fun resizePath(left: Float, top: Float, right: Float, bottom: Float) {
resizeRect.set(left, top, right, bottom)
adaptivePathResized.set(adaptivePathPreference)
srcResizeRect.set(0f, 0f, 0f, 0f)
adaptivePathResized.computeBounds(srcResizeRect, true)
resizeMatrix.reset()
resizeMatrix.setRectToRect(srcResizeRect, resizeRect, Matrix.ScaleToFit.CENTER)
adaptivePathResized.transform(resizeMatrix)
// We want to invert the path so we can clear it later
adaptivePathResized.fillType = Path.FillType.INVERSE_EVEN_ODD
}
}
Path enum/functions:
private val circlePath = Path().apply {
arcTo(RectF(0f, 0f, 50f, 50f), 0f, 359f)
close()
}
private val squirclePath = Path().apply { set(PathParser.createPathFromPathData("M 50,0 C 10,0 0,10 0,50 C 0,90 10,100 50,100 C 90,100 100,90 100,50 C 100,10 90,0 50,0 Z")) }
private val roundedPath = Path().apply { set(PathParser.createPathFromPathData("M 50,0 L 70,0 A 30,30,0,0 1 100,30 L 100,70 A 30,30,0,0 1 70,100 L 30,100 A 30,30,0,0 1 0,70 L 0,30 A 30,30,0,0 1 30,0 z")) }
private val squarePath = Path().apply {
lineTo(0f, 50f)
lineTo(50f, 50f)
lineTo(50f, 0f)
lineTo(0f, 0f)
close()
}
private val tearDropPath = Path().apply { set(PathParser.createPathFromPathData("M 50,0 A 50,50,0,0 1 100,50 L 100,85 A 15,15,0,0 1 85,100 L 50,100 A 50,50,0,0 1 50,0 z")) }
private val shieldPath = Path().apply { set(PathParser.createPathFromPathData("m6.6146,13.2292a6.6146,6.6146 0,0 0,6.6146 -6.6146v-5.3645c0,-0.6925 -0.5576,-1.25 -1.2501,-1.25L6.6146,-0 1.2501,-0C0.5576,0 0,0.5575 0,1.25v5.3645A6.6146,6.6146 0,0 0,6.6146 13.2292Z")) }
private val lemonPath = Path().apply { set(PathParser.createPathFromPathData("M1.2501,0C0.5576,0 0,0.5576 0,1.2501L0,6.6146A6.6146,6.6146 135,0 0,6.6146 13.2292L11.9791,13.2292C12.6716,13.2292 13.2292,12.6716 13.2292,11.9791L13.2292,6.6146A6.6146,6.6146 45,0 0,6.6146 0L1.2501,0z")) }
enum class IconPath(val path: () -> Path?) {
SYSTEM(
path = {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
val adaptive = AdaptiveIconDrawable(null, null)
adaptive.iconMask
} else {
null
}
}
),
CIRCLE(path = { circlePath }),
SQUIRCLE(path = { squirclePath }),
ROUNDED(path = { roundedPath }),
SQUARE(path = { squarePath }),
TEARDROP(path = { tearDropPath }),
SHIELD(path = { shieldPath }),
LEMON(path = { lemonPath });
}
The key to copying the system preference is just to create an empty AdaptiveIconDrawable and read out the icon mask (which we later adjust the size of for use in the view. This will always return the current system icon shape path.
Sample usage:
myAdapativeImageView.setAdaptivePath(IconPath.SYSTEM.path())
Example:
Since Launcher is just an Activity, you can draw anything. You can draw application icons like ponies that run on beautiful animated clouds. This is your world, which obeys only your rules.
Further ... There is no magic in the programming world. If you are faced with magic, just use decompilers (with Java it very easy), find the code responsible for magic, document it and write a great blog post about how this magic works.
Given a AdaptiveIconDrawable instance, how do you shape it, to be of a
circular shape, rectangle, rounded rectangle, tear, and so on?
You can use AdaptiveIconDrawable.getBackground() and add any mask to it. Actually, you can do anything what you want with icon, AdaptiveIconDrawable is just way, where you can split foreground and background in easy way, without complicated filters or neural networks. Add parallax, animations and many more effects, now you have 2 layer for it.