How to get smooth circular FrameLayout in Android

Question

I have a menu, each item inside is a Framelayout, which is contain ImageView and TextView inside, the output looks like this screenshot:

RoundedCornerLayout.java is my class which extend FrameLayout to redraw it circular:

public class RoundedCornerLayout extends FrameLayout {



int borderColor;
Paint paint;
private Path path = new Path();

public RoundedCornerLayout(Context context, AttributeSet attrs) {
    super(context, attrs);


    borderColor = android.graphics.Color.rgb(128,0,129);

    paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setColor(borderColor);
    paint.setAntiAlias(true);
    paint.setStrokeWidth(8);
    paint.setStyle(Paint.Style.STROKE);
    paint.setFlags(Paint.ANTI_ALIAS_FLAG);


}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);

    // compute the path
    float halfWidth = w / 2f;
    float halfHeight = h / 2f;
    float centerX = halfWidth;
    float centerY = halfHeight;
    path.reset();

    path.addCircle(centerX, centerY, Math.min(halfWidth, halfHeight), Path.Direction.CW);
    path.close();

}


@Override
protected void dispatchDraw(Canvas canvas) {

    int save = canvas.save();
    canvas.clipPath(path);
    super.dispatchDraw(canvas);
    canvas.drawPath(path, paint);
    canvas.restoreToCount(save);

}

}

Activity code:

<RoundedCornerLayout
        android:id="@+id/viewClicked"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_marginRight="151dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="50dp">

        <ImageView
            android:id="@+id/imgNature"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/pic_nature" />

        <TextView
            android:id="@+id/lblClick"
            android:layout_width="match_parent"
            android:layout_height="39dp"
            android:layout_marginTop="75dp"
            android:background="#CC800081"
            android:text="click"
            android:textAlignment="center"
            android:textColor="#ffffff" />
    </RoundedCornerLayout>

what I got here is rounding the FrameLayout including all controls inside, but my problem is that rounding is not smooth as I expected!

Any idea how to edit the above code to get smooth circular FrameLayout ?

Please note that rounding through android:background="@drawable/circularlayout.xml didn't make the rounding over ImageView and TextView without RoundedCornerLayout.java

try to remove background android:background="@drawable/roundedviewcircle" — Tara, Dec 05 '17 at 07:10
still working, but same result, means rounding still broken and not smooth — Osama Remlawi, Dec 05 '17 at 07:23
broken edges still there, you know the issue something related to the path clipping on canvas, width and height will not make any affect — Osama Remlawi, Dec 05 '17 at 07:38
Check this [answer](https://stackoverflow.com/questions/7608362/how-to-draw-smooth-rounded-path) — elmorabea, Dec 05 '17 at 09:44
unfortunately not working :( i already draw a smooth stroke, but the broken pixels comes from the clipped path not from the paint. this line smoothing the PAINT of stroke: **paint = new Paint(Paint.ANTI_ALIAS_FLAG);** but still can't find away to smoothing the PATH it-self.. — Osama Remlawi, Dec 05 '17 at 10:14

How to get smooth circular FrameLayout in Android

0 Answers0