lopspower/CircularImageView

Create circular ImageView in Android in the simplest way possible

Download

Step 1. Add the JitPack repository to your build file

Add it in your root settings.gradle at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url 'https://jitpack.io' }
		}
	}

Add it in your settings.gradle.kts at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url = uri("https://jitpack.io") }
		}
	}

Add to pom.xml

	<repositories>
		<repository>
		    <id>jitpack.io</id>
		    <url>https://jitpack.io</url>
		</repository>
	</repositories>

Add it in your build.sbt at the end of resolvers:

 
    resolvers += "jitpack" at "https://jitpack.io"

Add it in your project.clj at the end of repositories:

 
    :repositories [["jitpack" "https://jitpack.io"]]

Step 2. Add the dependency

	dependencies {
		implementation 'com.github.lopspower:circularimageview:4.3.0'
	}

	dependencies {
		implementation("com.github.lopspower:circularimageview:4.3.0")
	}

	<dependency>
	    <groupId>com.github.lopspower</groupId>
	    <artifactId>circularimageview</artifactId>
	    <version>4.3.0</version>
	</dependency>


                            
    libraryDependencies += "com.github.lopspower" % "circularimageview" % "4.3.0"


                            
    :dependencies [[com.github.lopspower/circularimageview "4.3.0"]]

Readme

CircularImageView

This is an Android project allowing to realize a circular ImageView in the simplest way possible.

USAGE

To make a circular ImageView add CircularImageView in your layout XML and add CircularImageView library in your project or you can also grab it via Gradle:

implementation 'com.mikhaellopez:circularimageview:4.3.1'

XML

<com.mikhaellopez.circularimageview.CircularImageView
    android:layout_width="250dp"
    android:layout_height="250dp"
    android:src="@drawable/image"
    app:civ_border_color="#3f51b5"
    app:civ_border_width="4dp"
    app:civ_shadow="true"
    app:civ_shadow_radius="10dp"
    app:civ_shadow_color="#3f51b5"/>

You must use the following properties in your XML to change your CircularImageView.

| Properties | Type | Default | | -------------------------------- | ------------------------------------------------------------ | ---------------- | | app:civ_circle_color | color | WHITE | | app:civ_circle_color_start | color | civ_circle_color | | app:civ_circle_color_end | color | civ_circle_color | | app:civ_color_direction | left_to_right, right_to_left, top_to_bottom or bottom_to_top | left_to_right | | app:civ_border | boolean | true | | app:civ_border_width | dimension | 4dp | | app:civ_border_color | color | WHITE | | app:civ_border_color_start | color | civ_border_color | | app:civ_border_color_end | color | civ_border_color | | app:civ_border_color_direction | left_to_right, right_to_left, top_to_bottom or bottom_to_top | left_to_right | | app:civ_shadow | boolean | false | | app:civ_shadow_color | color | BLACK | | app:civ_shadow_radius | dimension | 8dp | | app:civ_shadow_gravity | center, top, bottom, start or end | bottom |

:information_source: You can also use android:elevation instead of app:civ_shadow to have default Material Design elevation.

KOTLIN

val circularImageView = findViewById<CircularImageView>(R.id.circularImageView)
circularImageView.apply {
    // Set Color
    circleColor = Color.WHITE
    // or with gradient
    circleColorStart = Color.BLACK
    circleColorEnd = Color.RED
    circleColorDirection = CircularImageView.GradientDirection.TOP_TO_BOTTOM

    // Set Border
    borderWidth = 10f
    borderColor = Color.BLACK
    // or with gradient
    borderColorStart = Color.BLACK
    borderColorEnd = Color.RED
    borderColorDirection = CircularImageView.GradientDirection.TOP_TO_BOTTOM
    
    // Add Shadow with default param
    shadowEnable = true
    // or with custom param
    shadowRadius = 7f
    shadowColor = Color.RED
    shadowGravity = CircularImageView.ShadowGravity.CENTER
}

JAVA

CircularImageView circularImageView = findViewById(R.id.circularImageView);
// Set Color
circularImageView.setCircleColor(Color.WHITE);
// or with gradient
circularImageView.setCircleColorStart(Color.BLACK);
circularImageView.setCircleColorEnd(Color.RED);
circularImageView.setCircleColorDirection(CircularImageView.GradientDirection.TOP_TO_BOTTOM);

// Set Border
circularImageView.setBorderWidth(10f);
circularImageView.setBorderColor(Color.BLACK);
// or with gradient
circularImageView.setBorderColorStart(Color.BLACK);
circularImageView.setBorderColorEnd(Color.RED);
circularImageView.setBorderColorDirection(CircularImageView.GradientDirection.TOP_TO_BOTTOM);

// Add Shadow with default param
circularImageView.setShadowEnable(true);
// or with custom param
circularImageView.setShadowRadius(7f);
circularImageView.setShadowColor(Color.RED);
circularImageView.setShadowGravity(CircularImageView.ShadowGravity.CENTER);

LIMITATIONS

By default the ScaleType is FIT_CENTER. You can also used CENTER_INSIDE AND CENTER_CROP.
Enabling adjustViewBounds is not supported as this requires an unsupported ScaleType.

SUPPORT ❤️

Find this library useful? Support it by joining stargazers for this repository ⭐️ <br/> And follow me for my next creations 👍

LICENCE

CircularImageView by Lopez Mikhael is licensed under a Apache License 2.0.