What are you going to achieve in this widget tutorial?

You will make a counter application that will count the number of clicks. You will set up a basic application that shows the number of clicks in an activity and the clicks will keep on increasing whenever you tap on the application’s widget. In this process you will learn how to create a basic widget, how to communicate data with the widget and how to handle widget resizing.

You can find the complete code for tis tutorial on this GitHub repo.

Layout Setup

Basic Layout Setup

First of all we will set up our main activity and its layout. This activity will have nothing to do with the widget at all.

As you can see you have a basic layout with 2 TextView’s.

Here is the code for MainActivity.

In this you will extract the number of clicks which will be stored in SharedPreferences.

Widget Layout

Now you will set up layout for the widget you want to create. Thanks to Android Studio, it does this for you automatically.

Right click on res -> New -> Widget -> App Widget.

widget

Once you click on it, a window will open. Provide a name for your widget (We give it MyAppWidget).

widget

Now Android Studio will create 3 files for you.

  • MyAppWidget.java – The java file that contains the implementation of AppWidget, any widget logic will go here.
  • my_app_widget.xml – A regular layout xml file (but with limited functionality) for your widget.
  • my_app_widget_info.xml – This is an xml file that contains various properties for your widget such as refresh time, preview image, minimum height and widget.

This is the default code in MyAppWidget.java class. You will be provided with 3 functions by default. Go ahead and remove all the code from updateAppWidget function. Now you code will look something like this.

Here is the default code from my_app_widget.xml layout file.

Replace the original layout with the below layout (all we are doing is making the TextView simple).

It will look something like this.

widget

Now take a look at my_app_widget_info.xml.

Think of this file as a meta-data for your widget. Here are some of the properties explained.

  • minHeight & mingWidth – Minimum height and widget for your widget, when the user places your widget on the home screen it can’t be resized to dimensions smaller than this.
  • previewImage – This is the preview image seen by the user when browsing in the app drawer.
  • resizeMode – Whether the user can resize widget vertically and horizontally.
  • updatePeriodMillis – The time interval between widget is updated by calling the onUpdate function. This cannot be less than 30 mins, so lets make it 30 mins in our application.

Change the updatePeriodMillis to be 30 mins.

Now if you look in your phone widget app drawer you will see this widget show up and you can place it anywhere you want. Right now when you tap on it, it doesn’t do anything.

widget

Never miss a post from TheTechnoCafe


Adding Interaction

Now you will set up the widget to open up the MainActivity. It is not your general OnClickListener that will work here. Since the widget is not the part your actual app, per say, it takes a different set up for adding listeners.

First you will have to create something called a RemoteView which will give us access to add interaction to the widget. RemoteView is a special kind of view, its named appropriately. ‘Remote’ means something situated far from the main point, here it means some view situated away from the application. Since widget is independent from the ‘actual’ application it uses RemoteView.

As stated above listener with RemoteView’s are not the same as normal View’s. First you create the Pending Intent to launch the Activity. Then create the a new RemoteView for the widget layout and using the setOnClickPendingIntent method on it register the intent for the TextView (so whenever the user clicks the TextView this Intent will be fired). Finally update the widget by calling updateAppWidget on AppWidgetManager. Now if you click on the widget MainActivity will launch.

Incrementing Count

You are not here to just launch an Activity. You are here to increment the counter!

Create an IntentService named ClickIntentService.

What is happening in this Service is basically whenever it is started it increments the count in SharedPreference. Now let’s make the TextView start this service rather than MainActivity.

You changed the PendingIntent from getActivity to getService. You can also see the way to update text in RemoteView is different. If you run this app you will notice that the number of clicks increase but they don’t reflect immediately in the widget itself. You can verify this by opening the application and seeing the number of clicks.

Let’s fix this, every time you increment the counter in IntentService, you need to notify the widget to update the data as well.

You will get the instance of AppWidgetManager, get all the widget id’s of MyAppWidget and call the updateAppWidget function on it.

Run the application and see the magic.

Handling Resizing

So the user can at anytime resize the widget and you want to adapt the layout according widget’s available width. Well this is not too hard to do, all you have to do is get the current width of the widget and take action accordingly. To get a demonstration you won’t be doing anything fancy. What you will do is whenever the width becomes less than 200, you will append an ‘s’ after the widget text and append an ‘L’ whenever it is larger than that width.

You also have to override a function named onAppWidgetOptionsChanged which is called when the widget is resized.

widgetwidget

You can find the complete code for tis tutorial on this GitHub repo.

How to make two pane layout in Android.

Guide to Notifications in Android.

Make a moving Gradient Background in Android.

Getting started with Retrofit in Android.


Gurleen Sethi

How can I tell you about myself in just a few lines, to get to know me you can reach out to me, email, text, call, or any other method of communication you like. I am always there for you!

Leave a Reply

Your email address will not be published. Required fields are marked *

19 + 1 =