title: ImageView clipped to Polygon
body: <p>I want to create an <code>ImageView</code> that clips its content to inside a polygon (in this case a hexagon). I'm setting the view's layer type to software so I can use <code>canvas.clipPath()</code>:</p>
  
  <pre><code>if (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.HONEYCOMB) {
      setLayerType (LAYER_TYPE_SOFTWARE, null);
  }
  </code></pre>
  
  <p>The code that generates the hexagon seems to work fine:</p>
  
  <p><img src="https://i.stack.imgur.com/0Ac2c.png" alt="Without clipping"></p>
  
  <p>Here's the code that calculates the vertices:</p>
  
  <pre><code>@Override public void calculateVertices () {
      width = 2f * radius;
      side = 1.5f * radius;
      height = (float) Math.sqrt (3f) * radius;
  
      vertices = new Point[6];
  
      int minX = Integer.MAX_VALUE;
      int minY = Integer.MAX_VALUE;
      int maxX = Integer.MIN_VALUE;
      int maxY = Integer.MIN_VALUE;
  
      final float[] p0 = new float[] {center.x - radius, center.y};
  
      final Matrix m = new Matrix ();
      final float r = getRotation ();
  
      for (int i = 0; i &lt; vertices.length; i++) {
          final float ptRot = rotateBy (r, (float) i * 60f);
          final float[] point = new float[2];
  
          if (ptRot != 0f) {
              m.reset ();
              m.postRotate (ptRot, center.x, center.y);
              m.mapPoints (point, p0);
          } else {
              point[0] = p0[0];
              point[1] = p0[1];
          }
  
          if (point[0] &lt; minX) {
              minX = Math.round (point[0]);
          } else if (point[0] &gt; maxX) {
              maxX = Math.round (point[0]);
          }
  
          if (point[1] &lt; minY) {
              minY = Math.round (point[1]);
          } else if (point[1] &gt; maxY) {
              maxY = Math.round (point[1]);
          }
  
          vertices[i] = fromFloat (point);
      }
  
      path.reset ();
      clipPath.reset ();
  
      path.moveTo (vertices[0].x, vertices[0].y);
      clipPath.moveTo (vertices[0].x, vertices[0].y);
  
      for (int i = 1; i &lt; vertices.length; i++) {
          path.lineTo (vertices[i].x, vertices[i].y);
          clipPath.lineTo (vertices[i].x, vertices[i].y);
      }
  
      path.lineTo (vertices[0].x, vertices[0].y);
      clipPath.lineTo (vertices[0].x, vertices[0].y);
      path.close ();
      clipPath.close ();
      enclosure.set (minX, minY, maxX, maxY);
  }
  </code></pre>
  
  <p>As you can see above, the same method generates the bounding rectangle as well as the path that defines the polygon and the clipping path of the polygon.</p>
  
  <p>In the constructor of this view, <code>path</code> and <code>clipPath</code> are defined as such</p>
  
  <pre><code>path = new Path ();
  clipPath = new Path ();
  clipPath.setFillType (Path.FillType.INVERSE_EVEN_ODD);
  </code></pre>
  
  <p>The <code>onDraw</code> method of the view is overridden as such:</p>
  
  <pre><code>@Override protected void onDraw (final Canvas canvas) {
      final int count = canvas.save ();
      canvas.clipPath (hexagon.getClipPath ());
      super.onDraw (canvas);
      hexagon.draw (canvas, selectBackgroundPaint ());
      canvas.restoreToCount (count);
  }
  </code></pre>
  
  <p>As soon as I enable the line with <code>canvas.clipPath (hexagon.getClipPath ());</code> The view displays as such:</p>
  
  <p><img src="https://i.stack.imgur.com/W3zia.png" alt="Clipping enabled"></p>
  
  <p>2 of the 4 clipping points aren't even on my path!!</p>
  
  <p>What am I doing wrong here? Is there a better way of doing this? </p>
  
  <p>Ultimately I want everything outside of the polygon to be only transparent. Always. Including the selection highlighting.</p>
  
  <p>I appreciate the help. I can't publish too much of the code (Company IP, etc), but if you need more details let me know and I will update.</p>