Hi,
Two rectangles are showing up on top and bottom of my CircleView.
Screenshot is from an Android API 20 Genymotion device.
```
<com.github.florent37.shapeofview.shapes.CircleView
android:id="@+id/circle_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toStartOf="@+id/switch_view"
app:layout_constraintTop_toTopOf="@+id/switch_view"
app:layout_constraintBottom_toBottomOf="@+id/switch_view">
<ir.uneed.app.app.components.widgets.MyTextView
android:id="@+id/badge_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
tools:text="20"
android:textSize="11dp"
android:textColor="@color/text_white"
android:background="@color/background_blue"/>
</com.github.florent37.shapeofview.shapes.CircleView>
```
I have the same issue, but before I share my solution I need to mention that this does not happen in all devices.
I am testing with a Samsung Galaxy s8 : issue occurs
and a Samsung Galaxy Tab s6: issue does not occur
The issue is caused by the inability of this library to properly handle dynamic dimensions assigned to the view. (just like you are using `wrap_content` in your case)
The circle view works correctly only when the height and width are the same. So to fix this, I run a code at runtime that makes the length of the longest side of the CircleVIew match the length of the shortest side.
Doing that fixes the issue. here is my code..
```
public void fixCircleViewDimension(CircleView cv){
cv.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
cv.getViewTreeObserver().removeOnGlobalLayoutListener(this);
int width = cv.getWidth();
int height = cv.getHeight();
if(width > height){
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(height, height);
params.gravity = Gravity.CENTER;
cv.setLayoutParams(params);
}else{
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(width, width);
params.gravity = Gravity.CENTER;
cv.setLayoutParams(params);
}
}
});
}
```
side note: replace the FrameLayaout with whatever the Parent of your CircleView is.
> I have the same issue, but before I share my solution I need to mention that this does not happen in all devices.
> I am testing with a Samsung Galaxy s8 : issue occurs
> and a Samsung Galaxy Tab s6: issue does not occur
>
> The issue is caused by the inability of this library to properly handle dynamic dimensions assigned to the view. (just like you are using `wrap_content` in your case)
> The circle view works correctly only when the height and width are the same. So to fix this, I run a code at runtime that makes the length of the longest side of the CircleVIew match the length of the shortest side.
>
> Doing that fixes the issue. here is my code..
>
> ```
> public void fixCircleViewDimension(CircleView cv){
> cv.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
>
> @Override
> public void onGlobalLayout() {
> cv.getViewTreeObserver().removeOnGlobalLayoutListener(this);
>
> int width = cv.getWidth();
> int height = cv.getHeight();
>
> if(width > height){
> FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(height, height);
> params.gravity = Gravity.CENTER;
> cv.setLayoutParams(params);
>
> }else{
> FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(width, width);
> params.gravity = Gravity.CENTER;
> cv.setLayoutParams(params);
> }
>
> }
> });
>
>
> }
> ```
>
> side note: replace the FrameLayaout with whatever the Parent of your CircleView is.
Thanks for your response.