https://github.com/joetomkinson/xama.jtports.shapedview
Port of ShapeOfView to Xamarin.Android
https://github.com/joetomkinson/xama.jtports.shapedview
android-views androidx animation custom-shape custom-views roundrect shapeofview xamarin xamarin-android
Last synced: 3 months ago
JSON representation
Port of ShapeOfView to Xamarin.Android
- Host: GitHub
- URL: https://github.com/joetomkinson/xama.jtports.shapedview
- Owner: JoeTomkinson
- License: apache-2.0
- Created: 2020-04-12T14:28:13.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-04-27T13:35:31.000Z (about 5 years ago)
- Last Synced: 2025-01-15T04:30:35.173Z (4 months ago)
- Topics: android-views, androidx, animation, custom-shape, custom-views, roundrect, shapeofview, xamarin, xamarin-android
- Language: C#
- Homepage:
- Size: 4.4 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Xamarin.Android ShapedView
[](https://www.xamarin.com/)
[](https://android-arsenal.com/api?level=11)
[](https://opensource.org/licenses/Apache-2.0)
[](https://www.nuget.org/packages/Xama.JTPorts.ShapedView/1.0.1#)
### Namespace: Xama.JTPorts.ShapedView
Port of [ShapeOfView](https://github.com/florent37/ShapeOfView) originally created by [Florent37](https://github.com/florent37)
> Give a custom shape to any android view. Useful for Material Design 2
#### Migrated to use the newer AndroidX Support Libraries
This solution only references AndroidX support libraries, and as such you may need to add this [Nuget Package](https://www.nuget.org/packages/Xamarin.AndroidX.Migration/1.0.4?_src=template) called [Xamarin.AndroidX.Migration](https://github.com/xamarin/XamarinAndroidXMigration) into your Xamarin.Android Solution until you have migrated across fully to AndroidX.
[CREATE SOME SAMPLE GIFS]
# Download
Nuget Package: [link](https://www.nuget.org/packages/Xama.JTPorts.ShapedView/1.0.1#)
# Use implemented shapes
ViewShape **disable** the `background` property of your view,
please specify a child with a background to enable it
```xml
```
## RoundRect
[](LINK)
```xml
```
## ClipCorner
[](LINK)
```xml
```
## Arc
[](LINK)
```xml
```
## Diagonal
[](LINK)
```xml
```
## Triangle
[](LINK)
```xml
```
## Bubble
[](LINK)
```xml
```
## Star
[](LINK)
```xml
```
## Polygon
[](LINK)
```xml
```
## Dotted Edges with Cut Corners
[](LINK)
```xml
```
## Animation
All shapes methods can be animated
For example, you can animate a RoundRect corner:
[](LINK)
```kotlin
ValueAnimator.ofFloat(0f, 200f, 0f).apply {
addUpdateListener { animation -> roundRect.bottomLeftRadius = (animation.animatedValue as Float).toInt() }
duration = 800
repeatCount = ValueAnimator.INFINITE
repeatMode = ValueAnimator.REVERSE
}.start()
```
# Create you own shape
You can use custom shape to cut your view
# Using Drawable (no elevation)
[](LINK)
```xml
```
# Using Path (with elevation)
This method generates also a **shadow path** (with Lollipop elevation API 21+)
Wrap your view with a `ViewShape`
```xml
```
Then generate a path in your code :
```java
ViewShape ViewShape = findViewById(R.id.myShape)
ViewShape.setClipPathCreator(new ClipPathManager.ClipPathCreator() {
@Override
public Path createClipPath(int width, int height) {
final Path path = new Path();
//eg: triangle
path.moveTo(0, 0);
path.lineTo(0.5 * width, height);
path.lineTo(width, 0);
path.close();
return path;
}
});
```
In some case you have to specify `requiresBitmap = true` to enable ViewShape to draw the shape inside a bitmap before clipping your view. It will be less efficient but can make your custom shape work.
# Contribute
Feel free to fork this project, and add customs shapes just as you would do for the original version.
Please then make a `merge-request` after updated the README with a sample of your shape, including a preview
# Current ToDo
- [ ] Tidy up / Finish this readme.
- [x] Finish port of shapes.
- [x] Create Nuget Package.
- [x] See if we can't Csharp it's implementation a bit more.
# Version History
**1.0.3** - Had to add in old NuGet spec configs for icon and license URL. - Skipped other releases as they were all very much broken.
**1.0.2** - Corrected implementation of clip path creators. fixed breaking bugs.
**1.0.1** - Added/Amended missing nugetspec configurations.
**1.0.0** - First port of ShapeOfView version **1.4.5**
# Credits
Author of ShapeOfView: [Florent Champigny](https://github.com/florent37) - This was ported from his initial Java library.
# Support 💎
If you want to support the work that I do and you find any of these libraries useful? Consider supporting it by joining [**stargazers**](https://github.com/DigitalSa1nt/Xama.JTPorts.ShapedView/stargazers) for this repository. :telescope: :stars:
or alternatively if you want to you can also buy me a coffee.
-----
_You know, only if you want to._