{"id":3523,"url":"https://github.com/siyamed/android-shape-imageview","last_synced_at":"2025-05-15T00:06:35.675Z","repository":{"id":20251590,"uuid":"23524300","full_name":"siyamed/android-shape-imageview","owner":"siyamed","description":"Custom shaped android imageview components","archived":false,"fork":false,"pushed_at":"2019-07-27T17:05:09.000Z","size":5246,"stargazers_count":2663,"open_issues_count":63,"forks_count":601,"subscribers_count":103,"default_branch":"master","last_synced_at":"2025-04-13T19:39:30.706Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/siyamed.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-08-31T22:18:23.000Z","updated_at":"2025-03-31T23:29:22.000Z","dependencies_parsed_at":"2022-08-07T09:15:59.584Z","dependency_job_id":null,"html_url":"https://github.com/siyamed/android-shape-imageview","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siyamed%2Fandroid-shape-imageview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siyamed%2Fandroid-shape-imageview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siyamed%2Fandroid-shape-imageview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siyamed%2Fandroid-shape-imageview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/siyamed","download_url":"https://codeload.github.com/siyamed/android-shape-imageview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254249198,"owners_count":22039029,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:16:43.923Z","updated_at":"2025-05-15T00:06:35.653Z","avatar_url":"https://github.com/siyamed.png","language":"Java","readme":"# Shape Image View \n[![](https://travis-ci.org/siyamed/android-shape-imageview.svg?branch=master\u0026style=flat)](https://travis-ci.org/siyamed/android-shape-imageview/) \n[![Maven Central](https://maven-badges.herokuapp.com/maven-central/com.github.siyamed/android-shape-imageview/badge.svg?style=flat)](https://maven-badges.herokuapp.com/maven-central/com.github.siyamed/android-shape-imageview)\n\nProvides a set of custom shaped android imageview components, and a framework to define more shapes. Implements both **shader** and **bitmap mask** based image views. \n\n[Shader]: http://developer.android.com/reference/android/graphics/BitmapShader.html\n[Path.addPath]: http://developer.android.com/reference/android/graphics/Path.html#addPath(android.graphics.Path)\n[Path]: http://developer.android.com/reference/android/graphics/Path.html\n[xfermode]: http://developer.android.com/reference/android/graphics/Xfermode.html\n[svg_location]: library/src/main/res/raw\n[svg_rectangle]: http://www.w3schools.com/svg/svg_rect.asp \n[svg_circle]: http://www.w3schools.com/svg/svg_circle.asp \n[svg_ellipse]: http://www.w3schools.com/svg/svg_ellipse.asp\n[svg_polygon]: http://www.w3schools.com/svg/svg_polygon.asp\n[svg_path]: http://www.w3schools.com/svg/svg_path.asp\n[svg_group]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g\n[svg_transformations]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform\n[sample_app_play_store]: https://play.google.com/store/apps/details?id=com.github.siyamed.shapeimageview.sample\n[youtube_video]: http://youtu.be/6fCkptmwxtQ\n\n* [Shader][Shader] based one uses *canvas draw methods* and *[Path][Path]* class, \n* Mask based one uses [xfermode][xfermode] to draw image on bitmaps defined by android shape XML's or resource bitmaps.\n\n\u003cdiv\u003e\n\u003ca href=\"images/shader-buble.png\" style=\"float:left;\"\u003e\n\u003cimg src=\"images/shader-buble.png\" alt=\"Chat Bubble Image\" height=\"600px\"/\u003e\n\u003c/a\u003e\n\u003ca href=\"images/all-samples.png\" \u003e\n\u003cimg src=\"images/all-samples.png\" alt=\"Shape Image View\" height=\"600px\"/\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n\nThere are many projects online implementing such components, however one goal of this project is to provide a \nperformant/smooth scrolling **image view component framework** to define different shapes for imageviews. \n\n**For use with recycling view such as ListView or GridView please use shader based implementations.**\n\n[Sample app in play store][sample_app_play_store]\n\n[Youtube video][youtube_video]\n\n## How to use\n\nGradle dependency:\n```Groovy\ncompile 'com.github.siyamed:android-shape-imageview:0.9.+@aar'\n```\n\n###Shader Based ImageView's\n####BubbleImageView\n![Android Bubble ImageView](images/small-bubble.png)\n```XML\n\u003ccom.github.siyamed.shapeimageview.BubbleImageView\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:src=\"@drawable/neo\"\n    app:siArrowPosition=\"right\"\n    app:siSquare=\"true\"/\u003e\n```\n\nAttributes:\n* `siTriangleHeight` the height of the bubble pointer in dp\n* `siArrowPosition` where to point the arrow, currently `left|right`\n* `siSquare` set width and height to the minimum of the given values `true|false`\n\n####RoundedImageView\n![Android Rounded Rectangle ImageView](images/small-rounded.png)\n```XML\n\u003ccom.github.siyamed.shapeimageview.RoundedImageView\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:src=\"@drawable/neo\"\n    app:siRadius=\"6dp\"\n    app:siBorderWidth=\"6dp\"\n    app:siBorderColor=\"@color/darkgray\"\n    app:siSquare=\"true\"/\u003e\n```\n\nAttributes:\n* `siBorderColor` border color\n* `siBorderWidth` border width in dp\n* `siBorderAlpha` alpha value of the border between 0.0-1.0\n* `siRadius` corner radius in dp\n* `siSquare` set width and height to the minimum of the given values `true|false`\n\n####CircularImageView\n![Android Circular ImageView](images/small-circle.png)\n```XML\n\u003ccom.github.siyamed.shapeimageview.CircularImageView\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:src=\"@drawable/neo\"\n    app:siBorderWidth=\"6dp\"\n    app:siBorderColor=\"@color/darkgray\"/\u003e\n```\n\nAttributes:\n* `siBorderColor` border color\n* `siBorderWidth` border width in dp\n* `siBorderAlpha` alpha value of the border between 0.0-1.0\n\n####ShapeImageView\nThis view has the capability to process a provided SVG file (for a limited set of SVG elements), build a \n[Path][Path] object and draw it on the shader. The library includes SVG files defining a set of basic shapes and \nShapeImageView subclasses using those files. You can use whatever SVG you want to have a wonderful \nand creatively shaped images in your application. The included SVG files are under [library/src/main/res/raw][svg_location]\n\n\n| DiamondImageView                                       | PentagonImageView                                        | HexagonImageView                                         |\n| ------------------------------------------------------ | -------------------------------------------------------- | -------------------------------------------------------- |\n| ![Android Diamond ImageView](images/small-diamond.png) | ![Android Pentagon ImageView](images/small-pentagon.png) | ![Android Hexagon ImageView](images/small-hexagon.png)   |\n\n\n| OctogonImageView                                       | StarImageView                                            | HeartImageView                                       |\n| ------------------------------------------------------ | -------------------------------------------------------- | ---------------------------------------------------- |\n| ![Android Octogon ImageView](images/small-octogon.png) | ![Android Start ImageView](images/small-star.png)        | ![Android Heart ImageView](images/small-heart.png)   |\n\n\n```XML\n\u003ccom.github.siyamed.shapeimageview.{ClassName}\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:layout_margin=\"8dp\"\n    android:src=\"@drawable/neo\"\n    app:siBorderWidth=\"8dp\"\n    app:siBorderColor=\"@color/darkgray\"/\u003e\n```\n\nAttributes:\n* `siBorderColor` border color\n* `siBorderWidth` border width in dp\n* `siBorderAlpha` alpha value of the border between 0.0-1.0\n* `siStrokeCap` border stroke cap type `butt|round|square`\n* `siStrokeJoin` border stroke join type `bevel|miter|round`\n* `siSquare` set width and height to the minimum of the given values `true|false`\n* `siShape` a reference to an SVG. This is used by ShapeImageView, not the subclasses of it.\n\n\nSVG elements that are supported are: [rectangle][svg_rectangle], [circle][svg_circle], \n[ellipse][svg_ellipse], [polygon][svg_polygon], [path][svg_path], [group][svg_group]. [Transformations][svg_transformations] on those elements are also supported. \n\nThe system converts an SVG file into a Path. For each element including the parent element `\u003csvg\u003e` a new Path is created, and all the children Path's are [added][Path.addPath] to their parent path. \n\n###Bitmap Mask Based ImageViews \n\nThis view uses extra bitmaps for bitmap masks. Therefore it would be good to use them for very custom shapes, \npossibly not in a recycling view. \n\n* With [mask bitmap](sample/src/main/res/drawable/star.png): \n\n![Android Star Shape ImageView ](images/small-mask-star.png)\n```XML\n\u003ccom.github.siyamed.shapeimageview.mask.PorterShapeImageView\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    app:siShape=\"@drawable/star\"\n    android:src=\"@drawable/neo\"\n    app:siSquare=\"true\"/\u003e\n```\n\n* With [shape XML](sample/src/main/res/drawable/shape_rounded_rectangle.xml):\n\n![Android Star Shape ImageView ](images/small-xmlshape-rounded.png)\n\n```XML\n\u003ccom.github.siyamed.shapeimageview.mask.PorterShapeImageView\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    app:siShape=\"@drawable/shape_rounded_rectangle\"\n    android:src=\"@drawable/neo\"\n    app:siSquare=\"true\"/\u003e\n```\n\nrounded rectangle shape definition in XML: \n\n```XML\n\u003cshape android:shape=\"rectangle\" xmlns:android=\"http://schemas.android.com/apk/res/android\"\u003e\n    \u003ccorners\n        android:topLeftRadius=\"18dp\"\n        android:topRightRadius=\"18dp\"\n        android:bottomLeftRadius=\"18dp\"\n        android:bottomRightRadius=\"18dp\" /\u003e\n    \u003csolid android:color=\"@color/black\" /\u003e\n\u003c/shape\u003e\n```\n\nAttributes:\n* `siShape` the bitmap mask shape, either a shape drawable or a bitmap\n* `siSquare` set width and height to the minimum of the given values `true|false`\n\nThis 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. \n\n## Sample\n\nSee/execute the [sample](sample) for a demonstration of the components.\n\nIf you are lazy check [this youtube video][youtube_video] demonstrating scrolling in the sample app\n\nYou can download the [sample app from play store][sample_app_play_store] \n\n## Proguard\n\n```\n-dontwarn android.support.v7.**\n-keep class android.support.v7.** { ; }\n-keep interface android.support.v7.* { ; }\n-keepattributes *Annotation,Signature\n-dontwarn com.github.siyamed.**\n-keep class com.github.siyamed.shapeimageview.**{ *; }\n```\n\n## References\n* [MostafaGazar/CustomShapeImageView](https://github.com/MostafaGazar/CustomShapeImageView): Used this project a basis for bitmap masks  \n* [geosolutions-it/mapsforge/svg-android](https://github.com/geosolutions-it/mapsforge/tree/master/svg-android): Used and modified to create a path from a svg file \n\n[![Android Shape Image View on Android Arsenal](https://img.shields.io/badge/Android%20Arsenal-android--shape--imageview-brightgreen.svg?style=flat)](https://android-arsenal.com/details/1/932)\n","funding_links":[],"categories":["Index `(light-weight pages)`","Libraries","Java","Index","Libs"],"sub_categories":["GUI","\u003cA NAME=\"Widget\"\u003e\u003c/A\u003eWidget"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiyamed%2Fandroid-shape-imageview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsiyamed%2Fandroid-shape-imageview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiyamed%2Fandroid-shape-imageview/lists"}