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.

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


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: 
 

CircleImageView Example

 


 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">

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

</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 :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

1179 Views