Scribd
Upload
125 views8 pages

How To Use

The document describes how to use various shape image views provided by the android-shape-imageview library. It includes BubbleImageView, RoundedImageView, CircularImageView, and custom shapes defined by SVG files. Attributes are provided to customize properties of the image views like border width, color, and radius. It also describes a bitmap mask approach and includes an example of its implementation.

Uploaded by

Faridh29
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
125 views8 pages

How To Use

The document describes how to use various shape image views provided by the android-shape-imageview library. It includes BubbleImageView, RoundedImageView, CircularImageView, and custom shapes defined by SVG files. Attributes are provided to customize properties of the image views like border width, color, and radius. It also describes a bitmap mask approach and includes an example of its implementation.

Uploaded by

Faridh29
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

How to use

Gradle dependency:

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

###Shader Based ImageView's ####BubbleImageView

<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

<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

<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 aPath 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 Hexago

OctogonImageView StarImageView Heart

<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.

 With mask bitmap:

<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"/>

 With shape XML:


<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.**{ *; }
Example
<pl.pawelkleczkowski.customgauge.CustomGauge
android:id="@+id/gauge1"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerHorizontal="true"
android:layout_below="@+id/button"
android:paddingBottom="20dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="20dp"
gauge:pointStartColor="@color/Red"
gauge:pointEndColor="@color/Red"
gauge:pointSize="6"
gauge:startAngel="135"
gauge:strokeCap="ROUND"
gauge:strokeColor="@color/Gray"
gauge:strokeWidth="10dp"
gauge:startValue="0"
gauge:endValue="1000"
gauge:sweepAngel="270" />

<pl.pawelkleczkowski.customgauge.CustomGauge
android:id="@+id/gauge2"
android:layout_width="140dp"
android:layout_height="140dp"
android:layout_below="@+id/gauge1"
android:layout_centerHorizontal="true"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
gauge:endValue="800"
gauge:pointEndColor="@color/DarkBlue"
gauge:pointStartColor="@color/LightSkyBlue"
gauge:startAngel="135"
gauge:startValue="200"
gauge:strokeCap="ROUND"
gauge:strokeColor="@color/Gray"
gauge:strokeWidth="10dp"
gauge:sweepAngel="270" />
buildscript {
repositories {
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:2.2.3' classpath 'com.jfrog.bintray.gradle:gradle-bintray-
plugin:1.4' classpath 'com.github.dcendents:android-maven-gradle-plugin:1.4.1'

// NOTE: Do not place your application dependencies here; they belong // in the individual module
build.gradle files }
}

You might also like