Android App Widget Design

App widgets are also a UI component that can embed a small program (program piece) into the desktop. Compared with common widgets (such as TextView and WebView), the following differences exist:

An App Widget is a live UI component that automatically updates its content;
Widgets cannot automatically update their own content and can only passively wait for user calls;
In applications, because of the automatic update feature of App widgets, it is suitable for designing weather, news, calendar, and other functions.

App Widget design process:

Plan the size and update time of the App Widget and add an xml file in the/res/XML directory;
Plan the UI of the App Widget and modify res/layout/main. xml;
Compile the main program of the App Widget;
Edit AndroidManifest. xml and set the App Widget to accept the update event of the App Widget: android. appwidget. action. APPWIDGET_UPDATE
And the design of an App Widget requires at least four files:

Res/xml/appwidget_provider.xml
Res/layout/main. xml
Src // HelloAppWidgetProvider. java
AndroidManifest. xml
The following is an example of how to implement App widgets:

Create an Android project HelloAppWidget, create a folder xml in the/res directory, and create an appwidget_provider.xml file in the/res/xml directory:
[Html] <? Xml version = "1.0" encoding = "UTF-8"?>

<Appwidget-provider xmlns: android = "http://schemas.android.com/apk/res/android"
Android: minWidth = "85dp"
Android: minHeight = "30dp"
Android: updatePeriodMillis = "1000"
Android: initialLayout = "@ layout/main"
>
</Appwidget-provider>
<? Xml version = "1.0" encoding = "UTF-8"?>

<Appwidget-provider xmlns: android = "http://schemas.android.com/apk/res/android"
Android: minWidth = "85dp"
Android: minHeight = "30dp"
Android: updatePeriodMillis = "1000"
Android: initialLayout = "@ layout/main"
>
</Appwidget-provider> description:

<Appwidget-provider> the tag defines the attributes of the App Widget.
Android: minWidth width
Android: minHeight Length
Android: updatePeriodMillis defines the update frequency of App Widgets. The Android Framework calls the onUpdate () event of the AppWidgetProvider class at intervals. The previous android version is set to 1 ms, the current version is updated from 30 to 30 in order to save power ~ 60 minutes, so it is of little significance to set the update within 30 minutes. The default value is 30-30 minutes ~ Updated in 60 minutes
Android: The initialLayout attribute specifies the UI layout definition of the App Widget. the "@" symbol is in the XML definition file of Android, which indicates the meaning of "directory, therefore, "@ layout/main" indicates "main. xml file 」

Google provides the design principles for App widgets to make the interface look good. The following is an official design reference:


Edit the main. xml file:

<? Xml version = "1.0" encoding = "UTF-8"?>
<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
Android: orientation = "vertical">
 
<TextView
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: text = "@ string/hello"/>
<TextView
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: id = "@ + id/appwidget_text"
Android: textColor = "# ff0000"
/>

 
</LinearLayout>
<? Xml version = "1.0" encoding = "UTF-8"?>
<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
Android: orientation = "vertical">

<TextView
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: text = "@ string/hello"/>
<TextView
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: id = "@ + id/appwidget_text"
Android: textColor = "# ff0000"
/>

</LinearLayout> our App Widget uses LinearLayout to arrange the layout, and the UI is a TextView object. Here, the id of this TextView is defined as "appwidget_text ".

Add a new class HelloAppWidgetProvider extends AppWidgetProvider to the Android project:
[Java] package com. android;
 
Import java. util. Date;
 
Import android. appwidget. AppWidgetManager;
Import android. appwidget. AppWidgetProvider;
Import android. content. Context;
Import android. widget. RemoteViews;
 
Public class HelloAppWidgetProvider extends AppWidgetProvider {
Public void onUpdate (Context context, AppWidgetManager appWidgetManager, int [] appWidgetIds ){
Final int N = appWidgetIds. length;
For (int I = 0; I <N; I ++ ){
Int appWidgetId = appWidgetIds [I];
UpdateAppWidget (context, appWidgetManager, appWidgetId );
}
}

Public void onDeleted (Context context, int [] appWidgetIds ){
}

Static void updateAppWidget (Context context, AppWidgetManager appWidgetManager,
Int appWidgetId ){
CharSequence text;
Java. text. DateFormat df = new java. text. SimpleDateFormat ("hh: mm: ss ");
Text = "http://blog.csdn.net/imyang2007" + "Time:" + df. format (new Date ());

RemoteViews views = new RemoteViews (context. getPackageName (), R. layout. main );
Views. setTextViewText (R. id. appwidget_text, text );
AppWidgetManager. updateAppWidget (appWidgetId, views );
}
 
 
}

HelloAppWidgetProvider. java code Description

The current HelloAppWidget sample design is described as follows:
 

