unknown os platform
Android tutorial: draw hexagon drawable on canvas programmatically | Whats-online.info

Android tutorial: draw hexagon drawable on canvas programmatically

2016/12/24 / Science and Tutorials

Learn how to draw an hexagon drawable on canvas in android programmatically with an image background. See an example.

draw hexagon drawable shape on canvas in android programmatically


Hope you are fine, and I'm also fine. You can subscribe to our newsletter to receive updates direct to your mailbox.

Today I am sharing an article for drawing a drawable hexagon on canvas in android programmatically. 
In geometry, a hexagon is a six sided polygon or 6-gon.

I know most of you are eager to know how to draw the most complicated shapes in android programmatically.  Don't mind; I will try my level best to share articles for drawing all types of shapes.
Please comment which type of shape you would like I share the code with you.

For this post, I will show how to draw a six-sided polygon
This code is available at the end of this tutorial.

Demo illustration

 We will draw our hexagon shape from a bitmap image. That is, create hexagon imageview and draw it on canvas. 
First, let's create the project to draw our hexagon and then create two classes for our project and an XML file with an ImageView to set our final bitmap image result.


XML file

MainActivity.java Entire Code

package com.whatsonline.androiddrawhexagonal; import android.os.Bundle; import android.app.Activity; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.widget.ImageView; public class MainActivity extends Activity {     private ImageView img;     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         img=(ImageView) findViewById(R.id.img);         Bitmap icon = BitmapFactory.decodeResource(getResources(), R.drawable.img);         new Shape(icon,img);     } }

This classes launches the application and instantiates our Shape class. We will pass two values to our Shape class that is, drawable image as a bitmap image and the ImageView to set our final hexagon bitmap image as shown below.

Shape.java. Entire Code

package com.whatsonline.androiddrawhexagonal;        import android.graphics.Bitmap;         import android.graphics.Canvas;         import android.graphics.Color;         import android.graphics.Paint;         import android.graphics.Path;         import android.graphics.Point;         import android.graphics.PorterDuff;         import android.graphics.PorterDuffXfermode;         import android.graphics.Rect;         import android.widget.ImageView; public class Shape {     private Bitmap bmp;     private ImageView img;     public Shape(Bitmap bmp, ImageView img) {         this.bmp=bmp;         this.img=img;         onDraw();     }     private void onDraw(){         if (bmp.getWidth() == 0 || bmp.getHeight() == 0) {             return;         }         int w = bmp.getWidth(), h = bmp.getHeight();         Bitmap roundBitmap = getHexagonalCroppedBitmap(bmp, w);         img.setImageBitmap(roundBitmap);     }     public static Bitmap getHexagonalCroppedBitmap(Bitmap bitmap, int radius) {         Bitmap finalBitmap;         if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)             finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,                     false);         else             finalBitmap = bitmap;         Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),                 finalBitmap.getHeight(), Bitmap.Config.ARGB_8888);         Canvas canvas = new Canvas(output);         Paint paint = new Paint();         final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),                 finalBitmap.getHeight());         Point point1_draw = new Point(75, 0);         Point point2_draw = new Point(0, 50);         Point point3_draw = new Point(0, 100);         Point point4_draw = new Point(75, 150);         Point point5_draw = new Point(150, 100);         Point point6_draw = new Point(150, 50);         Path path = new Path();         path.moveTo(point1_draw.x, point1_draw.y);         path.lineTo(point2_draw.x, point2_draw.y);         path.lineTo(point3_draw.x, point3_draw.y);         path.lineTo(point4_draw.x, point4_draw.y);         path.lineTo(point5_draw.x, point5_draw.y);         path.lineTo(point6_draw.x, point6_draw.y);         path.close();         canvas.drawARGB(0, 0, 0, 0);         paint.setColor(Color.parseColor("#BAB399"));         canvas.drawPath(path, paint);         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));         canvas.drawBitmap(finalBitmap, rect, rect, paint);         return output;     } }

Our Shape class draws the hexagon shape.  It has two functions.

1.getHexagonalCroppedBitmap(param one,param two)
2. onDraw()

getHexagonalCroppedBitmap(param one, param two)  - creates a hexagon image and draws it on canvas. It returns a bitmap data type. 

onDraw() - calls the function for drawing the hexagon shape. Sets the returned final image to the ImageView 

activity_main.XML entire code.
Contains the imageVIew widget to set our final image result as shown below.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:paddingLeft="@dimen/activity_horizontal_margin"     android:paddingRight="@dimen/activity_horizontal_margin"     android:paddingTop="@dimen/activity_vertical_margin"     android:paddingBottom="@dimen/activity_vertical_margin"      tools:context=".MainActivity">     <ImageView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:id="@+id/img"         /> </RelativeLayout>

Thank you for your time. Subscribe to our newsletter to receive the latest updates direct to your mailbox.

You may also like:

Leave a comment

Subscribe to get replies direct to your mailbox

Submit comment