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

 

Get Result from Activity Using ActivityResult() Method.

Hi all,

    In this post I am going to explain the way of getting result from any activity. For this we will make an activity , then we will get the result data from there. For example if we want to get Image from the system Gallery, In this case The Gallery view(Result Activity) is built in. But here I am going to make my own to get text data.

Please follow the code below.

1. MainActivity.java Class.

 package com.example.activityresult;

import android.app.Activity;

import android.content.Intent;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.TextView;

import android.widget.Toast;

public class MainActivity extends Activity {

int REQUEST_CODE=1;

Button btn;

TextView txt;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

btn=(Button)findViewById(R.id.button1);

txt=(TextView)findViewById(R.id.textView1);

btn.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View arg0) {

// TODO Auto-generated method stub

Intent in= new Intent(MainActivity.this,ResultActivity.class);

startActivityForResult(in, REQUEST_CODE);

}

});

}

@Override

protected void onActivityResult(int requestCode, int resultCode, Intent data) {

// TODO Auto-generated method stub

super.onActivityResult(requestCode, resultCode, data);

if (resultCode==RESULT_OK && requestCode ==REQUEST_CODE) {

txt.setText(data.getStringExtra("name"));

}

else {

Toast.makeText(getApplicationContext(), "Problem in Loading Result.", 786).show();

}

}

}

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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.activityresult.MainActivity" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="142dp"
        android:text="Button" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="131dp"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

3. ResultActivity.java Class.

package com.example.activityresult;

import android.app.Activity;

import android.content.Intent;

import android.os.Bundle;

import android.view.View;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.ArrayAdapter;

import android.widget.ListView;

import android.widget.Toast;

public class ResultActivity extends Activity{

String[] arr= {"Sunday","Monday","Tuesday","Wednusday","Thursday","Friday","Saturday"};

ListView list;

ArrayAdapter<String> adapter;

@Override

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

setContentView(R.layout.result_activity);

list=(ListView)findViewById(R.id.listView1);

adapter=new ArrayAdapter<String>(getApplicationContext(), android.R.layout.simple_list_item_1,arr);

list.setAdapter(adapter);

list.setOnItemClickListener(new OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,

long arg3) {

// TODO Auto-generated method stub

//Intent in= new Intent(ResultActivity.this, MainActivity.class);

Intent in= new Intent();

String name =adapter.getItem(arg2);

//Toast.makeText(getApplicationContext(), "name ="+name, 345).show();

in.putExtra("name",name);

setResult(RESULT_OK, in);

finish();

}

});

}

}

4. activity_activity.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:gravity="center"

    android:orientation="vertical" >

    <ListView

        android:id="@+id/listView1"

        android:layout_margin="20dp"

        android:background="#000000"

        android:layout_width="match_parent"

        android:layout_height="wrap_content" >

    </ListView>

</LinearLayout>

5. manifest.xml

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.example.activityresult"

    android:versionCode="1"

    android:versionName="1.0" >

    <uses-sdk

        android:minSdkVersion="8"

        android:targetSdkVersion="21" />

    <application

        android:allowBackup="true"

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@style/AppTheme" >

        <activity

            android:name=".MainActivity"

            android:label="@string/app_name" >

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

        

         <activity

            android:name=".ResultActivity"

            android:label="@string/app_name" >

            

        </activity>

    </application>

</manifest>

That's all, Hope this will help you.
Thanks.