Android-Kotlin - Circular Imageview with Border

Last updated Dec 21, 2019

This Example demonstrate how to create Circular Imageview with Border in Android Kotlin

Lets check the code.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:padding="16dp"
tools:context=".MainActivity">
<ImageView
android:id="@+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="30dp"
android:layout_centerInParent="true"/>
<androidx.appcompat.widget.AppCompatSeekBar
android:id="@+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:min="10"
android:max="100"

</LinearLayout>


class MainActivity : AppCompatActivity() {

    var imageview:ImageView?=null ;
    lateinit var  bitmap:Bitmap;
    lateinit var  bitmapSample:Bitmap;
    lateinit var  seekBar: AppCompatSeekBar;
    var shadowWidth =20;
    lateinit var canvas:Canvas;
    lateinit   var paint:Paint;
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        imageview=findViewById(R.id.imageview);

        seekBar=findViewById(R.id.seekBar);

        bitmap=BitmapFactory.decodeResource
(resources,R.drawable.img);
        imageview?.setImageBitmap(bitmap);


        paint=Paint();
        val bitmapWidth=bitmap.width
        val bitmapHeight=bitmap.height
        val borderWidth=20;

        val dstBitmapWidth = Math.min(bitmapWidth, 
bitmapHeight) + borderWidth * 2
         bitmapSample=Bitmap.createBitmap(dstBitmapWidth,
dstBitmapWidth,Bitmap.Config.ARGB_8888)



        seekBar.setOnSeekBarChangeListener(
object:SeekBar.OnSeekBarChangeListener{
            override fun onProgressChanged(
seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
                 shadowWidth=progress;
                canvas=Canvas(bitmapSample)
                canvas.drawColor(Color.WHITE)
                canvas.drawBitmap(bitmap,
(bitmapWidth-dstBitmapWidth).toFloat()/2,
(bitmapHeight-dstBitmapWidth).toFloat()/2,null)

                paint.style = Paint.Style.STROKE
                paint.strokeWidth = (borderWidth * 2).toFloat()
                paint.color = Color.WHITE
                canvas.drawCircle(
                    (canvas.width / 2).toFloat(),
                    (canvas.height / 2).toFloat(),
                    (canvas.width / 2).toFloat(),
                    paint
                )
                paint.color = Color.GREEN
                paint.strokeWidth = shadowWidth.toFloat()
                canvas.drawCircle(
                    (canvas.width / 2).toFloat(),
                    (canvas.height / 2).toFloat(),
                    (canvas.width / 2).toFloat(),
                    paint
                )
                val roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(
resources, bitmapSample)
                roundedBitmapDrawable.setCircular(true)
                roundedBitmapDrawable.setAntiAlias(true)
                imageview?.setImageDrawable(roundedBitmapDrawable);
            }

            override fun onStartTrackingTouch(seekBar: SeekBar?) {
                    }

            override fun onStopTrackingTouch(seekBar: SeekBar?) {
                  }
        });



    }
}

MainActivity.kt