Tutorial details

Modal dialog (popup) from Android widget example | App Code for Sale | Preview

Modal dialog (popup) from Android widget example | Android Tutorial

How to open a modal popup (or dialog) from an Android home screen widget

Overview PAGE TOP

In this tutorial you will learn how to open a modal popup (or dialog) from an Android home screen widget.

1. Introduction PAGE TOP

Android widgets only contain a subset of the available UI components and functionality when compared to Android activities. This means that if we have a requirement that needs something a bit more sophisticated than the functionality provided by widgets, we may need to implement some workarounds in order to achieve our goal. In this tutorial we will see how we can launch a modal popup dialog from an Android widget.

Used software:

  1. Android SDK 21.0.0

2. A simple widget PAGE TOP

In this tutorial we will use a widget that consists in a simple button. When the user presses the button the application will show a modal popup containing some random text and a dismiss button. The button widget will look similar to the following image:

qwe.jpg

Note: This tutorial will not focus on how to create an Android widget. It will only focus in showing a modal popup fired by the widget itself.

We declare out widget in AndroidManifest.xml:

01  <receiver
02    android:name=".BytesLoungeWidget"
03    android:icon="@drawable/ic_launcher"
04    android:label="Bytes Lounge Widget" >
05      <intent-filter>
06        <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
07        <action android:name="com.byteslounge.android.widgetshowdialog" />
08      </intent-filter>
09  
10      <meta-data
11        android:name="android.appwidget.provider"
12        android:resource="@xml/widget" />
13  </receiver>

Note that we are registering our widget to listen for com.byteslounge.android.widgetshowdialog intent. This intent will be fired when we press the Show modal popup dialog button.

Following next is our simple widget implementation:

Widget implementation

01  package com.byteslounge.android;
02  
03  import android.app.PendingIntent;
04  import android.appwidget.AppWidgetManager;
05  import android.appwidget.AppWidgetProvider;
06  import android.content.ComponentName;
07  import android.content.Context;
08  import android.content.Intent;
09  import android.widget.RemoteViews;
10  
11  public class BytesLoungeWidget extends AppWidgetProvider {
12  
13    private static final String SHOW_DIALOG_ACTION =
14       "com.byteslounge.android.widgetshowdialog";
15  
16    @Override
17    public void onUpdate(Context context,
18        AppWidgetManager appWidgetManager,
19        int[] appWidgetIds) {
20  
21      prepareWidget(context);
22  
23      super.onUpdate(context, appWidgetManager, appWidgetIds);
24  
25    }
26  
27    @Override
28    public void onReceive(final Context context, Intent intent) {
29      // If the intent is the one that signals
30      // to launch the modal popup activity
31      // we launch the activity
32      if(intent.getAction().equals(SHOW_DIALOG_ACTION)) {
33  
34        Intent i = new Intent(context, WidgetDialogActivity.class);
35        i.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
36        context.startActivity(i);
37  
38      }
39  
40      super.onReceive(context, intent);
41  
42    }
43  
44    private void prepareWidget(Context context) {
45  
46      AppWidgetManager appWidgetManager =
47        AppWidgetManager.getInstance(context);
48  
49      ComponentName thisWidget =
50        new ComponentName(context, BytesLoungeWidget.class);
51  
52      // Fetch all instances of our widget
53      // from the AppWidgetManager manager.
54      // The user may have added multiple
55      // instances of the same widget to the
56      // home screen
57      int[] allWidgetIds = appWidgetManager.getAppWidgetIds(thisWidget);
58      for (int widgetId : allWidgetIds) {
59  
60        RemoteViews remoteViews = new RemoteViews(context.getPackageName(),
61            R.layout.widget_layout);
62  
63        // Create intent that launches the
64        // modal popup activity
65        Intent intent = new Intent(context, BytesLoungeWidget.class);
66        intent.setAction(SHOW_DIALOG_ACTION);
67  
68        PendingIntent pendingIntent = PendingIntent.getBroadcast(
69            context, 0, intent, PendingIntent.FLAG_UPDATE_CURRENT);
70  
71        // Attach the onclick listener to
72        // the widget button
73        remoteViews.setOnClickPendingIntent(R.id.w_show_btn,
74            pendingIntent);
75  
76        appWidgetManager.updateAppWidget(widgetId, remoteViews);
77  
78      }
79    }
80  
81  }

We should note a couple of things in the widget implementation:

The first one is that we are registering the widget button onclick event to launch a specific intent – com.byteslounge.android.widgetshowdialog.

