Design Octagon Shape Layout Android

Hi Friends,

        Today I am going to explain some very important topics, which are very helpful in Android application development. In android the default shape of any layout is Rectangular. But if we need the layout in the shape other than rectangle , then for that purpose we have to design our own custom layout. So here I am designing a Layout with Octagonal shape which extends Relative Layout properties.

            First of all to design a layout we should know the shapes drawing on the graph. According to the coordinates of graph, we can design layout.  See fig.

Now we have to make this shape in java class like this:

private Path Octagon(){

Path p = new Path();

float midX = getWidth()/2;     // get center of X

float midY = getHeight()/2;    // get center of Y

p.moveTo(midX, midY);

p.lineTo(midX+300, midY+120);

p.lineTo(midX+120, midY+300);

p.lineTo(midX-120, midY+300);

p.lineTo(midX-300, midY+120);

p.lineTo(midX-300, midY-120);

p.lineTo(midX-120, midY-300);

p.lineTo(midX+120, midY-300);

p.lineTo(midX+300, midY-120);

p.lineTo(midX+300, midY+120);

return p;

}

Then  call this above method in OnDraw() method:

Path clipPath = new Path();

clipPath.addPath(Octagon());

canvas.clipPath(clipPath);

canvas.drawColor(Color.MAGENTA);

super.onDraw(canvas);


Output:

Below is the Complete code of the sample.


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.OctagonLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

          android:background="#b4b4b4"

     

      >

        <ImageView

            android:id="@+id/imageView1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_centerHorizontal="true"

            android:layout_centerVertical="true"

            android:src="@drawable/ic_launcher" />

    </com.example.octagonlayout.OctagonLayout>

</RelativeLayout>

3. OctagonLayout.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 OctagonLayout extends RelativeLayout {

public OctagonLayout(Context context) {

super(context);

}

public OctagonLayout(Context context, AttributeSet attrs) {

super(context, attrs);

}

@SuppressLint("NewApi")

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

super(context, attrs, defStyle);

}

@Override

protected void onDraw(Canvas canvas) {

Path clipPath = new Path();

clipPath.addPath(Octagon());

canvas.clipPath(clipPath);

canvas.drawColor(Color.MAGENTA);

super.onDraw(canvas);

}

private Path Octagon(){

Path p = new Path();

float midX = getWidth()/2;

float midY = getHeight()/2;

p.moveTo(midX, midY);

p.lineTo(midX+300, midY+120);

p.lineTo(midX+120, midY+300);

p.lineTo(midX-120, midY+300);

p.lineTo(midX-300, midY+120);

p.lineTo(midX-300, midY-120);

p.lineTo(midX-120, midY-300);

p.lineTo(midX+120, midY-300);

p.lineTo(midX+300, midY-120);

p.lineTo(midX+300, midY+120);

return p;

}

}



Note: Text sample with different device resolution if not getting desired result or modify coordinates according to your needs.

May this code help you. Thanks!!!!!!