android - how to adjust the borders for hexagon shape to imageview

Question

I want to display hexagon border for imageview i did by using below mentioned class.but i want to adjust the borders for it. I tried but facing same result. please see the code. Even i tried using giving shape in xml layout of drawable folders but in all in vain.

public class HexagonMaskView extends ImageView {

private Path hexagonPath;
private Path hexagonBorderPath;
private Paint mBorderPaint;

public HexagonMaskView(Context context) {
    super(context);
    init();
}

public HexagonMaskView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public HexagonMaskView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    this.hexagonPath = new Path();
    this.hexagonBorderPath = new Path();

    this.mBorderPaint = new Paint();
    this.mBorderPaint.setColor(Color.WHITE);
    this.mBorderPaint.setStrokeCap(Paint.Cap.ROUND);
    this.mBorderPaint.setStrokeWidth(50f);
    this.mBorderPaint.setStyle(Paint.Style.STROKE);
}

public void setRadius(float radius) {
    calculatePath(radius);
}

public void setBorderColor(int color) {
    this.mBorderPaint.setColor(color);
    invalidate();
}

private void calculatePath(float radius) {
    float halfRadius = radius / 2f;
    float triangleHeight = (float) (Math.sqrt(3.0) * halfRadius);
    float centerX = getMeasuredWidth() / 2f;
    float centerY = getMeasuredHeight() / 2f;

    this.hexagonPath.reset();
    this.hexagonPath.moveTo(centerX, centerY + radius);
    this.hexagonPath.lineTo(centerX - triangleHeight, centerY + halfRadius);
    this.hexagonPath.lineTo(centerX - triangleHeight, centerY - halfRadius);
    this.hexagonPath.lineTo(centerX, centerY - radius);
    this.hexagonPath.lineTo(centerX + triangleHeight, centerY - halfRadius);
    this.hexagonPath.lineTo(centerX + triangleHeight, centerY + halfRadius);
    this.hexagonPath.close();

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

    this.hexagonBorderPath.reset();
    this.hexagonBorderPath.moveTo(centerX, centerY + radiusBorder);
    this.hexagonBorderPath.lineTo(centerX - triangleBorderHeight, centerY + halfRadiusBorder);
    this.hexagonBorderPath.lineTo(centerX - triangleBorderHeight, centerY - halfRadiusBorder);
    this.hexagonBorderPath.lineTo(centerX, centerY - radiusBorder);
    this.hexagonBorderPath.lineTo(centerX + triangleBorderHeight, centerY - halfRadiusBorder);
    this.hexagonBorderPath.lineTo(centerX + triangleBorderHeight, centerY + halfRadiusBorder);
    this.hexagonBorderPath.close();
    invalidate();
}

@Override
public void onDraw(Canvas c) {
    c.drawPath(hexagonBorderPath, mBorderPaint);
    c.clipPath(hexagonPath, Region.Op.INTERSECT);
    c.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
    super.onDraw(c);
}

@Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int width = MeasureSpec.getSize(widthMeasureSpec);
    int height = MeasureSpec.getSize(heightMeasureSpec);
    setMeasuredDimension(width, height);
    calculatePath(Math.min(width / 2f, height / 2f) - 10f);
}

}

but what i am getting is

i want to display as below screen.

标签： androidimageview

Answer 1

Check this

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/gradient"
>

<ImageView
    android:id="@+id/imageView3"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:rotation="90"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="50dp"
    app:srcCompat="@drawable/hexagon" />

</RelativeLayout>

Modified approach from this Answer

<vector android:height="24dp" android:viewportHeight="628.0"
android:viewportWidth="726.0" android:width="27dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FFFFA3B3"
    android:pathData="m723,314c-60,103.9 -120,207.8 -180,311.8 -120,0 -240,0 -360,0C123,521.8 63,417.9 3,314 63,210.1 123,106.2 183,2.2c120,0 240,0 360,0C603,106.2 663,210.1 723,314Z"
    android:strokeColor="#FFA3B3" android:strokeWidth="4"/>

Make sure add this line vectorDrawables.useSupportLibrary = true in gradle file..

Output

EDITED

 <md.com.androidui.HexagonMaskView
    android:id="@+id/imageView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="50dp"
    android:layout_centerHorizontal="true"
    android:src="@drawable/photo_"
    android:background="@android:color/transparent"/>

Changes in HexagonMaskView

  @Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int width = MeasureSpec.getSize(widthMeasureSpec);
    int height = MeasureSpec.getSize(heightMeasureSpec);
    setMeasuredDimension(400, 450); //Change size according to your needs here or in xml
    calculatePath(Math.min(width / 2f, height / 2f) - 10f);
}

OR

 <md.com.androidui.HexagonMaskView
    android:id="@+id/imageView3"
    android:layout_width="150dp"
    android:layout_height="170dp"
    android:layout_marginTop="50dp"
    android:layout_centerHorizontal="true"
    android:src="@drawable/photo_"
    android:background="@android:color/transparent"/>

OUTPUT