Star Shape layout designing Android

Hi Friends,

              This post is about to design the Layout like Star Shape. By using this post you can make the look and shape of your layout like star. In which you can add child views. This is the inherited view of Relative Layout, so it will behave like relative layout. The only difference in Relative Layout and StarLayout is the Shape. So follow the instructions below to make it in your project.
Below is the Coordinate implementation of the Layout. See figure.

        

 Method:

private Path Star() {

Path path = new Path();

float midX = getWidth()/2;

float midY = getHeight()/2;

path.moveTo(midX, midY);

path.lineTo(midX+190, midY+300);

path.lineTo(midX, midY+210);

path.lineTo(midX-190, midY+300);

path.lineTo(midX-160, midY+90);

path.lineTo(midX-300, midY-70);

path.lineTo(midX-100 ,midY-110);

path.lineTo(midX, midY-300);

path.lineTo(midX+100, midY-110);

path.lineTo(midX+300, midY-70);

path.lineTo(midX+160, midY+90);

path.lineTo(midX+190, midY+300);

return path;

}

The above method will draw a path like STAR on the Canvas. Now you have to clip this path or crop the area inside the path to make it to behave like Layout shape. So to do this call above method in OnDraw() method of the class like this:

    

Path clipPath = new Path();

clipPath.addPath(Star());

canvas.clipPath(clipPath);

canvas.drawColor(Color.MAGENTA);

super.onDraw(canvas);

By using this code snippet the area inside Star Path will be cropped and your Start shape Layout is ready now. You will get the output like this:

Below is the complete code of the sample application. you can use it to your project. So follow the steps below.


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

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:background="#b4b4b4"

        

        >

    </com.example.octagonlayout.StarLayout>

</RelativeLayout>

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

public StarLayout(Context context) {

super(context);

}

public StarLayout(Context context, AttributeSet attrs) {

super(context, attrs);

}

@SuppressLint("NewApi")

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

super(context, attrs, defStyle);

}

@Override

protected void onDraw(Canvas canvas) {

Path clipPath = new Path();

clipPath.addPath(Star());

canvas.clipPath(clipPath);

canvas.drawColor(Color.MAGENTA);

super.onDraw(canvas);

}

private Path Star() {

Path path = new Path();

float midX = getWidth()/2;

float midY = getHeight()/2;

path.moveTo(midX, midY);

path.lineTo(midX+190, midY+300);

path.lineTo(midX, midY+210);

path.lineTo(midX-190, midY+300);

path.lineTo(midX-160, midY+90);

path.lineTo(midX-300, midY-70);

path.lineTo(midX-100 ,midY-110);

path.lineTo(midX, midY-300);

path.lineTo(midX+100, midY-110);

path.lineTo(midX+300, midY-70);

path.lineTo(midX+160, midY+90);

path.lineTo(midX+190, midY+300);

return path;

}

}

Thanks !!!!!! happy coding !!!