• OnUpdate (): When receiving the ACTION_APPWIDGET_UPDATE broadcast, the Framework callback this method
  OnDelete (): When receiving the ACTION_APPWIDGET_DELETE broadcast, the Framework callback this method
  AppWidgetManager: class for managing App Widgets
  In AndroidManifest. in xml, we want the HelloAppWidgetProider class to receive ACTION_APPWIDGET_UPDATE broadcast events. ACTION_APPWIDGET_UPDATE is the main App Widget event. When AppWidgetProvider is required to provide "RemoteView" for App widgets, it will receive this event.

  RemoteViews is the class that represents the UI. Res/layout/main. xml describes the UI of an application. The UI contains many widgets. The UI of an Android application is a View tree and the view tree is View Hierarchy. To sum up, RemotViews is a class that represents View Hierarchy. RemoteViews allows you to find every component in the UI.

  OnUpdate () is used to update the content of the App Widget installed on the desktop. Therefore, we implement an updateAppWidget () for real update. The second parameter of onUpdate () is AppWidgetManager, which is a class for managing AppWidgetProvider. We must use the framework callback method to return it to our AppWidgetProvider to update the App widgets on the desktop. AppWidgetIds array, the third parameter of onUpdate (), stores the ID of the App Widget to be updated. The framework will return the ID of the App Widget to onUpdate (), the program must be responsible for updating every App Widget to be updated.

  UpdateAppWidget () Description:

  
  Use UI layout to obtain your own "View Hierarchy" (UI), represented by RemoteViews;
  Call the setTextViewText () method of RemoteView to modify the "R. id. appwidget_text" component in the UI and change the text content;
  Call the updateAppWidget () method of AppWidgetProvider to update the specified App Widget and update its UI to the RemoteView UI;
  The second parameter of updateAppWidget () is RemoteView, indicating 1. description 2. modified the "R. id. appwidget_text, and then update the App Widget UI through App Widget Manager.
  In the last step of the App Widget, edit the AndroidManifest. xml file:
  [Html] <? Xml version = "1.0" encoding = "UTF-8"?>
  <Manifest xmlns: android = "http://schemas.android.com/apk/res/android"
  Package = "com. android"
  Android: versionCode = "1"
  Android: versionName = "1.0" type = "codeph" text = "/codeph">
   
  <Uses-sdk android: minSdkVersion = "10"/>
   
  <Application
  Android: icon = "@ drawable/ic_launcher"
  Android: label = "@ string/app_name">
  <Cycler android: name = ". HelloAppWidgetProvider">
  <Meta-data
  Android: name = "android. appwidget. provider"
  Android: resource = "@ xml/appwidget_provider"/>
   
  <Intent-filter>
  <Action android: name = "android. appwidget. action. APPWIDGET_UPDATE"/>
  </Intent-filter>
  </Cycler>
   
  <Activity
  Android: name = ". HelloAppWidgetActivity"
  Android: label = "@ string/app_name">
  <Intent-filter>
  <Action android: name = "android. intent. action. MAIN"/>
   
  <Category android: name = "android. intent. category. LAUNCHER"/>
  </Intent-filter>
  </Activity>
  </Application>
   
  </Manifest>
  <? Xml version = "1.0" encoding = "UTF-8"?>
  <Manifest xmlns: android = "http://schemas.android.com/apk/res/android"
  Package = "com. android"
  Android: versionCode = "1"
  Android: versionName = "1.0" type = "codeph" text = "/codeph">

  <Uses-sdk android: minSdkVersion = "10"/>

  <Application
  Android: icon = "@ drawable/ic_launcher"
  Android: label = "@ string/app_name">
  <Cycler android: name = ". HelloAppWidgetProvider">
  <Meta-data
  Android: name = "android. appwidget. provider"
  Android: resource = "@ xml/appwidget_provider"/>

  <Intent-filter>
  <Action android: name = "android. appwidget. action. APPWIDGET_UPDATE"/>
  </Intent-filter>
  </Cycler>

  <Activity
  Android: name = ". HelloAppWidgetActivity"
  Android: label = "@ string/app_name">
  <Intent-filter>
  <Action android: name = "android. intent. action. MAIN"/>

  <Category android: name = "android. intent. category. LAUNCHER"/>
  </Intent-filter>
  </Activity>
  </Application>

  </Manifest>
  Description:

  Add the Add the <meta-data> label to <Cycler> and specify the android: resource attribute as the resource Name of the App Widget, that is, "@ xml/appwidget_provider 」, that is, the "appwidget_provider.xml document of the xml directory 」
  Add the <intent-filter> tag to the <receiver ER> so that the App Widget can receive the APPWIDGET_UPDATE event)
  So far, a simple App Widget has been designed and its running effect is:
   

  
  Finally, a problem was found, and the program did not implement the update of the App Widget once per second as we expected, but in the range of 30 ~ Update every 60 minutes. In android 1.6 and later versions, the update time of the App Widget is increased to more than 30 minutes to reduce the device power consumption.

   
  
  
  
  From Young's column