Skip to content
Custom shaped android imageview components
Branch: master
Clone or download
Latest commit e38e701 Mar 28, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
gradle/wrapper gradle wrapper Sep 29, 2015
images fix pentagon sample image Sep 17, 2014
library
sample travis update Sep 29, 2015
.gitignore updated idea/androidsdk things to working on current AS versions Sep 29, 2015
.travis.yml android support repo for travis Sep 29, 2015
LICENSE.md Update LICENSE.md Oct 21, 2015
README.md Update README.md Apr 9, 2016
build.gradle updates for dev env. Sep 29, 2015
gradle.properties travis update Sep 29, 2015
gradlew updates for dev env. Sep 29, 2015
gradlew.bat initial code commit Sep 9, 2014
settings.gradle initial code commit Sep 9, 2014

README.md

Shape Image View

Maven Central

Provides a set of custom shaped android imageview components, and a framework to define more shapes. Implements both shader and bitmap mask based image views.

  • Shader based one uses canvas draw methods and Path class,
  • Mask based one uses xfermode to draw image on bitmaps defined by android shape XML's or resource bitmaps.

There are many projects online implementing such components, however one goal of this project is to provide a performant/smooth scrolling image view component framework to define different shapes for imageviews.

For use with recycling view such as ListView or GridView please use shader based implementations.

Sample app in play store

Youtube video

How to use

Gradle dependency:

compile 'com.github.siyamed:android-shape-imageview:0.9.+@aar'

###Shader Based ImageView's ####BubbleImageView Android Bubble ImageView

<com.github.siyamed.shapeimageview.BubbleImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/neo"
    app:siArrowPosition="right"
    app:siSquare="true"/>

Attributes:

  • siTriangleHeight the height of the bubble pointer in dp
  • siArrowPosition where to point the arrow, currently left|right
  • siSquare set width and height to the minimum of the given values true|false

####RoundedImageView Android Rounded Rectangle ImageView

<com.github.siyamed.shapeimageview.RoundedImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/neo"
    app:siRadius="6dp"
    app:siBorderWidth="6dp"
    app:siBorderColor="@color/darkgray"
    app:siSquare="true"/>

Attributes:

  • siBorderColor border color
  • siBorderWidth border width in dp
  • siBorderAlpha alpha value of the border between 0.0-1.0
  • siRadius corner radius in dp
  • siSquare set width and height to the minimum of the given values true|false

####CircularImageView Android Circular ImageView

<com.github.siyamed.shapeimageview.CircularImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/neo"
    app:siBorderWidth="6dp"
    app:siBorderColor="@color/darkgray"/>

Attributes:

  • siBorderColor border color
  • siBorderWidth border width in dp
  • siBorderAlpha alpha value of the border between 0.0-1.0

####ShapeImageView This view has the capability to process a provided SVG file (for a limited set of SVG elements), build a Path object and draw it on the shader. The library includes SVG files defining a set of basic shapes and ShapeImageView subclasses using those files. You can use whatever SVG you want to have a wonderful and creatively shaped images in your application. The included SVG files are under library/src/main/res/raw

DiamondImageView PentagonImageView HexagonImageView
Android Diamond ImageView Android Pentagon ImageView Android Hexagon ImageView
OctogonImageView StarImageView HeartImageView
Android Octogon ImageView Android Start ImageView Android Heart ImageView
<com.github.siyamed.shapeimageview.{ClassName}
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="8dp"
    android:src="@drawable/neo"
    app:siBorderWidth="8dp"
    app:siBorderColor="@color/darkgray"/>

Attributes:

  • siBorderColor border color
  • siBorderWidth border width in dp
  • siBorderAlpha alpha value of the border between 0.0-1.0
  • siStrokeCap border stroke cap type butt|round|square
  • siStrokeJoin border stroke join type bevel|miter|round
  • siSquare set width and height to the minimum of the given values true|false
  • siShape a reference to an SVG. This is used by ShapeImageView, not the subclasses of it.

SVG elements that are supported are: rectangle, circle, ellipse, polygon, path, group. Transformations on those elements are also supported.

The system converts an SVG file into a Path. For each element including the parent element <svg> a new Path is created, and all the children Path's are added to their parent path.

###Bitmap Mask Based ImageViews

This view uses extra bitmaps for bitmap masks. Therefore it would be good to use them for very custom shapes, possibly not in a recycling view.

Android Star Shape ImageView

<com.github.siyamed.shapeimageview.mask.PorterShapeImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:siShape="@drawable/star"
    android:src="@drawable/neo"
    app:siSquare="true"/>

Android Star Shape ImageView

<com.github.siyamed.shapeimageview.mask.PorterShapeImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:siShape="@drawable/shape_rounded_rectangle"
    android:src="@drawable/neo"
    app:siSquare="true"/>

rounded rectangle shape definition in XML:

<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:topLeftRadius="18dp"
        android:topRightRadius="18dp"
        android:bottomLeftRadius="18dp"
        android:bottomRightRadius="18dp" />
    <solid android:color="@color/black" />
</shape>

Attributes:

  • siShape the bitmap mask shape, either a shape drawable or a bitmap
  • siSquare set width and height to the minimum of the given values true|false

This method reads a shape file (either bitmap or an android shape xml), creates a bitmap object using this shape, and finally combines the bitmap of the real image to be shown and the mast bitmap using xfermode.

Sample

See/execute the sample for a demonstration of the components.

If you are lazy check this youtube video demonstrating scrolling in the sample app

You can download the sample app from play store

Proguard

-dontwarn android.support.v7.**
-keep class android.support.v7.** { ; }
-keep interface android.support.v7.* { ; }
-keepattributes *Annotation,Signature
-dontwarn com.github.siyamed.**
-keep class com.github.siyamed.shapeimageview.**{ *; }

References

Android Shape Image View on Android Arsenal

You can’t perform that action at this time.