CircleImageView - How to make CircleImageView in Android Studio using Kotlin.

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.

</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 :

514 Views

Projects By category