Android Mini pendant (APP Widgets) Design Guide _android

Application of small pendant (also known as a small window pendant) in the android1.5 is the first time, later, android3.0 and android3.1 have been greatly developed, they can show some of the application of common information or some relevant information to the desktop, the standard Android mirror image has many of its own Small pendants, such as: Alarm clock, music, etc.

Figure 1. Example app widgets in Android 4.0.

This article will describe how to design a small pendant, so that can be very good with other pendants with a very tacit understanding, but also introduce some tips.

Appwidget Analysis

A typical Android pendant will consist of three component parts: a bounding box, a pendant graphic control, and other elements. The pendant contains a subset of the Android View control, which he supports: Textlabel, button, image. Other available components see the API Guide section of the Creating app widget layout (see left)

A well designed pendant will leave some external boundaries between the bounding box and the frame, leaving some internal boundaries inside the bounding box. (that is, set aside some padding and margin). As shown in the following illustration:

Figure 2. Widgets generally have margins between the bounding box and frame,and padding between the frame and widget control

Note:
In android4.0, the pendant will automatically margin to the border.

Decide the size for your pendant

Each pendant must be specified MinWidth and minheight he represents the minimum amount of space display that is required by default. When a user adds a pendant to his home screen, it usually takes more space than the two values you give. The Android Home screen provides users with a square grid of available space to place application icons or desktop pendants. This matrix square lattice has different formats on different devices. For example: The General handheld device provides 4 X 4 of the lattice. But the tablet device can pass 8 X 7 of the lattice. When your pendant is added, he will automatically stretch to occupy the least squares according to the MinWidth and MinHeight specified width and height. use a. 9.png picture as the background and use the extensible layout to make your pendant layout fit well with the main screen grid of the device to achieve a good use experience.
The width, height, or margin width you set will likely run to different devices, and you can approximate the minimum size of your pendant by using data from the space occupied by each of the smaller squares listed below.

The best practice is to keep your minwidth and minheight settings relatively conservative, and to define the minimum size is to make your pendant render a good default state.

For example, if you have a pendant for a music player, and he uses it to display the currently playing album and name, we just need a play button and a Next button.

Figure 3. An example music player widget.

Your minimum height should be for your two text control height + text between the margin height and the padding height. Your minimum width should be the shortest width of the playback button + the shortest width of the Next button + the shortest width of the text (say longest 10 characters) + horizontal some margin and padding distance

Figure4. Example sizes and margins for minwidth/minheight calculations. We chose 144DP as a example good minimum width for the text labels.

The final results are as follows:

MinWidth = 144DP + (2X8DP) + (2X56DP) = 272DP
MinHeight = 48DP + (2X4DP) = 56DP

If you use the. 9.png picture and the content has inherent padding distance, you also need to add.

Adjustable size Pendant

After Android 3.1, the pendant can be resized horizontally and vertically, meaning that the value of MinWidth and MinHeight will become the default size of the pendant, and you can use minresizewidth and Minresizeheight to represent the true minimum value of the pendant, the control becomes blurred and unavailable when it is less than this value.

Especially those that are based on the ListView or the GridView feature of the Set-Class Pendant

Add margin to your pendant (outer boundary width)

As mentioned earlier, android4.0 will automatically add small, standard outer boundary widths (margin) to the main screen pendant. For those with the system version number 14 or above, in order to balance the visual of the main screen, we do not recommend that you add additional margin to the outside of your pendant.
Of course, for that earlier version, adding your own margin is not complicated, specifically in the API guide introduced.

Design the layout and background picture of the pendant

Many of the pendants have only a fixed rectangular background or rounded rectangle shape. The best way to do this is to use a. 9.png picture to define. (Concrete how to use. 9.png picture, very simple here does not translate, oneself go to find material to study)

For the content part of the pendant, you should use a scalable layout. For example: Relativelayout, LinearLayout, or framelayout. This allows you to adapt your layout files to a number of different screen sizes.

Here is an example of the layout of a pendant for music playback. He contains a text field, a pause button, a button, and the next one, and his margin depends on the system.

<framelayout 
 android:layout_width= "match_parent" 
 android:layout_height= "Match_parent" 
 android: padding= "@dimen/widget_margin" > 
  
 <linearlayout 
  android:layout_width= "Match_parent" 
  android: layout_height= "Match_parent" 
  android:orientation= "horizontal" 
  android:background= "@drawable/my_widget_ Background "> 
  
  <textview 
   android:id=" @+id/song_info " 
   android:layout_width=" 0DP " 
   Android : layout_height= "match_parent" 
   android:layout_weight= "1"/> 
  
  <button android:id= 
   "@+id/play_ Button " 
   android:layout_width=" @dimen/my_button_width " 
   android:layout_height=" Match_parent "/> 
  
  <button 
   android:id= "@+id/skip_button" 
   android:layout_width= "@dimen/my_button_width" 
   android:layout_height= "Match_parent"/> 
 </LinearLayout> 

If you look at the above examples and instructions, you can also start to make a flexible layout

Figure 6. Excerpt flexible layouts and attributes.

Using a pendant template package

When you start to design a new pendant or update an existing pendant, you can look at the design template below. The following package is available for download, he contains a. 9.png background picture and XML and some PS files for different pixel densities

The following is an instance source code

