Custom Popup Window Example

Description:
This example shows how you can create and customize a popup window.

Algorithm:

1.) Create a new project by File-> New -> Android Project name it CustomPopupWindowExample.
2.) Write following into your main.xml file:

<!--?xml version="1.0" encoding="utf-8"?-->
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    />

3.) Create and Write following into your popup.xml:

<!--?xml version="1.0" encoding="utf-8"?-->
	android:orientation="vertical"
	android:layout_width="fill_parent" android:layout_height="fill_parent">

	<button>		android:layout_width="wrap_content" android:layout_height="wrap_content"
		android:layout_marginBottom="25px" android:text="Show Popup" />

	<com.example.TransparentPanel
		android:id="@+id/popup_window" android:layout_width="fill_parent"
		android:layout_height="wrap_content" android:orientation="vertical"
		android:layout_gravity="bottom"	android:gravity="left" android:padding="1px" >

					android:orientation="vertical" android:gravity="right"
			android:layout_width="fill_parent" android:layout_height="fill_parent"
			android:background="@drawable/button_bar_gradient">

			</button><button>				android:layout_width="wrap_content" android:layout_height="wrap_content"
				android:layout_alignParentRight="true" android:layout_marginTop="5px"
				android:layout_marginRight="10px" android:paddingLeft="5px"
				android:paddingRight="5px" style="?android:attr/buttonStyleSmall"
				android:textStyle="bold" android:textSize="12px" android:text="  Close  " android:background="@drawable/button_close"/>

							android:orientation="vertical" android:layout_width="fill_parent"
				android:layout_height="1px" android:layout_marginTop="5px"
				android:layout_below="@+id/hide_popup_button" />
		

					android:layout_width="wrap_content" android:layout_height="wrap_content"
			android:textStyle="bold" android:textSize="16px"
			android:layout_marginTop="5px" android:layout_marginLeft="5px" />

					android:layout_width="wrap_content" android:layout_height="wrap_content"
			android:layout_margin="5px" />

	


4.) Create anim folder into your res directory, create popup_hide.xml and write following:

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


5.) Create popup_show.xml into anim folder and write following:

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


6.) Create button_bar_gradient.xml into drawable folder and write following:

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

					android:endColor="#505050"
        	    android:angle="90"/>
    

7.) Create button_close.xml into drawable folder and write following:

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

					android:endColor="#000000"
        	    android:angle="270"/>
    

8.) Create and write following into TransparentPanel.java:

package com.example;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Paint.Style;
import android.util.AttributeSet;
import android.widget.LinearLayout;

public class TransparentPanel extends LinearLayout
{
	private Paint	innerPaint, borderPaint ;

	public TransparentPanel(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}

	public TransparentPanel(Context context) {
		super(context);
		init();
	}

	private void init() {
		innerPaint = new Paint();
		innerPaint.setARGB(225, 0, 0, 0);
		innerPaint.setAntiAlias(true);

		borderPaint = new Paint();
		borderPaint.setARGB(255, 0, 0, 0);
		borderPaint.setAntiAlias(true);
		borderPaint.setStyle(Style.STROKE);
		borderPaint.setStrokeWidth(2);
	}

	public void setInnerPaint(Paint innerPaint) {
		this.innerPaint = innerPaint;
	}

	public void setBorderPaint(Paint borderPaint) {
		this.borderPaint = borderPaint;
	}

    @Override
    protected void dispatchDraw(Canvas canvas) {

    	RectF drawRect = new RectF();
    	drawRect.set(0,0, getMeasuredWidth(), getMeasuredHeight());

    	canvas.drawRoundRect(drawRect, 5, 5, innerPaint);
		canvas.drawRoundRect(drawRect, 5, 5, borderPaint);

		super.dispatchDraw(canvas);
    }
}

9.) Run for output.

Steps:

1.) Create a project named CustomPopupWindowExample and set the information as stated in the image.

Build Target: Android 2.3.3
Application Name: CustomPopupWindowExample
Package Name: com.example
Activity Name: CustomPopupWindowExample
Min SDK Version: 10

2.) Open CustomPopupWindowExample.java file and write following code there:

package com.example;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.TextView;

public class CustomPopupWindowExample extends Activity {

	private Animation animShow, animHide;

	@Override
	public void onCreate(Bundle icicle) {

        super.onCreate(icicle);

        setContentView(R.layout.popup);

        initPopup();
    }

    private void initPopup() {

    	final TransparentPanel popup = (TransparentPanel) findViewById(R.id.popup_window);

    	//  Start out with the popup initially hidden.
    	popup.setVisibility(View.GONE);

    	animShow = AnimationUtils.loadAnimation( this, R.anim.popup_show);
    	animHide = AnimationUtils.loadAnimation( this, R.anim.popup_hide);

    	final Button   showButton = (Button) findViewById(R.id.show_popup_button);
    	final Button   hideButton = (Button) findViewById(R.id.hide_popup_button);
    	showButton.setOnClickListener(new View.OnClickListener() {
			public void onClick(View view) {
				popup.setVisibility(View.VISIBLE);
				popup.startAnimation( animShow );
				showButton.setEnabled(false);
				hideButton.setEnabled(true);
        }});

        hideButton.setOnClickListener(new View.OnClickListener() {
			public void onClick(View view) {
				popup.startAnimation( animHide );
				showButton.setEnabled(true);
				hideButton.setEnabled(false);
				popup.setVisibility(View.GONE);
        }});

    	final TextView locationName = (TextView) findViewById(R.id.location_name);
        final TextView locationDescription = (TextView) findViewById(R.id.location_description);

        locationName.setText("Animated Popup");
        locationDescription.setText("In this example Animated popup is created to explaing custom popupwindow example."
        							+ " Transparent layout and animation is also used to customized the window"
        							+ "All the best....Have a good learning.");
	}
}

3.) Compile and build the project.

Output

About the Author

Leave a Reply 7 comments

NIKHIL RAJ L R - April 29, 2012 Reply

Thanks Alot..!! grt one!! loved edumoble.org

Thanks :)

NIKHIL RAJ L R - April 29, 2012 Reply

Thanks Alot..!! grt one!! loved edumoble.org

Thanks :) :)

Jiya - April 30, 2012 Reply

this code is not working…
In main activity class,TranparentPanel object is creating null pointer exception..

Jiya - April 30, 2012 Reply

this code is not working…
In main activity class,TranparentPanel object is creating null pointer exception

Jim - June 19, 2012 Reply

Man you have done a great job thanks for this awesome example. Keep up the excellent work

ashok - February 1, 2013 Reply

This is not working in Galaxy SIII

Ahmad - June 22, 2013 Reply

Awesome,
Thank you.. It works for me..

Leave a Reply: