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:
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>
<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">
<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" />
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: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">
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"/>
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>
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" />
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" />
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>
<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>
<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>
<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>
<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;
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();
}
{
private Paint innerPaint, borderPaint ;
public TransparentPanel(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
innerPaint = new Paint();
innerPaint.setARGB(225, 0, 0, 0);
innerPaint.setAntiAlias(true);
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;
}
borderPaint.setARGB(255, 0, 0, 0);
borderPaint.setAntiAlias(true);
borderPaint.setStyle(Style.STROKE);
borderPaint.setStrokeWidth(2);
}
public void setInnerPaint(Paint innerPaint) {
this.innerPaint = innerPaint;
}
@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);
}
}
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
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;
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);
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);
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);
}});
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.");
}
}
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
No comments:
Post a Comment