Android widget tutorial – Making an Android Widget with button

Android widget tutorial – Making an Android Widget with button

In my previous post I explained how you can make your first android widget with few simple steps. In this post, I will explain how to create a little advanced widget with a single android button, which will open a website link upon clicking it.

Android widget tutorial

To start creating follow this steps :

Step 1 : Creating the project.

Make a new android project with package name : parallelcodes.simplewidget and with name : SimpleWidget. You can always use your own desired package name and application name.

Used : Android Studio

Minimum Required SDK : API 8 – Android Froyo

Target SDK : API 19 – Android Kitkat.

---

Step 2 : Creating widget provider XML file.

2.1 – Make a new folder named xml  in your res resource folder  “res->xml”

2.2 – Create a new xml file in the newly created xml folder with name : mywidgetprovider.xml

“res->xml->mywidgetprovider.xml”

This file will be providing the reference to our widget to our layout file or you can say design file, after creating the mywidgetprovider.xml file, please edit it as following code of lines.

mywidgetprovider.xml:

<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
android:initialLayout="@layout/activity_main"
android:minHeight="146dp"
android:minWidth="146dp"
android:updatePeriodMillis="0" >

</appwidget-provider>

This file defines the xml layout info of our application widget.

---

Step 3 : Creating the layout of our widget.

By default the activity_main.xml layout file will be created in your res->layout folder. If it is not created, please create one and edit it as following :

res->layout->activity_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:alpha="0.7"
 android:background="#fff"
 android:orientation="vertical" >

 <TextView
 android:id="@+id/textView"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerHorizontal="true"
 android:padding="5dp"
 android:text="Hello world!"
 android:textColor="#525252"
 android:textSize="35dp" />

 <Button
 android:id="@+id/btnOpenLink"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_margin="2dp"
 android:text="Google.com" />

</LinearLayout>

The widget will display a simple “Hello world” message upon using it. When you launch widget, a simple Text message will be shown on your home screen. And on clicking on the button, it will open the website google.com

After making the layout, our widget will look like below image :

---

Step 4 : Coding the application.

Under src folder MainActivity class file will be made during the creation of project. If it is not made, make one as src>Packagename>MainActivity.java (your package name) and edit it as following

MainActivity.java :

package parallelcodes.simplewidget;

import android.app.PendingIntent;
import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.widget.RemoteViews;

public class MainActivity extends AppWidgetProvider {

 @Override
 public void onUpdate(Context context, AppWidgetManager appWidgetManager,
 int[] Ids) {
 for (int i = 0; i < Ids.length; i++) {

 Intent intent = new Intent(Intent.ACTION_VIEW);
 intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
 intent.setData(Uri.parse("http://www.google.com"));

 PendingIntent pending = PendingIntent.getActivity(context, 0,
 intent, 0);
 RemoteViews views = new RemoteViews(context.getPackageName(),
 R.layout.activity_main);

 views.setOnClickPendingIntent(R.id.btnOpenLink, pending);
 appWidgetManager.updateAppWidget(Ids[i], views);
 }
 }

}

---

Step 5 : Editing the Manifest file.

Now open Android manifest file and edit it as following :

AndroidManifest.xml :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="parallelcodes.simplewidget"
android:versionCode="1"
android:versionName="1.0" >

<uses-sdk
android:minSdkVersion="14"
android:targetSdkVersion="14" />

<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<receiver android:name=".MainActivity">

<intent-filter>
<action android:name="android.appwidget.action.APPWIDGET_UPDATE"></action>
</intent-filter>

<meta-data android:name="android.appwidget.provider"
android:resource="@xml/mywidgetprovider"></meta-data>

</receiver>
</application>

</manifest>

Now we can run our application. Let’s see a demo video of the application we just created :