Welcome back ! So in this post you will get the source code + extension for Circular Image View for every builder like Android Builder, Kodular, Niotron, App Inventor . Yes, you read it right ! The use of this extension will help you create a functionality of a circular image view with just few steps. So lets start.
This extension is totally free and its Open-Source too ! Read the post to get to know more.
The builder I am using in this tutorial is Kodular.
So there are 2 different ways to create a circular image view:-
- Using Card View (Old Fashioned)
- Using Circular Image View Extension
1. Using Card View
So our first way to create Circular Image View is to create it with Card View. So now drag and drop a Card View and add the following params:-
- Add width and height of arrangement in that manner so that it seems like a perfect square . To easily make it like a square add width and height in pixels. In my case, I will add 100 px width and 100px height.
- Remove all paddings.
- After that the most important thing is to add corner radius so that it looks like a circle.
- Now drag an image view into the card view and change the image to your desired image. Don’t forget to make width and height match parent and enable scale picture to fit.
2. Using Circular Image View Extension
So our second way to create a circular image view is with Circular Image View Extension . So now drag and drop arrangement and circular image view extension.
- You can specify any width and height to the arrangement, in my case I am setting width to fill parent and height to automatic.
- Now coming to the blocks section. We will use Show block to create Circular Image View. Add the arrangement where you want image view to “in” section and put correct name of your image in “image” section. Make sure that the uppercase and lower case matters in image name.
- You can also add border color in image view.
Why use Circular Image View Extension?
Circular Image View extension is preferable because in the old fashioned way there are a lot of hassles to specify width and height and changing the corner radius to perfect shape so that it is seen as a circle but in Circular Image View you can easily create Circular Image View with just 2 blocks and you can change width and height without worrying to change corner radius. Also you can add border to it like a perfect circle.
Get The Extension and Source Code
Now, how you can get the extension and the source code? Its easy because the source code is available on Github . So, you just need to click the below button to get the source code.
Hope you liked this post . See you again in next post.. Take Care 🙂