Hexagonal Shape layout designing Android

Hi Friends,

  This post is to design Hexagonal Shape layout which extends the properties of Relative Layout. These types of Layout are very useful in photo editing and photo framing type applications.
The general layout graph is as follows:

* Method to make this layout shape:  following method is making the  hexagonal shape , use it.
           

private Path Hexagon() {

float midx = getWidth() / 2;

float midy = getHeight() / 2;

Path p = new Path();

p.moveTo(midx, midy);

p.lineTo(midx+150, midy + 220);

p.lineTo(midx, midy + 220);

p.lineTo(midx-150, midy + 220);

p.lineTo(midx-300, midy);

p.lineTo(midx-150, midy-220);

p.lineTo(midx+150, midy-220);

p.lineTo(midx+300, midy);

p.lineTo(midx+150, midy + 220);

return p;

}

* Now make a call in OnDraw() method:

     Path clipPath = new Path();

clipPath.addPath(Hexagon());

canvas.clipPath(clipPath);

canvas.drawColor(Color.MAGENTA);

super.onDraw(canvas);

* The output will be like this:

     

                                       Note:  Test on other device is not getting desired output. 


Below is the complete example code : You can simply copy this code to your project and can use or modify according to your needs.


1. MainActivity.java

package com.example.octagonlayout;

import android.app.Activity;

import android.os.Bundle;

public class MainActivity extends Activity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

    }

}

2. activity_main.xml

<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"

    tools:context="com.example.octagonlayout.MainActivity" >

    <com.example.octagonlayout.HexagonLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#b4b4b4"
     
        >
    </com.example.octagonlayout.HexagonLayout>

</RelativeLayout>

3. HexagonLayout.java

package com.example.octagonlayout;

import android.annotation.SuppressLint;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Path;

import android.util.AttributeSet;

import android.widget.RelativeLayout;

public class HexagonLayout extends RelativeLayout {

public HexagonLayout(Context context) {

super(context);

}

public HexagonLayout(Context context, AttributeSet attrs) {

super(context, attrs);

}

@SuppressLint("NewApi")

public HexagonLayout(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

}

@Override

protected void onDraw(Canvas canvas) {

Path clipPath = new Path();

clipPath.addPath(Hexagon());

canvas.clipPath(clipPath);

canvas.drawColor(Color.MAGENTA);

super.onDraw(canvas);

}

private Path Hexagon() {

float midx = getWidth() / 2;

float midy = getHeight() / 2;

Path p = new Path();

p.moveTo(midx, midy);

p.lineTo(midx+150, midy + 220);

p.lineTo(midx, midy + 220);

p.lineTo(midx-150, midy + 220);

p.lineTo(midx-300, midy);

p.lineTo(midx-150, midy-220);

p.lineTo(midx+150, midy-220);

p.lineTo(midx+300, midy);

p.lineTo(midx+150, midy + 220);

return p;

}

}

Thanks !!!!!! enjoy coding ):