It’s known that many of the android apps that have installed on the phone contain widgets. The most common examples are the Calendar and the Clock widget. So what are these Widgets? Widgets are just a mini-app that lives on the home screen and apart from small launcher icons that normally appear on the home screen. Widgets do take up more space and display up to date information of the app. Some of them are user resizable too. The most common use case of the widget is to launch the application or some specific activity of it.
A widget is basically a broadcast message that communicates with the app using a receiver so you also have to include it into your Manifest File. This seems to be a lot of work, thanks to Android Studio it can do that all for us. So, just go to Android Studio click on app->New->Widget->AppWidget. Give it a name and you are done with setting up the widget. You can even check it that after installation will be having its own widget with a Simple TextView.
Now, after a brief explanation of what a widget is, lets deep dive into how to create it. There are three steps to set up a widget of your app.
- Step 1: A WidgetProviderClass say, MyWidget, that extends the AppWidgetProvider class.
- Step 2: A WidgetProviderInfo which is an XML that describes the Widget Metadata including information such as min-height and width.
- Step 3: A widget layout file that will describe how your widget looks, but it has limitations from other layout files.
Now let’s come creating our own Custom Widget which requires coding now. Create a MainActivity.xml file in the Layout folder of res directory in the following manner containing a Listview.
- Now create a java file initializing all views and setting up the Listview, also populating it with items.
- Name the Java file as MainActivity.Java.
Now, we have added two items to our list of recipies and each item contains a clicklistener attached that would navigate to DetailsActivity.java with intended information passing through intent. The following is the layout for DetailsActivity.xml containing two textview and a AddWidget Button(ImageView).
- Create an instance of AppWidgetManager object.
- Give it an id,i.e AppWidgetId, to make it unique.
- Use the app->new->vector asset->select a drawable that you want your image to display like we have chosen star vector(R.drawable.addToWidget).
Now, each Recipe contains a Recipe name(String) and a Recipe Steps(String) so for our ease of maintaining we will create a Recipe object.
Three words you must know about a widget:
- RemoteView: Now, previously I mentioned that widget layout is the same as any other layout. So, basically Widget Layout is based on RemoteView because they are treated as a separate app on your homescreen. RemoteView is used to describe a view hierarchy that will be displayed in another process.
- onUpdate() method: The onUpdate() method is called when a new Widget is created and also during each update interval which is set in the Widgetinfo.xml file,i.e generated when you have created Widget for your app under the xml directory.
- AppWidgetManager class: This class consists of all the information about the widgets that are present at home. It also provides access t force updates on all existing widgets.