CircleImageView: Create Circle ImageView in Android - RRutors

Last updated Dec 13, 2021

In this example tutorial, we will see how to design CircleImageView by using Kotlin in android studio.

Implementation:

To begin, Create a new project in android studio and enter the name, select the project location and language to Kotlin. Then press the Finish button.
Open the activity_circular_image_view.xml file and add the RelativeLayout.

Add dependency of circleimageview inside build.gradle(app) under dependencies.

implementation 'de.hdodenhof:circleimageview:3.1.0'

In activity_circular_image_view.xml, insert an CircleImageView inside a RelativeLayout.

<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:src="@drawable/android"
app:civ_border_color="@color/black"
app:civ_border_width="4dp"
></de.hdodenhof.circleimageview.CircleImageView>

Add Image in circleImageView using src attribute, if you need border around image use civ_border_color and civ_border_width attribute.

android:src="@drawable/android"
app:civ_border_color="@color/black"
app:civ_border_width="4dp"

CircleImageView in android has the following properties:
src, background, civ_border_color, civ_border_width, id etc.
Now run the application, you will see the output shown below.

Output:

Complete source code for CircleImageView Android example:

activity_circular_image_view.xml file

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#F6F3D4"
tools:context=".CircularImageView">

</RelativeLayout>

build.gradle(app) file

plugins {
    id 'com.android.application'
    id 'kotlin-android'
}

android {
    compileSdk 31

    defaultConfig {
        applicationId "com.nishajain.kotinexamples"
        minSdk 21
        targetSdk 31
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
}

dependencies {

    implementation 'androidx.core:core-ktx:1.7.0'
    implementation 'androidx.appcompat:appcompat:1.4.0'
    implementation 'com.google.android.material:material:1.4.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.2'
    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
    implementation 'de.hdodenhof:circleimageview:3.1.0'
}

Conclusion: We have covered the topic how to add CircleImageView to Android by using Kotlin.

Article Contributed By :

1179 Views