CODEWITHSUNDEEP
androidbitmapimageview
Android Develeoper
Android Develeoper

Reputation: 421

Some issue with Hexagon shape of Imageview in Android?

I do many thing for give hexagon shape to ImageView but it's not work. I have some issue that is show in given bellow image.

enter image description here

I try this bellow code for this. Tell me where i m doing mistake?

public class HexagonImageView extends ImageView {

private Path hexagonPath;
private Path hexagonBorderPath;
private float radius;
private Bitmap image;
private int viewWidth;
private int viewHeight;
private Paint paint;
private BitmapShader shader;
private Paint paintBorder;
private int borderWidth = 5;

public HexagonImageView(Context context) {
    super(context);
    setup();
}

public HexagonImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
    setup();
}

public HexagonImageView(Context context, AttributeSet attrs,
        int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    setup();
}

private void setup() {
    paint = new Paint();
    paint.setAntiAlias(true);

    paintBorder = new Paint();
    setBorderColor(Color.WHITE);
    paintBorder.setAntiAlias(true);
    this.setLayerType(LAYER_TYPE_SOFTWARE, paintBorder);
    paintBorder.setShadowLayer(4.0f, 1.0f, 1.0f, Color.BLACK);

    hexagonPath = new Path();
    hexagonBorderPath = new Path();
}

public void setRadius(float r) {
    this.radius = r;
    calculatePath();
}

public void setBorderWidth(int borderWidth) {
    this.borderWidth = borderWidth;
    this.invalidate();
}

public void setBorderColor(int borderColor) {
    if (paintBorder != null)
        paintBorder.setColor(borderColor);

    this.invalidate();
}

private void calculatePath() {

    float triangleHeight = (float) (Math.sqrt(3) * radius / 2);
    float centerX = viewWidth / 2;
    float centerY = viewHeight / 2;

    hexagonBorderPath.moveTo(centerX, centerY + radius - 1);
    hexagonBorderPath
            .lineTo(centerX - triangleHeight, centerY + radius / 2);
    hexagonBorderPath
            .lineTo(centerX - triangleHeight, centerY - radius / 2);
    hexagonBorderPath.lineTo(centerX, centerY - radius);
    hexagonBorderPath
            .lineTo(centerX + triangleHeight, centerY - radius / 2);
    hexagonBorderPath
            .lineTo(centerX + triangleHeight, centerY + radius / 2);
    hexagonBorderPath.moveTo(centerX, centerY + radius);

    float radiusBorder = radius - 5;
    float triangleBorderHeight = (float) (Math.sqrt(3) * radiusBorder / 2);

    hexagonPath.moveTo(centerX, centerY + radiusBorder);
    hexagonPath.lineTo(centerX - triangleBorderHeight, centerY
            + radiusBorder / 2);
    hexagonPath.lineTo(centerX - triangleBorderHeight, centerY
            - radiusBorder / 2);
    hexagonPath.lineTo(centerX, centerY - radiusBorder);
    hexagonPath.lineTo(centerX + triangleBorderHeight, centerY
            - radiusBorder / 2);
    hexagonPath.lineTo(centerX + triangleBorderHeight, centerY
            + radiusBorder / 2);
    hexagonPath.moveTo(centerX, centerY + radiusBorder);

    invalidate();
}

private void loadBitmap() {
    BitmapDrawable bitmapDrawable = (BitmapDrawable) this.getDrawable();

    if (bitmapDrawable != null)
        image = bitmapDrawable.getBitmap();
}

@SuppressLint("DrawAllocation")
@Override
public void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    loadBitmap();

    // init shader
    if (image != null) {

        canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);

        shader = new BitmapShader(Bitmap.createScaledBitmap(image,
                canvas.getWidth(), canvas.getHeight(), false),
                Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        paint.setShader(shader);

        canvas.drawPath(hexagonBorderPath, paintBorder);
        canvas.drawPath(hexagonPath, paint);
    }

}

@Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    int width = measureWidth(widthMeasureSpec);
    int height = measureHeight(heightMeasureSpec, widthMeasureSpec);

    viewWidth = width - (borderWidth * 2);
    viewHeight = height - (borderWidth * 2);

    radius = height / 2 - borderWidth;

    calculatePath();

    setMeasuredDimension(width, height);
}

private int measureWidth(int measureSpec) {
    int result = 0;
    int specMode = MeasureSpec.getMode(measureSpec);
    int specSize = MeasureSpec.getSize(measureSpec);

    if (specMode == MeasureSpec.EXACTLY) {
        result = specSize;
    } else {
        result = viewWidth;
    }

    return result;
}

private int measureHeight(int measureSpecHeight, int measureSpecWidth) {
    int result = 0;
    int specMode = MeasureSpec.getMode(measureSpecHeight);
    int specSize = MeasureSpec.getSize(measureSpecHeight);

    if (specMode == MeasureSpec.EXACTLY) {
        result = specSize;
    } else {
        result = viewHeight;
    }

    return (result + 2);
}

}

And XML file code like this.

<com.android.myproject.HexagonImageView
            android:id="@+id/iv_ProfilePic"
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:src="@drawable/default_profile" />

Upvotes: 1

Views: 297

Answers (2)

user3514956
user3514956

Reputation:

I believe I found the issue. You need to reset your hexagonPath by calling hexagonPath.reset(); in calculatePath() See the snippet below:

    float radiusBorder = radius - 5;
    float triangleBorderHeight = (float) (Math.sqrt(3) * radiusBorder / 2);

    hexagonPath.reset(); // Reset the path

    hexagonPath.moveTo(centerX, centerY + radiusBorder);
    hexagonPath.lineTo(centerX - triangleBorderHeight, centerY
            + radiusBorder / 2);
    hexagonPath.lineTo(centerX - triangleBorderHeight, centerY
            - radiusBorder / 2);
    hexagonPath.lineTo(centerX, centerY - radiusBorder);
    hexagonPath.lineTo(centerX + triangleBorderHeight, centerY
            - radiusBorder / 2);
    hexagonPath.lineTo(centerX + triangleBorderHeight, centerY
            + radiusBorder / 2);
    hexagonPath.moveTo(centerX, centerY + radiusBorder);

    invalidate();
    ....

Upvotes: 2

Adarsh Yadav
Adarsh Yadav

Reputation: 3770

There are two possible ways to do this:-

1- Have a look at this answer :- https://stackoverflow.com/a/22987264/1384010

2- Try this library for avoiding all unnecessary trouble. https://github.com/siyamed/android-shape-imageview

Upvotes: 0

Related Questions