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

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 ):

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