Custom Popup Window Development In Android

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

                <RelativeLayoutxmlns: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"/>

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