Shapeable View
Hi everyone, I hope you are all good. This extension helps you to convert your layout or arrangement in to different types of shapes. There are total 8 shapes available in the extension. This extension is fully based on some modification of Shape Of View library that is Open Source on github.
The 8 types of shapes that are available in this extension
- Circle
- Round Rectangle
- Polygon
- Cut Corner
- Star
- Diagonal
- Bubble
- Triangle
- Arc
Let see blocks of the extension and their documentation
All Blocks
There are total 4 event block , 37 method blocks and 17 properties.
Documentation
These are the event for animation. This will raises when you animation starts and ends. They only invoked when you uses Animate Corner Radius
block. These events returns all the parameters that are used in Animate Corner Radius
block for animating the radius property.
These are click listener event. Raises when the shape view Clicked or Long Clicked with id param.
This is the main block that convert your given layout to the given shape with a unique id.
This block set the background color of the shape view with given id.
This block helps you to animate the setting the corner radius property. You need to give the id of shape view (This property is only applicable to the Round Rectangle View). radius
parameter accept the type of radius that you want to set for ex. Top Left
,Top Right
,Bottom Left
,Bottom Right
. You need to use the property block for this . duration
param accept the duration for the animation and from
or to
param, you have to give the radius for the animation, it is same as like the value animator and smooth text. You can visit the preview or the library on github for more understanding. And, repeatCount
param accept the the integer so the animation will be repeated to given value. Animation End
event will raises when the animation will be stopped or the animation will be occurred to the given repeatCount
. If repeatReverse
set to true then the animation will be reversed for ex, if you set the radius from 0 to 10 then when animation will set the radius to 10 then it will be reversed and set the animation to 0 from 10 and if not then it will restart the animation.
This block is only for setting the Diagonal shape view properties. diagonalAngle
defines the angle of the diagonal. This can be negative value for setting the angle’s direction downward and if set to positive then the angle’s direction will upward. And diagonalPosition
accepts the direction as String for ex, Top
,Bottom
,Left
,Right
.
This block is only for setting the Arc Shape View properties. height
accept the integer as value. If the value is negative then the arc direction will be inside the layout or if value is positive then it will be outside the layout. And arcPosition
accepts the direction as String for ex, Top
,Bottom
,Left
,Right
.
This block is only for setting the edges or points of the Star View Shape for given id.
This block is only for setting the cut size of the Corner Cut Shape View. All parameters must be Integer except id.
This block set the stroke color of the Shape View. This is only applicable to the Rectangle
and Circle
shape.
This bock set the corner radius of the rectangle shape view. Only applicable to Rectangle Shape.
This block is only for setting the traingle corners position. Parameters accepts float value. You can visit to the library for more info.
This block is only for setting the bubble shape view properties. arrowHeight
and arrowWidth
defines the size of the arrow. arrowDirection
accept the direction property. arrowPosition
accepts a float value between 0.0 to 1.0. for ex, if arrow position is set to 0.5 then arrow will be shown on the center of the side. corner Radius
param accept the integer value for setting the corner radius of bubble shape view.
This block set the sides of the polygon shape view. Default is 9.
This block set the stroke width of the shape view. This is only applicable to the rectangle and circle shape view.
This block returns the stroke color of the shape view referenced to given id.
This block returns the stroke width of the shape view referenced to the given id.
This block returns the corner radius of the shape view referenced to its id. radius
param accepts the radius type that you want to get. i.e Top Left
…
This block returns the background color of the shape view referenced to its id.
This block returns the corner radius of the bubble shape view referenced to the given id.
This block returns the arrow width of the bubble shape view with referenced to given id.
This block returns the position of the arrow of the bubble shape referenced to give id.
This block returns the direction of the arrow of the bubble shape view referenced to given id. i.e, Top
…
This block returns the height of the arrow of the bubble shape view referenced to given id.
This block returns the diagonal angle of the Diagonal Shape View referenced to its id.
This block returns the position or direction of the diagonal shape view referenced to given id.
This block returns the no of points of star shape view referenced to given id,
This block returns the left percent of the triangle shape view referenced to given id.
This block returns the bottom percent of the Triangle shape view referenced to given id.
This block returns the right percent of the Triangle shape view referenced to given id.
This block returns the arc position of the Arc Shape View referenced to the given id.
This block returns the arc height of the Arc Shape View referenced to the given id.
This block returns the no of sides of the polygon shape view referenced to the given id.
This block returns the shape of the view referenced to the given id. for ex, Circle View
,Rectangle View
.
These blocks returns the cut size of the Corner Cut Shape View referenced to given id.
This block returns the list of all ids that you have used for creating th shape views.
These are 9 available shapes property blocks in the extension
These are 4 available direction for showing the arrow and diagonal to any position.
These are the property blocks for getting the specific type of radius and animating the radius of view.
Now the documentation ends. I hope you understand the documentation.
Lets see the usage and preview now.
Usage and Preview
Circle View
Rectangle View
Animating Radius
Bubble View
Arc View
Polygon View
Cut Corner View
Diagonal View
Triangle View
Star View
+
Downloads
Donate
Credit
Thanks @Shreyash for the super powerfull Rush.
Worked very hard for this long extension so like the extension if you like it
Suggestion and issue are welcome