Android-Kotlin - Circular Imageview with Border

Learn to create a Circular ImageView in Android using Kotlin. Follow this guide to implement custom circular image views in your Android app with RRTutors.

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

 

  

 

Related Tutorials & Resources