It is seen that many Android Applications use CircularImageView to show the profile images, status, stories, and many other things but doing this with a normal ImageView is a bit difficult. So to do so use hdodenhof CircleImageView Library. It’s a fast circular ImageView perfect for profile images. This is based on RoundedImageView from Vince Mi. So in this article, let’s add a CircleImageView to the Android App. A sample image is given below to get an idea about what we are going to do in this article.
Note: To create a CircularImageView in Android without using any library please refer to How to create a Circular image view in Android without using any library?
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. The code for that has been given in both Java and Kotlin Programming Language for Android.
Step 2: Adding Dependency to the build.gradle File
Go to Module build.gradle file and add this dependency and click on Sync Now button.
implementation 'de.hdodenhof:circleimageview:3.1.0'
Step 3: Working with the XML Files
Create a CircleImageView inside the activity_main.xml file and set the android:src=”@drawable/mountain”. The complete code of the activity_main.xml file is given below.
XML
<?xml version="1.0" encoding="utf-8"?><RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <!-- Circular Image View --> <de.hdodenhof.circleimageview.CircleImageView app:civ_border_width="4dp" android:layout_centerInParent="true" android:src="@drawable/mountain" app:civ_border_color="#FF000000" android:layout_width="300dp" android:layout_height="300dp"/> </RelativeLayout> |
Step 4: Working with the MainActivity File
Go to the MainActivity File and refer to the following code. Since there is no change in MainActivity File, So keep it as it is.
Java
import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); }} |
Kotlin
import android.os.Bundleimport androidx.appcompat.app.AppCompatActivity class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) }} |
Output:
Limitations
- In this library, the ScaleType is always CENTER_CROP and you will get an exception if you try to change it.
- Enabling adjustViewBounds is not supported as this requires an unsupported ScaleType.
- Using a TransitionDrawable with CircleImageView doesn’t work properly and leads to messed-up images.