* * Copyright (C) 2009 the Android Open Source Project * Licensed under the Apache License, Version 2.0 (the "Li 
 Cense "); 
 * You could not use this file, except in compliance with the License. * You may obtain a copy of the License in * * http://www.apache.org/licenses/LICENSE-2.0 * * unless required by  Applicable or agreed to in writing, software * Distributed under the License be distributed on ' as is ' basis, * 
 Without warranties or CONDITIONS of any KIND, either express or implied. 
 * The License for the specific language governing permissions and * limitations under the License. 
 
* * Package com.example.android.wiktionary; 
Import com.example.android.wiktionary.SimpleWikiHelper.ApiException; 
 
Import com.example.android.wiktionary.SimpleWikiHelper.ParseException; 
Import android.app.PendingIntent; 
Import Android.app.Service; 
Import Android.appwidget.AppWidgetManager; 
Import Android.appwidget.AppWidgetProvider; Import Android.content.CoMponentname; 
Import Android.content.Context; 
Import android.content.Intent; 
Import android.content.res.Resources; 
Import Android.net.Uri; 
Import Android.os.IBinder; 
Import Android.text.format.Time; 
Import Android.util.Log; 
 
Import Android.widget.RemoteViews; 
Import Java.util.regex.Matcher; 
 
Import Java.util.regex.Pattern; /** * Define A simple widget that shows the Wiktionary "Word of the". 
 To builds * An update we spawn a background {@link Service} to perform the API queries. * * public class Wordwidget extends Appwidgetprovider {/** * Regular expression that splits "Word of the" entr 
   Y into Word * name, Word type, and the-description bullet point. * * public static final String Wotd_pattern = "(? s) \\{\\{wotd\\| (. +?) \\| (.+?) \\| ([^#\\|] 
 
  +).*?\\}\\}"; @Override public void OnUpdate (context context, Appwidgetmanager Appwidgetmanager, int[] appwidgetids) {log.d ("Wo 
    Rdwidget.updateservice "," OnUpdate () "); To preventAny ANR timeouts, we perform the "Update in a" service Context.startservice (new Intent (context, updateservice.class)); public static class Updateservice extends Service {@Override public void OnStart (Intent Intent, int sta 
 
      Rtid) {log.d ("Wordwidget.updateservice", "OnStart ()"); 
      Build the widget update for today remoteviews updateviews = Buildupdate (this); 
       
      LOG.D ("Wordwidget.updateservice", "Update Built"); Push update for this widget to the home screens componentname thiswidget = new ComponentName (This, WORDWIDGET.CLA 
      SS); 
      Appwidgetmanager Manager = Appwidgetmanager.getinstance (this); 
      Manager.updateappwidget (Thiswidget, updateviews); 
    LOG.D ("Wordwidget.updateservice", "widget updated"); 
    @Override public IBinder onbind (Intent Intent) {return null; /** * Build a widgets update to show the current Wiktionary * "Word of the". would block until The online API returns. */Public Remoteviews Buildupdate (context context) {//Pick out month names to resources R 
      es = Context.getresources (); 
       
      string[] MonthNames = Res.getstringarray (r.array.month_names); 
      Find the month and day is today = new Time (); 
 
      Today.settonow ();  
          Build the page title is today, such as "march" String pagename = res.getstring (r.string.template_wotd_title, 
      Monthnames[today.month], today.monthday); 
       
      String pagecontent = null; 
        try {//try querying the Wiktionary API for today's word simplewikihelper.prepareuseragent (context); 
      pagecontent = Simplewikihelper.getpagecontent (pagename, false); 
      catch (Apiexception e) {log.e ("Wordwidget", "couldn ' t contact API", e); 
      catch (ParseException e) {log.e ("Wordwidget", "couldn ' t parse API response", e); } RemoTeviews views = null; 
       
        Matcher Matcher = null; 
      Prefs prefs = new Prefs (this); if (pagecontent = = null) {//Could not get content, use cache//could is null PageContent = P 
      Refs.getpagecontent (); 
        } if (PageContent!= null) {//We have page content/Is it valid? 
      Matcher = Pattern.compile (Wotd_pattern). Matcher (PageContent); } if (Matcher!= null && matcher.find ()) {//valid content, cache it//ensure that LAT 
 
        EST valid content is//always cached in case of failures prefs.setpagecontent (pagecontent); Build a update that holds the updated widgets contents views = new Remoteviews (Context.getpackagename (), r.la 
         
        Yout.widget_word); 
        String wordtitle = Matcher.group (1); 
        Views.settextviewtext (R.id.word_title, wordtitle); Views.settextviewtext (R.id.word_type, Matcher.group(2)); 
         
        Views.settextviewtext (R.id.definition, Matcher.group (3). Trim ()); When the user clicks on widget, the launch to Wiktionary definition page String definepage = String.Format ("%s://%s/%s 
        ", Extendedwikihelper.wiki_authority, Extendedwikihelper.wiki_lookup_host, Wordtitle); 
        Intent defineintent = new Intent (Intent.action_view, Uri.parse (definepage)); Pendingintent pendingintent = pendingintent.getactivity (context, 0/* No requestcode * *, defineintent, 0/* n 
        o flags */); 
         
      Views.setonclickpendingintent (R.id.widget, pendingintent); else {//didn ' t find word of day, so show error message views = new Remoteviews (Context.getpackagenam 
        E (), r.layout.widget_message); 
      Views.settextviewtext (R.id.message, context.getstring (R.string.widget_error)); 
    } return views; 
 } 
  } 
}

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.