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.

Look at this solution https://stackoverflow.com/a/37297103/4824088 and change fillcolor & strokecolor according to your need. — Mohamed Mohaideen AH, Aug 29 '18 at 09:05
@MohamedMohaideenAH i tried through .xml but image is overlapping with borders i want to fit the image in the hexagon border — santosh, Aug 29 '18 at 09:09

Mohamed Mohaideen AH · Accepted Answer · 2018-08-29T12:43:07.633

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

when am trying to set the image from drawable but its showing the image in rectangle shape. — santosh, Aug 29 '18 at 09:50
yes i tried @Mohamed and also if i give rotation = "90" degrees when i displayed image from src eventhough its showing other direction with rectangle shape. Can you once try to display image from src and show it. — santosh, Aug 29 '18 at 09:57
Even with `src` attribute or `background` attribute my output are same. Can you add screenshot of your layout preview.. — Mohamed Mohaideen AH, Aug 29 '18 at 10:00
@santosh i thought you need a hexagon layer around image so you can get it by `HexagonMaskView ` class what you have tried. Just increase height than width will fix for you.. See my edited answer. — Mohamed Mohaideen AH, Aug 29 '18 at 12:37

score 0 · Answer 2 · answered Aug 29 '18 at 10:12

Hi Please find the below code of xml.

<ImageView
        android:layout_marginTop="@dimen/_30sdp"
        android:id="@+id/logo"
        android:rotation="90"
        android:src="@drawable/alex"
        android:background="@drawable/hexagon"
        android:layout_gravity="center"
        android:layout_width="@dimen/_50sdp"
        android:layout_height="@dimen/_50sdp" />

this is the what am getting.

Actual_Image

how to adjust the borders for hexagon shape to imageview

2 Answers2