{"id":13604339,"url":"https://github.com/florent37/ShapeOfView","last_synced_at":"2025-04-11T23:32:26.252Z","repository":{"id":41583547,"uuid":"121948748","full_name":"florent37/ShapeOfView","owner":"florent37","description":"Give a custom shape to any android view, Material Design 2 ready","archived":false,"fork":false,"pushed_at":"2025-03-07T21:04:51.000Z","size":14184,"stargazers_count":3171,"open_issues_count":49,"forks_count":398,"subscribers_count":60,"default_branch":"master","last_synced_at":"2025-04-05T10:01:27.924Z","etag":null,"topics":["android","androidx","custom","layout","mask","material","shape","view","xml"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/florent37.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"ko_fi":"FlorentChampigny","github":"florent37"}},"created_at":"2018-02-18T12:14:06.000Z","updated_at":"2025-04-05T08:19:10.000Z","dependencies_parsed_at":"2025-03-29T09:00:24.140Z","dependency_job_id":"08046f9a-d711-4f10-a473-be4544b7ab11","html_url":"https://github.com/florent37/ShapeOfView","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/florent37%2FShapeOfView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/florent37%2FShapeOfView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/florent37%2FShapeOfView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/florent37%2FShapeOfView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/florent37","download_url":"https://codeload.github.com/florent37/ShapeOfView/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247999864,"owners_count":21031046,"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":["android","androidx","custom","layout","mask","material","shape","view","xml"],"created_at":"2024-08-01T19:00:43.788Z","updated_at":"2025-04-11T23:32:21.231Z","avatar_url":"https://github.com/florent37.png","language":"Java","readme":"# ShapeOfView\n\n[![CircleCI](https://circleci.com/gh/florent37/ShapeOfView/tree/master.svg?style=svg)](https://circleci.com/gh/florent37/ShapeOfView/tree/master)\n\nGive a custom shape to any android view\nUseful for Material Design 2\n\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/shrine.gif)](https://www.github.com/florent37/ShapeOfView)\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/sample_diagonal.gif)](https://www.github.com/florent37/ShapeOfView)\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/sample_arc.gif)](https://www.github.com/florent37/ShapeOfView)\n\n\u003ca href=\"https://goo.gl/WXW8Dc\"\u003e\n  \u003cimg alt=\"Android app on Google Play\" src=\"https://developer.android.com/images/brand/en_app_rgb_wo_45.png\" /\u003e\n\u003c/a\u003e\n\n*Breaking change*\n\nthe old package `com.github.florent37` has been replaced by `io.github.florent37`\n\n# Download\n\n\u003ca href='https://ko-fi.com/A160LCC' target='_blank'\u003e\u003cimg height='36' style='border:0px;height:36px;' src='https://az743702.vo.msecnd.net/cdn/kofi1.png?v=0' border='0' alt='Buy Me a Coffee at ko-fi.com' /\u003e\u003c/a\u003e\n\n[ ![Download](https://api.bintray.com/packages/florent37/maven/shapeofview/images/download.svg) ](https://bintray.com/florent37/maven/shapeofview/)\n```java\n//using maven central\n\ndependencies {\n    implementation 'io.github.florent37:shapeofview:1.4.7'\n}\n```\n\n# Sample\n\nWhat you can do with Shape Of View :\n\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/tab.gif)](https://www.github.com/florent37/ShapeOfView)\n\n# Use implemented shapes\n\nShapeOfView **disable** the `background` property of your view, \nplease specify a child with a background to enable it \n```xml\n\u003cio.github.florent37.shapeofview.shapes.CircleView\n   \u003cFrameLayout\n      android:background=\"@color/blue\"\n```\n\nShapeOfView came with pre-created shapes :\n\n## Circle\n\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/circle.png)](https://www.github.com/florent37/ShapeOfView)\n\n```xml\n\u003cio.github.florent37.shapeofview.shapes.CircleView\n        android:layout_width=\"150dp\"\n        android:layout_height=\"150dp\"\n\n        android:elevation=\"4dp\"\n        app:shape_circle_borderColor=\"@android:color/black\"\n        app:shape_circle_borderWidth=\"2dp\"\u003e\n\n            \u003c!-- YOUR CONTENT --\u003e\n\n\u003c/io.github.florent37.shapeofview.shapes.CircleView\u003e\n```\n\n## RoundRect\n\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/roundrect.png)](https://www.github.com/florent37/ShapeOfView)\n\n```xml\n\u003cio.github.florent37.shapeofview.shapes.RoundRectView\n        android:layout_width=\"150dp\"\n        android:layout_height=\"100dp\"\n        android:elevation=\"4dp\"\n        app:shape_roundRect_bottomLeftRadius=\"10dp\"\n        app:shape_roundRect_bottomRightRadius=\"10dp\"\n        app:shape_roundRect_topLeftRadius=\"10dp\"\n        app:shape_roundRect_topRightRadius=\"10dp\"\n        \n        app:shape_roundRect_borderColor=\"@android:color/black\"\n        app:shape_roundRect_borderWidth=\"2dp\"\n        \u003e\n\n\n            \u003c!-- YOUR CONTENT --\u003e\n\n\u003c/io.github.florent37.shapeofview.shapes.RoundRectView\u003e\n```\n\n## ClipCorner\n\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/cut_corner.png)](https://www.github.com/florent37/ShapeOfView)\n\n```xml\n\u003cio.github.florent37.shapeofview.shapes.CutCornerView\n        android:id=\"@+id/clipCorner\"\n        android:layout_width=\"150dp\"\n        android:layout_height=\"100dp\"\n        android:elevation=\"4dp\"\n        app:shape_cutCorner_bottomRightSize=\"20dp\"\u003e\n\n         \u003c!-- YOUR CONTENT --\u003e\n\n\u003c/io.github.florent37.shapeofview.shapes.CutCornerView\u003e\n```\n\n## Arc\n\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/arc.png)](https://www.github.com/florent37/ShapeOfView)\n\n```xml\n\u003cio.github.florent37.shapeofview.shapes.ArcView\n        android:layout_width=\"150dp\"\n        android:layout_height=\"100dp\"\n        android:elevation=\"4dp\"\n        app:shape_arc_cropDirection=\"outside\"\n        app:shape_arc_height=\"20dp\"\n        app:shape_arc_position=\"bottom\"\n        \u003e\n\n         \u003c!-- YOUR CONTENT --\u003e\n\n\u003c/io.github.florent37.shapeofview.shapes.ArcView\u003e\n```\n\n\n## Diagonal\n\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/diagonal.png)](https://www.github.com/florent37/ShapeOfView)\n\n\n```xml\n\u003cio.github.florent37.shapeofview.shapes.DiagonalView\n        android:layout_width=\"150dp\"\n        android:layout_height=\"100dp\"\n        android:elevation=\"4dp\"\n        app:shape_diagonal_angle=\"10\"\n        app:shape_diagonal_direction=\"right\" \n        app:shape_diagonal_position=\"bottom\"\u003e\n\n         \u003c!-- YOUR CONTENT --\u003e\n\n\u003c/io.github.florent37.shapeofview.shapes.DiagonalView\u003e\n```\n\n## Triangle\n\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/triangle.png)](https://www.github.com/florent37/ShapeOfView)\n\n```xml\n\u003cio.github.florent37.shapeofview.shapes.TriangleView\n         android:layout_width=\"150dp\"\n         android:layout_height=\"150dp\"\n         android:elevation=\"4dp\"\n\n         app:shape_triangle_percentBottom=\"0.5\"\n         app:shape_triangle_percentLeft=\"0\"\n         app:shape_triangle_percentRight=\"0\"\u003e\n\n            \u003c!-- YOUR CONTENT --\u003e\n\n\u003c/io.github.florent37.shapeofview.shapes.TriangleView\u003e\n```\n\n## Bubble\n\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/bubble.png)](https://www.github.com/florent37/ShapeOfView)\n\n```xml\n\u003cio.github.florent37.shapeofview.shapes.BubbleView\n        android:layout_width=\"150dp\"\n        android:layout_height=\"150dp\"\n        app:shape_bubble_arrowHeight=\"10dp\"\n        app:shape_bubble_arrowWidth=\"10dp\"\n        app:shape_bubble_arrowPosition=\"bottom\"\n        app:shape_bubble_borderRadius=\"20dp\"\n        app:arrow_posititon_percent=\"0.5\"\n        \u003e\n\n         \u003c!-- YOUR CONTENT --\u003e\n\n\u003c/io.github.florent37.shapeofview.shapes.BubbleView\u003e\n```\n\n## Star\n\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/star_5_pointed.png)](https://www.github.com/florent37/ShapeOfView)\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/star_11_pointed.png)](https://www.github.com/florent37/ShapeOfView)\n\n```xml\n\u003cio.github.florent37.shapeofview.shapes.StarView\n        android:layout_width=\"150dp\"\n        android:layout_height=\"150dp\"\n        app:shape_star_noOfPoints=\"5\"\u003e\n\n         \u003c!-- YOUR CONTENT --\u003e\n\n\u003c/io.github.florent37.shapeofview.shapes.StarView\u003e\n```\n\n## Polygon\n\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/polygon.png)](https://www.github.com/florent37/ShapeOfView)\n\n```xml\n \u003cio.github.florent37.shapeofview.shapes.PolygonView\n            android:layout_width=\"150dp\"\n            android:layout_height=\"100dp\"\n            app:shape_polygon_noOfSides=\"9\"\n            \u003e\n         \u003c!-- YOUR CONTENT --\u003e\n\n\u003c/io.github.florent37.shapeofview.shapes.PolygonView\u003e\n```\n\n## Dotted Edges with Cut Corners\n\n[![screen](medias/edges_corners.png)](https://www.github.com/florent37/ShapeOfView)\n\n```xml\n \u003cio.github.florent37.shapeofview.shapes.DottedEdgesCutCornerView\n             android:layout_width=\"100dp\"\n             android:layout_height=\"match_parent\"\n             app:shape_dot_radius=\"3dp\"\n             app:shape_dot_spacing=\"2dp\"\n             app:shape_edge_position=\"right|left\"\n             app:shape_dottedEdgesCutCorner_bottomLeftSize=\"8dp\"\n             app:shape_dottedEdgesCutCorner_bottomRightSize=\"8dp\"\n             \u003e\n\n             \u003c!-- YOUR CONTENT --\u003e\n\n \u003c/io.github.florent37.shapeofview.shapes.DottedEdgesCutCornerView\u003e\n```\n\n## Animation\n\nAll shapes methods can be animated\n\nFor example, you can animate a RoundRect corner :\n\n[![anim](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/shapeofview_anim.gif)](https://www.github.com/florent37/ShapeOfView)\n\n```kotlin\nValueAnimator.ofFloat(0f, 200f, 0f).apply {\n     addUpdateListener { animation -\u003e roundRect.bottomLeftRadius = (animation.animatedValue as Float).toInt() }\n     duration = 800\n     repeatCount = ValueAnimator.INFINITE\n     repeatMode = ValueAnimator.REVERSE\n}.start()\n```\n\n# Create you own shape\n\nYou can use custom shape to cut your view\n\n# Using Drawable (no elevation)\n\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/custom.png)](https://www.github.com/florent37/ShapeOfView)\n\n```xml\n\u003cio.github.florent37.shapeofview.ShapeOfView\n        android:layout_width=\"100dp\"\n        android:layout_height=\"100dp\"\n\n        app:shape_clip_drawable=\"@drawable/YOUR_DRAWABLE\"\n        \u003e\n\n    \u003c!-- YOUR CONTENT --\u003e\n\n \u003c/io.github.florent37.shapeofview.ShapeOfView\u003e\n```\n\n# Using Path (with elevation)\n\nThis method generates also a **shadow path** (with Lollipop elevation API 21+)\n\nWrap your view with a `ShapeOfView`\n\n```xml\n\u003cio.github.florent37.shapeofview.ShapeOfView\n        android:id=\"@+id/myShape\"\n        android:layout_width=\"30dp\"\n        android:layout_height=\"15dp\"\n        android:elevation=\"6dp\"\u003e\n\n        \u003c!-- YOUR CONTENT --\u003e\n\n \u003c/io.github.florent37.shapeofview.ShapeOfView\u003e\n```\n\nThen generate a path in your code :\n\n```java\nShapeOfView shapeOfView = findViewById(R.id.myShape)\nshapeOfView.setClipPathCreator(new ClipPathManager.ClipPathCreator() {\n       @Override\n       public Path createClipPath(int width, int height) {\n           final Path path = new Path();\n\n            //eg: triangle\n           path.moveTo(0, 0);\n           path.lineTo(0.5 * width, height);\n           path.lineTo(width, 0);\n           path.close();\n\n           return path;\n       }\n});\n```\n\nIn some case you have to specify `requiresBitmap = true` to enable ShapeOfView to draw the shape inside a bitmap before clipping your view. It will be less efficient but can make your custom shape work.\n\n# Contribute\n\nFeel free to fork this project, and add customs shapes\n\nThen make a `merge-request` after updated the README with a sample of your shape, including a preview\n\n# TODO\n\n# HISTORY\n\n**1.4.5** Removed DiagonalView's Direction : if diagonalAngle \u003e 0 ? DIRECTION_LEFT : DIRECTION_RIGHT\n\n**1.4.5** Removed ArcView's ArcDirection : CROP_OUTSIDE if arcHeight \u003e 0, CROP_INSIDE if arcHeight \u003c 0\n\n**1.4.1** Added Dotted Edge, thanks to @khunzohn\n\n**1.4.0** Support AndroidX\n\n**1.3.2** Backport of 1.3.0 for api 14+\n\n**1.3.0** Fixed rendering on android API 28+\n\n**1.2.0** Removed bitmap usage in a lot of usecases (diagonal, arc, roundrect, circle)\n\n**1.1.0** Disabled setBackground on ShapeOfView\n\n**1.0.9** Added requiresShapeUpdate(), allowing animations to work, look at AnimationActivity\n\n**1.0.8** Used arcTo instead of quads in RoundRect, added border to RoundRect\n\n**1.0.7** Prefixed all attributes by `shape_`\n\n**1.0.6** Updated roundrect implementation\n\n**1.0.5** Enable hardware acceleration after clip view\n\n**1.0.4** Added PolygonView\n\n**1.0.2** Added StarView\n\n**1.0.1** Added BubbleView\n\n# Credits\n\nEd Sheeran, for the name of this project and his awesome songs \u003c3\n\nAuthor: Florent Champigny \n\nBlog : [http://www.tutos-android-france.com/](http://www.tutos-android-france.com/)\n\nFiches Plateau Moto : [https://www.fiches-plateau-moto.fr/](https://www.fiches-plateau-moto.fr/)\n\n\u003ca href=\"https://goo.gl/WXW8Dc\"\u003e\n  \u003cimg alt=\"Android app on Google Play\" src=\"https://developer.android.com/images/brand/en_app_rgb_wo_45.png\" /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://plus.google.com/+florentchampigny\"\u003e\n  \u003cimg alt=\"Follow me on Google+\"\n       src=\"https://raw.githubusercontent.com/florent37/DaVinci/master/mobile/src/main/res/drawable-hdpi/gplus.png\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://twitter.com/florent_champ\"\u003e\n  \u003cimg alt=\"Follow me on Twitter\"\n       src=\"https://raw.githubusercontent.com/florent37/DaVinci/master/mobile/src/main/res/drawable-hdpi/twitter.png\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.linkedin.com/in/florentchampigny\"\u003e\n  \u003cimg alt=\"Follow me on LinkedIn\"\n       src=\"https://raw.githubusercontent.com/florent37/DaVinci/master/mobile/src/main/res/drawable-hdpi/linkedin.png\" /\u003e\n\u003c/a\u003e\n\n\nLicense\n--------\n\n    Copyright 2017 Florent37, Inc.\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n","funding_links":["https://ko-fi.com/FlorentChampigny","https://github.com/sponsors/florent37","https://ko-fi.com/A160LCC'"],"categories":["Java"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflorent37%2FShapeOfView","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflorent37%2FShapeOfView","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflorent37%2FShapeOfView/lists"}