Android - Widgets Tutorial

2021-12-07 13:59 Android开发

A widget is a small gadget or control of your android application placed on the home screen. Widgets can be very handy as they allow you to put your favourite applications on your home screen in order to quickly access them. You have probably seen some common widgets, such as music widget, weather widget, clock widget e.t.c Widgets could be of many types such as information widgets, collection widgets, control widgets and hybrid widgets. Android provides us a complete framework to develop our own widgets. <h2 >Widget - XML file</h2> In order to create an application widget , first thing you need is AppWidgetProviderInfo object, which you will define in a separate widget XML file. In order to do that, right click on your project and create a new folder calledxml. Now right click on the newly created folder and create a new XML file. The resource type of the XML file should be set toAppWidgetProvider. In the xml file, define some properties which are as follows − <pre class="prettyprint notranslate prettyprinted" > <appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android" android:minWidth="146dp" android:updatePeriodMillis="0" android:minHeight="146dp" android:initialLayout="@layout/activity_main"> </appwidget-provider></pre> <h2 >Widget - Layout file</h2> Now you have to define the layout of your widget in your default XML file. You can drag components to generate auto xml. <h2 >Widget - Java file</h2> After defining layout, now create a new JAVA file or use existing one, and extend it withAppWidgetProviderclass and override its update method as follows. In the update method, you have to define the object of two classes which are PendingIntent and RemoteViews. Its syntax is − <pre class="prettyprint notranslate prettyprinted" > PendingIntent pending = PendingIntent.getActivity(context, 0, intent, 0); RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.activity_main);</pre> In the end you have to call an update method updateAppWidget() of the AppWidgetManager class. Its syntax is − <pre class="prettyprint notranslate prettyprinted" > appWidgetManager.updateAppWidget(currentWidgetId,views); </pre> A part from the updateAppWidget method, there are other methods defined in this class to manipulate widgets. They are as follows − <table class="table table-bordered" > <tbody > <tr > <th >Sr.No</th> <th >Method & Description</th> </tr> <tr > <td >1</td> <td >onDeleted(Context context, int[] appWidgetIds) This is called when an instance of AppWidgetProvider is deleted. </td> </tr> <tr > <td >2</td> <td >onDisabled(Context context) This is called when the last instance of AppWidgetProvider is deleted </td> </tr> <tr > <td >3</td> <td >onEnabled(Context context) This is called when an instance of AppWidgetProvider is created. </td> </tr> <tr > <td >4</td> <td >onReceive(Context context, Intent intent) It is used to dispatch calls to the various methods of the class </td> </tr> </tbody> </table> <h2 >Widget - Manifest file</h2> You also have to declare the AppWidgetProvider class in your manifest file as follows: <pre class="prettyprint notranslate prettyprinted" > <receiver android:name="ExampleAppWidgetProvider" > <intent-filter> <action android:name="android.appwidget.action.APPWIDGET_UPDATE" /> </intent-filter> <meta-data android:name="android.appwidget.provider" android:resource="@xml/example_appwidget_info" /> </receiver></pre> <h2 >Example</h2> Here is an example demonstrating the use of application Widget. It creates a basic widget applications that will open this current website in the browser. To experiment with this example, you need to run this on an actual device on which internet is running. <table class="table table-bordered" > <tbody > <tr > <th >Steps</th> <th >Description</th> </tr> <tr > <td >1</td> <td >You will use Android studio to create an Android application under a package com.example.sairamkrishna.myapplication. While creating this project, make sure you Target SDK and Compile With at the latest version of Android SDK to use higher levels of APIs.</td> </tr> <tr > <td >2</td> <td >Modify src/MainActivity.java file to add widget code.</td> </tr> <tr > <td >3</td> <td >Modify the res/layout/activity_main to add respective XML components</td> </tr> <tr > <td >4</td> <td >Create a new folder and xml file under res/xml/mywidget.xml to add respective XML components</td> </tr> <tr > <td >5</td> <td >Modify the AndroidManifest.xml to add the necessary permissions</td> </tr> <tr > <td >6</td> <td >Run the application and choose a running android device and install the application on it and verify the results.</td> </tr> </tbody> </table> Following is the content of the modifiedMainActivity.java. <pre class="prettyprint notranslate prettyprinted" > package com.example.sairamkrishna.myapplication; 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; import android.widget.Toast; public class MainActivity extends AppWidgetProvider{ public void onUpdate(Context context, AppWidgetManager appWidgetManager,int[] appWidgetIds) { for(int i=0; i<appWidgetIds.length; i++){ int currentWidgetId = appWidgetIds[i]; String url = "http://www.tutorialspoint.com"; Intent intent = new Intent(Intent.ACTION_VIEW); intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); intent.setData(Uri.parse(url)); PendingIntent pending = PendingIntent.getActivity(context, 0,intent, 0); RemoteViews views = new RemoteViews(context.getPackageName(),R.layout.activity_main); views.setOnClickPendingIntent(R.id.button, pending); appWidgetManager.updateAppWidget(currentWidgetId,views); Toast.makeText(context, "widget added", Toast.LENGTH_SHORT).show(); } } }</pre> Following is the modified content of the xmlres/layout/activity_main.xml. <pre class="prettyprint notranslate prettyprinted" > <RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity" android:transitionGroup="true"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tutorials point" android:id="@+id/textView" android:layout_centerHorizontal="true" android:textColor="#ff3412ff" android:textSize="35dp" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Widget" android:id="@+id/button" android:layout_centerHorizontal="true" android:layout_marginTop="61dp" android:layout_below="@+id/textView" /> &lr;/RelativeLayout></pre> Following is the content of theres/xml/mywidget.xml. <pre class="prettyprint notranslate prettyprinted" > <?xml version="1.0" encoding="utf-8"?> <appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android" android:minWidth="146dp" android:updatePeriodMillis="0" android:minHeight="146dp" android:initialLayout="@layout/activity_main"> </appwidget-provider></pre> Following is the content of theres/values/string.xml. <pre class="prettyprint notranslate prettyprinted" > <resources> <string name="app_name">My Application</string> <string name="hello_world">Hello world!</string> <string name="action_settings">Settings</string> </resources></pre> Following is the content ofAndroidManifest.xmlfile. <pre class="prettyprint notranslate prettyprinted" > <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.sairamkrishna.myapplication" > <application android:allowBackup="true" android:icon="@mipmap/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/mywidget"></meta-data> </receive> </application> </manifest></pre> Let's try to run your application. I assume you have connected your actual Android Mobile device with your computer. To run the app from Android studio, open one of your project's activity files and click Run<img alt="Eclipse Run Icon" class="inline" src="http://www.tutorialspoint.com/android/images/eclipse_run.jpg" />icon from the tool bar. Before starting your application, Android studio will display following window to select an option where you want to run your Android application. <img alt="Anroid Widget Tutorial" src="http://www.tutorialspoint.com/android/images/choose_device.jpg" /> Select your mobile device as an option and then check your mobile device which will display your default screen − <img alt="Anroid Widget Tutorial" src="http://www.tutorialspoint.com/android/images/widget1.jpg" /> Go to your widget section and add your created widget to the desktop or home screen. It would look something like this − <img alt="Anroid Widget Tutorial" src="http://www.tutorialspoint.com/android/images/widget1.jpg" /> Now just tap on the widget button that appears, to launch the browser. But before that please make sure that you are connected to the internet. After pressing the button , the following screen would appear − <img alt="Anroid Widget Tutorial" src="http://www.tutorialspoint.com/android/images/widget2.jpg" /> Note. By just changing the url in the java file, your widget will open your desired website in the browser.