Start from scratch-go deep into Android (theory-preparations before development-8. User Interface basics-8.2app widget Design Guide)

APP widget Design Guide

APP widgets (we will call it "widgets" in the future) is a new feature introduced by android1.5, which greatly improves the modification function in android3.0 and 3.1. A widget displays the most timely information about an application on the home screen.

Figure 1.Example of widgets on Android 4.0

Note that this chapter mainly describes how to design widgets. We will explain the function of developing widgets in the second article.

8.2.1 Standard Widget profiling typical Android app widgets have three main components: a border box, a frame, widget graphical controls and other elements. APP widgets contains a subset of view widgets. Supported controls include text labels, buttons, and images. Well-designed widgets requires some margins.

Figure 2.Margin design of Widgets

Note:Android 4.0 and app widgets will automatically obtain margins. If you need this behavior, you need to set your targetsdkversion to 14 or higher.

 

8.2.1.1 determine the size of your widget

Each widget must be determinedminWidthAndminHeightBy default, it indicates the minimum space consumption. When a user adds a widget to the home screen, it usually occupies more space than the minimum width and height you specify. The android home screen provides a grid to provide space for widgets and icons. The grid can be changed based on different devices. For example, many mobile phones provide a 4*4 grid, the platform provides a grid of 8x7.When your widget is added, it is stretched to occupy the minimum number of cells, horizontally or vertically to meetminWidthAndminHeight.Here we should use nine-patch background and flexible layout to adapt to the grid of the home screen.

You can use the following table to roughly estimate the minimum size of your widget and the number of cells required:

# Cell (Row or column)	Available size (DP) (minWidthOrminHeight)
1	40dp
2	110dp
3	180dp
4	250dp
...	...
N	70 ×N− 30

For exampleminWidth And minheight, Supports your music player to display the current playing tracks and, a play button and a next button.

Figure 3.Example of a music player widget.

Your minimum height should include 2 textviews (one is artist (artist), one title) and the spacing between the top and bottom. Your minimum width should be the minimum available width of the "play" button and "Next" button plus the text width and horizontal spacing.

Figure 4.minWidth/Margin Calculation of minheight. We choose the minimum width of the 144dp most text label.

The following is our formula:

• minWidth= 144dp + (2 × 8dp) + (2 × 56dp) =272dp
• minHeight= 48dp + (2 × 4dp) =56dp

 

8.2.1.2 adjustable Widgets

In android3.1, widgets can be adjusted horizontally and/or vertically, which means that minwidth and minheight are effectively the default size of the widget. We can specifyminResizeWidth And minresizeheight to limit the minimum widget size.

8.2.1.3 add margins for app Widgets

As we mentioned earlier, Android 4.0 automatically adds margins for each widgets on the home screen, which requires us to specifytargetSdkVersionIs 14 or higher. InFor Android 4.0Please do notAPP widgetAdd extra margins to the background shape.

8.2.2 design widget layout and background graphics

 

Most widgets have a rectangle or a rounded rectangle background. We 'd better use nine patches to define this shape, because one screen can fit all the density. Nine-patches is created using the draw9patch tool (We will detail its usage later) or photoshop for simple creation.

 

Figure 5.Nine-patch boundary pixel stretchable area and content padding)

 

The following is an example of music widget layout. It displays text information and two buttons.

<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>
</FrameLayout>

Figure 6.Flexible Layout)

When a user adds a widget to the home screen, for example, on an android 4.0 device, each grid cell is 80dp × 100dp and the distance between 8 DP is automatically stretched. For example:

Added by the system ">

Figure 7.Music widget

8.2.3 use the app widget template package

When we start to set a new widget or update an existing widget, we 'd better first look at the app widget template package. It contains nine-patch background graphics, XML, Photoshop source files, widget styles, widget color.

Figure 8.Layout pictures in the template package

 

 

 

8.2.4 summary of this Chapter

If you still cannot understand what widgets is, please borrow an iPhone, start a music playing program, lock the screen, and double-click the round button below, you will understand (on Android, I asked many people not to know the operation ). This chapter mainly introduces the design. The specific code and usage are described in the second article.