Two rectangles showing up on top and bottom of CircleView

[MostafaAryan]

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>

[kcochibili]

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.

[MostafaAryan]

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.