Tuesday, March 25, 2014

Popup Window with dynamic content

This example show how to update content of popup window using Java code at run-time, instead of hard-coded in XML. The TextView (textOut) of Popup Window will be set according to another EditText (textIn) on main layout, before the Popup Window shown.

Popup Window with dynamic content
Popup Window with dynamic content

MainActivity.java
package com.example.androidpopupwindow;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.PopupWindow;
import android.widget.Spinner;
import android.widget.TextView;
import android.app.Activity;

public class MainActivity extends Activity {
 
 String[] DayOfWeek = {"Sunday", "Monday", "Tuesday", 
   "Wednesday", "Thursday", "Friday", "Saturday"};

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  final EditText textIn = (EditText)findViewById(R.id.textin);

  final Button btnOpenPopup = (Button) findViewById(R.id.openpopup);
  btnOpenPopup.setOnClickListener(new Button.OnClickListener() {

   @Override
   public void onClick(View arg0) {
    LayoutInflater layoutInflater = 
      (LayoutInflater)getBaseContext()
      .getSystemService(LAYOUT_INFLATER_SERVICE);
    View popupView = layoutInflater.inflate(R.layout.popup, null);
    final PopupWindow popupWindow = new PopupWindow(
      popupView, LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    
    //Update TextView in PopupWindow dynamically
    TextView textOut = (TextView)popupView.findViewById(R.id.textout);
    String stringOut = textIn.getText().toString();
    if(!stringOut.equals("")){
     textOut.setText(stringOut);
    }
    
    Button btnDismiss = (Button)popupView.findViewById(R.id.dismiss);
    
    Spinner popupSpinner = (Spinner)popupView.findViewById(R.id.popupspinner);
    
    ArrayAdapter<String> adapter = 
      new ArrayAdapter<String>(MainActivity.this, 
        android.R.layout.simple_spinner_item, DayOfWeek);
    adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
    popupSpinner.setAdapter(adapter);
    
    btnDismiss.setOnClickListener(new Button.OnClickListener(){

     @Override
     public void onClick(View v) {
      popupWindow.dismiss();
     }});
    
    popupWindow.showAsDropDown(btnOpenPopup, 50, -30);
    
    
   }

  });
 }

}

/res/layout/activity_main.xml, main layout.
<LinearLayout 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:orientation="vertical"
    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=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold"
        android:layout_gravity="center_horizontal"
        android:autoLink="web" />
    
    <EditText
        android:id="@+id/textin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/openpopup"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Open Popup Window" />
    
    <ImageView 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/ic_launcher" />

</LinearLayout>

/res/layout/popup.xml, layout of the Popup Window.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/customborder"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="1dp"
        android:orientation="vertical" >
        
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/textout"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="It is a PopupWindow" />

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />

            <Spinner
                android:id="@+id/popupspinner"
                android:spinnerMode="dialog"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" />

            <Button
                android:id="@+id/dismiss"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Dismiss" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

/res/drawable/customborder.xml, define the custom border of the Popup Window.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
  <corners
      android:topLeftRadius="0dp"
      android:topRightRadius="30dp"
      android:bottomRightRadius="30dp"
      android:bottomLeftRadius="30dp" />
  <stroke
      android:width="3dp"
      android:color="@android:color/background_dark" />
  <solid 
      android:color="#40300030"/>
</shape>



download filesDownload the files.

4 comments:

Unknown said...

Really good tutorial.
Thanks a lot .. :D

Unknown said...

Hi. I have a button that when clicked, will show me "score" of a quiz. But it keeps crashing. Can you please help me with that?

public void checkResult(View view){
LayoutInflater layoutInflater = (LayoutInflater)getBaseContext().getSystemService(LAYOUT_INFLATER_SERVICE);
View popupView = layoutInflater.inflate(R.layout.layout_result_popup, null);
final PopupWindow popupWindow = new PopupWindow(popupView, LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

TextView scorePopup = (TextView)findViewById(R.id.score_popup);
scorePopup.setText("Your score: " + score + "/" + totalQuestionsCount);

Button btnDismiss = (Button)popupView.findViewById(R.id.dismiss);
btnDismiss.setOnClickListener(new Button.OnClickListener(){

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
popupWindow.dismiss();
}});

popupWindow.showAsDropDown(checkResultButton, 100, -1200);
popupWindow.setFocusable(true);
popupWindow.update();
}

Travis Edrington said...

How do I dismiss the popup from method in the main_activity?

Erik said...

hello Travis Edrington,

When you new a PopupWindow, you get the objeect PopupWindow. With this, you can direct call its dismiss() method.

read: Auto dismiss popupWindow with AsyncTask