Custom Popup Window Example

2

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"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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"
    />
</LinearLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" 
	android:layout_width="fill_parent" android:layout_height="fill_parent">

	<Button android:id="@+id/show_popup_button" android:layout_gravity="bottom"
		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" >

		<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
			android:orientation="vertical" android:gravity="right"
			android:layout_width="fill_parent" android:layout_height="fill_parent"
			android:background="@drawable/button_bar_gradient">

			<Button android:id="@+id/hide_popup_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"/>

			<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
				android:orientation="vertical" android:layout_width="fill_parent"
				android:layout_height="1px" android:layout_marginTop="5px"
				android:layout_below="@+id/hide_popup_button" />
		</RelativeLayout>

		<TextView android:id="@+id/location_name"
			android:layout_width="wrap_content" android:layout_height="wrap_content"
			android:textStyle="bold" android:textSize="16px" 
			android:layout_marginTop="5px" android:layout_marginLeft="5px" />

		<TextView android:id="@+id/location_description"
			android:layout_width="wrap_content" android:layout_height="wrap_content"
			android:layout_margin="5px" />

	</com.example.TransparentPanel>

</FrameLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<translate android:fromYDelta="0" android:toYDelta="100%p" android:duration="750"/>
</set>

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

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<translate android:fromYDelta="100%p" android:toYDelta="0" android:duration="750"/>
</set>

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

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
	<gradient 	android:startColor="#C0C0C0" 
				android:endColor="#505050"
        	    android:angle="90"/>   
    <corners android:radius="2px" />
</shape>

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

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
	<gradient 	android:startColor="#C0C0C0" 
				android:endColor="#000000"
        	    android:angle="270"/>   
    <corners android:radius="2px" />
</shape>

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

Did you enjoy this article?
Share
the
Love
Get Free Updates
  • NIKHIL RAJ L R

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

    Thanks :) :)

  • Jiya

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

Proudly designed by Theme Junkie.