ShapedDraweeView

Fresco custom view with mask shape.

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

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

Piasy / ShapedDraweeView