Answers to How to create hexagon listview in android ( 2 )

  1. 2017-01-02 10:01

    Hey use Vector image for that:-

    <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="#00ffffff"
        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="#000000"
        android:strokeWidth="4" />
    

    Hope this help.Happy coding.

  2. 2017-01-02 10:01

    You can use this hexagonal imageview in child layout and adjust margins

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

    in xml

      <YourpakageName.HexagonMaskView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/bear"
        android:background="@android:color/holo_green_light"/>
    

    hope this helps

Leave a reply to - How to create hexagon listview in android

◀ Go back