[FREE] Shapeable View Extension - An Extension for converting layout to different shapes

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

  1. Circle
  2. Round Rectangle
  3. Polygon
  4. Cut Corner
  5. Star
  6. Diagonal
  7. Bubble
  8. Triangle
  9. 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

image

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.

image

These are click listener event. Raises when the shape view Clicked or Long Clicked with id param.

component_method(6)

This is the main block that convert your given layout to the given shape with a unique id.

component_method(7)

This block set the background color of the shape view with given id.

component_method(8)

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.

component_method(9)

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.

component_method(10)

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.

component_method(11)

This block is only for setting the edges or points of the Star View Shape for given id.

component_method(12)

This block is only for setting the cut size of the Corner Cut Shape View. All parameters must be Integer except id.

component_method(13)

This block set the stroke color of the Shape View. This is only applicable to the Rectangle and Circle shape.

component_method(14)

This bock set the corner radius of the rectangle shape view. Only applicable to Rectangle Shape.

component_method(15)

This block is only for setting the traingle corners position. Parameters accepts float value. You can visit to the library for more info.

component_method(16)

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.

component_method(17)

This block set the sides of the polygon shape view. Default is 9.

component_method(18)

This block set the stroke width of the shape view. This is only applicable to the rectangle and circle shape view.

component_method(19)

This block returns the stroke color of the shape view referenced to given id.

component_method(20)

This block returns the stroke width of the shape view referenced to the given id.

component_method(21)

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

component_method(22)

This block returns the background color of the shape view referenced to its id.

component_method(23)

This block returns the corner radius of the bubble shape view referenced to the given id.

component_method(24)

This block returns the arrow width of the bubble shape view with referenced to given id.

component_method(25)

This block returns the position of the arrow of the bubble shape referenced to give id.

component_method(27)

This block returns the direction of the arrow of the bubble shape view referenced to given id. i.e, Top

component_method(32)

This block returns the height of the arrow of the bubble shape view referenced to given id.

component_method(28)

This block returns the diagonal angle of the Diagonal Shape View referenced to its id.

component_method(29)

This block returns the position or direction of the diagonal shape view referenced to given id.

component_method(30)

This block returns the no of points of star shape view referenced to given id,

component_method(31)

This block returns the left percent of the triangle shape view referenced to given id.

component_method(33)

This block returns the bottom percent of the Triangle shape view referenced to given id.

component_method(34)

This block returns the right percent of the Triangle shape view referenced to given id.

component_method(35)

This block returns the arc position of the Arc Shape View referenced to the given id.

component_method(36)

This block returns the arc height of the Arc Shape View referenced to the given id.

component_method(37)

This block returns the no of sides of the polygon shape view referenced to the given id.

component_method(42)

This block returns the shape of the view referenced to the given id. for ex, Circle View,Rectangle View.

image

These blocks returns the cut size of the Corner Cut Shape View referenced to given id.

component_method(43)

This block returns the list of all ids that you have used for creating th shape views.

image

These are 9 available shapes property blocks in the extension

image

These are 4 available direction for showing the arrow and diagonal to any position.

image

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

blocks(10)

Rectangle View

blocks(11)

Animating Radius

1626003715815

blocks(13)

Bubble View

blocks(14)

Arc View

blocks(15)

Polygon View

blocks(16)

Cut Corner View

blocks(20)

Diagonal View

blocks(19)

Triangle View

blocks(18)

Star View

blocks(17) +

Downloads

Click to download Extension

Donate

Credit

Thanks @Shreyash for the super powerfull Rush.

Worked very hard for this long extension so like the extension if you like it :+1:

Suggestion and issue are welcome

53 Likes

What will happen to the child views?

1 Like

Nice Extension :star_struck: :star_struck: :star_struck:

2 Likes

What do you exactly mean?
Child views are adjusted according to the size and shape

1 Like

Oh fine then.

1 Like

excellent plugin :heart_eyes:

2 Likes

Nice job​:+1::+1::+1:

3 Likes

Awesome work and extension

2 Likes

This will remove many images from my app:)
I can reduce my app size by almost 10MB!!

2 Likes

May God bless you man… You have given as such a fantastic contribution to the kodular community… This is really awesome. Fabulous…

Keep going man.

:clap::clap::clap::clap::clap::clap::clap:

2 Likes

@Sumit1334 I think it is the most epic extension of all your extensions :star_struck:

2 Likes

Kodular :upside_down_face: :wink:

1 Like

Adjust man. So far we all adjust to see the forum na , the same like. :stuck_out_tongue_winking_eye:

1 Like

Makeroid + Kodular = Modular :sweat_smile:

Nice extension @Sumit1334 I guess u were the person waiting the most for forum to be live again

2 Likes

Epic + Difficult + Biggest
I was keeping this one Open Source but I haven’t due to a reason.

Yos yos 🥲

3 Likes

image

What emoji you used ?
:thinking:

a very helpful extension, Great work @Sumit1334

2 Likes

Great work. Your contribution is soo much helpful

1 Like

In next update if you add custom radius(users desired value) for circle view it will be more exciting. Now it is giving us fixed value

1 Like

This extension really is quite something, bless you friend!

3 Likes