Draw hexagon shape

Question

Im trying to create a hexagon using vector

This is what I have:

<?xml version="1.0" encoding="utf-8"?>
<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="#c3c3c3"
    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="#fff" android:strokeWidth="4"/>
</vector>

This is the result:

But I want something this:

How can I resolve this?

Answer 1

Alternatively download the .XML Vector Drawable via the Icon Package here:

https://materialdesignicons.com/icon/hexagon

which looks like this:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="24dp"
    android:width="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path android:fillColor="#000" android:pathData="M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5Z" />
</vector>

and has the shape you require. This might be the cleaner solution.

Answer 2

Try this code...

HexagonMaskView.java

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.Region;
import android.util.AttributeSet;
import android.widget.ImageView;

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);
}
}

Layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:background="@android:color/holo_green_dark">

<com.scelus.hexagonmaskimproved.HexagonMaskView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/greencolor"
    android:background="@android:color/holo_green_light"/>

</RelativeLayout>

Hope this will help...!

Answer 3

Set the ImageView rotation=30 and clipChilden=false on parent ViewGroup. Something like this maybe:

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipChildren="false"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="74dp"
        android:layout_height="63dp"
        android:src="@drawable/hexagon"
        android:layout_gravity="center"
        android:rotation="30"/>

</FrameLayout>