Sample NG ImageView
: NG Rotated ImageView
In iOS, i can easily solve this jagged-edges-problem by view.layer.allowsEdgeAntialiasing = true
. What is the best way to solve this in Android?
What I already tried:
I referred to this post Bitmap not drawn anti-aliased and set android:layerType="software"
but result is still NG.
<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layerType="software"
android:rotation="5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/pic" />
Expected result: smooth (anti-aliased) edges
Actual result: not smooth (jagged) edges
So after experimenting for a while, this is the best that I could achieve:
1) Test output: NG vs OK
2) NG output source
*xml only (under ConstraintLayout)
<ImageView 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"
android:id="@+id/test3"
app:srcCompat="@drawable/sampleImg"
android:rotation="5"/>
3) OK output source
*xml (under ConstraintLayout)
<test.ntfry.imageview_rotate_antialias.MyImageView
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"
android:id="@+id/test2"/>
*Custom ImageView class
class MyImageView : AppCompatImageView {
private val mPaint = Paint(Paint.ANTI_ALIAS_FLAG)
private val mMatrix = Matrix()
private var mRotatedBitmap: Bitmap? = null
private val mRotation = 5F
constructor(context: Context) : super(context, null) {
init()
}
constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {
init()
}
constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {
init()
}
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
setMeasuredDimension(mRotatedBitmap!!.width, mRotatedBitmap!!.height)
}
override fun onDraw(canvas: Canvas?) {
super.onDraw(canvas)
canvas?.drawBitmap(mRotatedBitmap!!, 0f, 0f, mPaint)
}
private fun init() {
// https://stackoverflow.com/questions/14378573/bitmap-not-drawn-anti-aliased
setLayerType(LAYER_TYPE_SOFTWARE, null)
// get source image and set-apply rotation through matrix
val sourceBitmap = BitmapFactory.decodeResource(resources, R.drawable.sampleImg)
mMatrix.postRotate(mRotation)
mRotatedBitmap = Bitmap.createBitmap(sourceBitmap, 0, 0, sourceBitmap.width, sourceBitmap.height, mMatrix, true)
}
}
4) If you have a better solution, by all means please comment/share your idea! Thanks^^