The second one is that we are handling this intent in the widget itself – inside onReceive method. This method will handle the intent and will launch a completely separate activity that will contain the modal popup. The widget is configured to handle this specific intent as we defined in AndroidManifest.xml.

3. The modal popup activity PAGE TOP

We have seen in the previous section that we can launch a separate activity when the user clicks the widget Show button. Now we need to define an activity which look and feel looks like a modal popup. We go back to AndroidManifest.xml and define a new activity:

1   <activity
2     android:name="com.byteslounge.android.WidgetDialogActivity"
3     android:noHistory="true"
4     android:theme="@android:style/Theme.Dialog" />

We defined our activity to use the Theme.Dialog theme. This will configure our modal popup dialog activity to look like a native Android dialog.

Now we define the activity content in a separate file, lets say /res/layout/widgetdialog_activity.xml:

01  <?xml version="1.0" encoding="utf-8"?>
02  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
03    xmlns:tools="http://schemas.android.com/tools"
04    android:layout_width="220dp"
05    android:layout_height="wrap_content"
06    android:background="@drawable/modalbckg"
07    android:gravity="center_horizontal"
08    android:orientation="vertical" >
09  
10    <TextView
11      android:id="@+id/w_dialog_txt"
12      android:layout_width="fill_parent"
13      android:layout_height="wrap_content"
14      android:layout_marginLeft="0dp"
15      android:layout_marginRight="0dp"
16      android:layout_marginTop="5dp"
17      android:layout_marginBottom="10dp"
18      android:gravity="center_horizontal"
19      android:textColor="#000000"
20      android:textSize="13sp" />
21  
22    <Button
23      android:id="@+id/w_dismiss_btn"
24      android:layout_width="wrap_content"
25      android:layout_height="wrap_content"
26      android:text="Dismiss" />
27  
28  </LinearLayout>

The activity consists in a layout that holds the modal dialog text and dismiss button. We are also defining the background of the modal popup as @drawable/modalbckg. In this drawable you configure the look and feel of the modal popup itself. In this tutorial we defined the popup with rounded corners and white background:

modalbckg.xml

01  <?xml version="1.0" encoding="UTF-8"?>
02  <shape xmlns:android="http://schemas.android.com/apk/res/android"
03    android:shape="rectangle">
04    <gradient android:startColor="#FFFFFF" android:endColor="#FFFFFF"
05      android:angle="90"/>
06  
07    <corners android:bottomRightRadius="2dp" android:bottomLeftRadius="2dp"
08      android:topLeftRadius="2dp" android:topRightRadius="2dp"/>
09  
10    <stroke  android:width="1dp" android:color="#888888"/>
11  
12  </shape>

This file should be placed in /res/drawable/modalbckg.xml

Following next is the activity implementation:

Modal dialog activity

01  package com.byteslounge.android;
02  
03  import android.app.Activity;
04  import android.os.Bundle;
05  import android.view.View;
06  import android.view.Window;
07  import android.view.View.OnClickListener;
08  import android.widget.Button;
09  import android.widget.TextView;
10  
11  public class WidgetDialogActivity extends Activity {
12  
13    @Override
14    public void onCreate(Bundle savedInstanceState) {
15      super.onCreate(savedInstanceState);
16      requestWindowFeature(Window.FEATURE_NO_TITLE);
17      setContentView(R.layout.widgetdialog_activity);
18  
19      String dialogText = "This is the dialog text";
20      TextView txt = (TextView) findViewById(R.id.w_dialog_txt);
21      txt.setText(dialogText);
22  
23      Button dismissbutton = (Button) findViewById(R.id.w_dismiss_btn);
24      dismissbutton.setOnClickListener(new OnClickListener() {
25        @Override
26        public void onClick(View v) {
27          WidgetDialogActivity.this.finish();
28        }
29      });
30    }
31  }

We basically set the modal dialog text and configure the activity dismiss button to finish the activity itself when pressed.

Now when we press the Show button our modal popup activity will be launched and will look like the following:

body.JPG

Reference PAGE TOP

http://www.javacodegeeks.com/2013/05/modal-dialog-popup-from-android-widget-example.html

0 Comments Leave a comment

Please login in order to leave a comment.

Newest first
!

Sign-in to your Chupamobile Account.

The Easiest way to Launch your next App or Game.

Join Chupamobile and get instant access to thousands of ready made App and Game Templates.

Creating an account means you’re okay with Chupamobile’s Terms of Service and Privacy Policy.