In your application you might need to create a Circle image with a text inside it or just a simple circle that needs different colors for status for example. In this case we can use a Frame and add CornerRadius property like this:
<Frame WidthRequest="30" HeightRequest="30" CornerRadius="15" HasShadow="false" BackgroundColor="Red" Padding="0"/>
As you can see, there are more properties added like HasShadow or Padding, but let’s explain all of them:
WidthRequest and HeightRequest
These 2 properties are mandatory and MUST have the same size in order to be able to draw a circle.
CornerRadius will make our frame rounded, but in order to be a perfect circle it has to be half of the width and request, in our example half of 30 which is 15.
This property has be set to false because Frame has a big shadow by default, which must certainly you won’t need it.
Well, this was my nightmare. When I first tried to implement this idea of rounded Frame, I thought that only the CornerRadius will suffice, but that was not the case. My circle looked like a rounded rectangle like in the image below:
And the problem was, obviously, the Padding! A Frame has a default padding of 20, so it had to be removed by setting it to 0. And then the circle came out 😀
So this is it. Very simple, no renderers, not anything special. Also if you want to add a text inside the circle you can add a Label inside Frame like this:
<Frame WidthRequest="30" HeightRequest="30" CornerRadius="15" HasShadow="false" BackgroundColor="Red" Padding="0"> <Label Text="45" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center"/> </Frame>
Now, if you want to create a custom view, called CircleView, or whatever you like, I will post an example of how to do this too. It is very useful if need to add circles in different pages of your app. Stay tuned. 😉
Search In Blog
Want to donate?
Recent Posts: My Android Solutions
If you ever wondered how to read and parse a simple JSON file stored in the assets directory of your Android project, here is a way to do it.
In this tutorial I will create a simple Sectioned RecyclerView that will show 2 sections and a few items in each section and how to move an item from one section to another. Note: For RecyclerView I used AndroidX imports and not android.support.v7.widget.RecyclerView! Setup We need to import the recycler view from AndroidX. The build.gradle…
Recently, I had to add a perfect square CardView and I wanted to achieve this without hardcoding its width and height. I happily discovered the power of ConstraintLayout and this is how I managed to create a perfect square which should work on every dimension. In my project I created a RecyclerView with 2 columns,…