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