Piasy/ShapedDraweeView

Fresco custom view with mask shape.

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.piasy:ShapedDraweeView:'
	}
	dependencies {
		implementation("com.github.piasy:ShapedDraweeView:")
	}
	<dependency>
	    <groupId>com.github.piasy</groupId>
	    <artifactId>ShapedDraweeView</artifactId>
	    <version></version>
	</dependency>

                            
    libraryDependencies += "com.github.piasy" % "ShapedDraweeView" % ""
        
        

                            
    :dependencies [[com.github.piasy/ShapedDraweeView ""]]

Readme

ShapedDraweeView

Fresco custom view with mask shape.

Demo

demo

Usage

Dependency

allprojects {
    repositories {
        jcenter()
    }
}

compile 'com.github.piasy:ShapedDraweeView:1.2.1'

Layout

<com.github.piasy.fresco.draweeview.shaped.ShapedDraweeView
        android:id="@+id/mShapedDraweeView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:placeholder="@drawable/placeholder"
        app:maskShape="@drawable/mask"
        />

Java

ShapedDraweeView shapedDraweeView = (ShapedDraweeView) findViewById(R.id.mShapedDraweeView);
DraweeController controller = Fresco.newDraweeControllerBuilder()
        .setUri(Uri.parse(
                "http://img0.bdstatic.com/img/image/shouye/xinshouye/chongwu16830.jpg"))
        .build();
shapedDraweeView.setController(controller);

SVG support

At least use appcompat:23.2.0.

Import a SVG drawable as vector drawable via AndroidStudio.

app/build.gradle

android {
    // ...

    defaultConfig {
        // ...

        vectorDrawables.useSupportLibrary = true
    }

    // ...
}

Then set the app:maskShape value as a vector drawable.

Full example is inside example module

Note

When you see a NPE from ShapedDraweeView, it's usually because your view is not correctly initialized, e.g. zero width/height.

Credit

  1. Shape mask is from: https://github.com/siyamed/android-shape-imageview
  2. Fresco custom view is from: http://fresco-cn.org/docs/writing-custom-views.html