Search code examples
androidrotationimageviewantialiasing

Rotated ImageView edges are not smooth (jagged)


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


Solution

  • 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^^