App Widgets Overview

 

 

Widgets are an essential aspect of home screen customization. You can imagine them as “at-a-glance” views of an app’s most important data and functionality that is accessible right from the user’s home screen. Users can move widgets across their home screen panels, and, if supported, resize them to tailor the amount of information within a widget to their preference.

This page provides an introduction to the different types of widgets you might want to create and some design principles to follow. To start building an app widget, read Build an App Widget.

 

Widget types

 

As you begin planning your widget, think about what kind of widget you’re trying to build. Widgets typically fall into one of the following categories:

Information widgets

 Information widgets typically display a few crucial information elements that are important to a user and track how that information changes over time. Good examples for information widgets are weather widgets, clock widgets or sports score trackers. Touching information widgets typically launches the associated app and opens a detail view of the widget information.

Collection widgets

 As the name implies, collection widgets specialize in displaying multitude elements of the same type, such as a collection of pictures from a gallery app, a collection of articles from a news app or a collection of emails/messages from a communication app. Collection widgets typically focus on two use cases: browsing the collection, and opening an element of the collection to its detail view for consumption. Collection widgets can scroll vertically.

 

Hybrid widgets

 

 

While all widgets tend to gravitate towards one of the three types described above, many widgets in reality are hybrids that combine elements of different types.

For the purpose of your widget planning, center your widget around one of the base types and add elements of other types if needed.

A music player widget is primarily a control widget, but also keeps the user informed about what track is currently playing. It essentially combines a control widget with elements of an information widget type.

Widget limitations

 

While widgets could be understood as “mini apps”, there are certain limitations that are important to understand before you start to embark on designing your widget:

Gestures

 

Because widgets live on the home screen, they have to co-exist with the navigation that is established there. This limits the gesture support that is available in a widget compared to a full-screen app. While apps for example may support a view pager that allows the user to navigate between screens laterally, that gesture is already taken on the home screen for the purpose of navigating between home panels.

The only gestures available for widgets are:

  • Touch
  • Vertical swipe

 

 

Elements

Given the above interaction limitations, some of the UI building blocks that rely on restricted gestures are not available for widgets. For a complete list of supported building blocks and more information on layout restrictions, please refer to the “Creating App Widget Layouts” section in the App Widgets API Guide.

 

Design guidelines

Widget content

 

Widgets are a great mechanism to attract a user to your app by “advertising” new and interesting content that is available for consumption in your app.

Just like the teasers on the front page of a newspaper, widgets should consolidate and concentrate an app’s information and then provide a connection to richer detail within the app; or in other words: the widget is the information “snack” while the app is the “meal.” As a bottom line, always make sure that your app shows more detail about an information item than what the widget already displays.

 

Besides the pure information content, you should also consider to round out your widget’s offering by providing navigation links to frequently used areas of your app. This lets users complete tasks quicker and extends the functional reach of the app to the home screen.

Good candidates for navigation links to surface on widgets are:

  • Generative functions: These are the functions that allow the user to create new content for an app, such as creating a new document or a new message.
  • Open application at top level: Tapping on an information element will usually navigate the user to a lower level detail screen. Providing access to the top level of your application provides more navigation flexibility and can replace a dedicated app shortcut that users would otherwise use to navigate to the app from the home screen. Using your application icon as an affordance can also provide your widget with a clear identity in case the data you’re displaying is ambiguous.

 

Widget resizing

 

 

Resizing allows users to adjust the height and/or the width of a widget within the constraints of the home panel placement grid. You can decide if your widget is freely resizable or if it is constrained to horizontal or vertical size changes. You do not have to support resizing if your particular widget is inherently fixed-size.

Allowing users to resize widgets has important benefits:

  • They can fine-tune how much information they want to see on each widget.
  • They can better influence the layout of widgets and shortcuts on their home panels.

Planning a resize strategy for your widget depends on the type of widget you’re creating. List or grid-based collection widgets are usually straightforward because resizing the widget will simply expand or contract the vertical scrolling area. Regardless of the widget’s size, the user can still scroll all information elements into view. Information widgets on the other hand require a bit more hands-on planning, since they are not scrollable and all content has to fit within a given size. You will have to dynamically adjust your widget’s content and layout to the size the user defined through the resize operation.

 

 

In this simple example the user can horizontally resize a weather widget in 4 steps and expose richer information about the weather at the current location as the widget grows.

For each widget size determine how much of your app’s information should surface. For smaller sizes concentrate on the essential and then add more contextual information as the widget grows horizontally and vertically.

Layout considerations

 

It will be tempting to layout your widgets according to the dimensions of the placement grid of a particular device that you own and develop with. This can be a useful initial approximation as you layout your widget, but keep the following in mind:

  • The number, size and spacing of cells can vary widely from device to device, and hence it is very important that your widget is flexible and can accommodate more or less space than anticipated.
  • In fact, as the user resizes a widget, the system will respond with a dp size range in which your widget can redraw itself. Planning your widget resizing strategy across “size buckets” rather than variable grid dimensions will give you the most reliable results.

 

Widget configuration

 

Sometimes widgets need to be setup before they can become useful. Think of an email widget for example, where you need to provide an account before the inbox can be displayed. Or a static photo widget where the user has to assign the picture that is to be displayed from the gallery.

Android widgets display their configuration choices right after the widget is dropped onto a home panel. Keep the widget configuration light and don’t present more than 2-3 configuration elements. Use dialog-style instead of full-screen activities to present configuration choices and retain the user’s context of place, even if doing so requires use of multiple dialogs.

Once setup, there typically is not a lot of reason to revisit the setup. Therefore Android widgets do not show a “Setup” or “Configuration” button.

 

 

Android ScrollView (Vertical)

The android.widget.ScrollView class provides the functionality of scroll view. ScrollView is used to scroll the child elements of palette inside ScrollView. Android supports vertical scroll view as default scroll view. Vertical ScrollView scrolls elements vertically.

Android uses HorizontalScrollView for horizontal ScrollView.

Let’s implement simple example of vertical ScrollView.

 

 

Now, drag ScrollView from palette to activity_main.xml file and place some palette element inside it.

File: activity_main.xml

  1. <?xml version=“1.0” encoding=“utf-8”?>  
  2. <RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”  
  3.     xmlns:tools=“http://schemas.android.com/tools”  
  4.     android:layout_width=“match_parent”  
  5.     android:layout_height=“match_parent”  
  6.     android:paddingBottom=“@dimen/activity_vertical_margin”  
  7.     android:paddingLeft=“@dimen/activity_horizontal_margin”  
  8.     android:paddingRight=“@dimen/activity_horizontal_margin”  
  9.     android:paddingTop=“@dimen/activity_vertical_margin”  
  10.     tools:context=“com.example.test.scrollviews.MainActivity”>  
  11.   
  12.   
  13.     <TextView  
  14.         android:layout_width=“wrap_content”  
  15.         android:layout_height=“wrap_content”  
  16.         android:textAppearance=“?android:attr/textAppearanceMedium”  
  17.         android:text=“Vertical ScrollView example”  
  18.         android:id=“@+id/textView”  
  19.         android:layout_gravity=“center_horizontal”  
  20.         android:layout_centerHorizontal=“true”  
  21.         android:layout_alignParentTop=“true” />  
  22.   
  23.   
  24.     <ScrollView android:layout_marginTop=“30dp”  
  25.         android:layout_width=“fill_parent”  
  26.         android:layout_height=“wrap_content”  
  27.         android:id=“@+id/scrollView”>  
  28.   
  29.   
  30.         <LinearLayout  
  31.             android:layout_width=“fill_parent”  
  32.             android:layout_height=“fill_parent”  
  33.             android:orientation=“vertical” >  
  34.   
  35.             <Button  
  36.                 android:layout_width=“fill_parent”  
  37.                 android:layout_height=“wrap_content”  
  38.                 android:text=“Button 1” />  
  39.             <Button  
  40.                 android:layout_width=“fill_parent”  
  41.                 android:layout_height=“wrap_content”  
  42.                 android:text=“Button 2” />  
  43.             <Button  
  44.                 android:layout_width=“fill_parent”  
  45.                 android:layout_height=“wrap_content”  
  46.                 android:text=“Button 3” />  
  47.             <Button  
  48.                 android:layout_width=“fill_parent”  
  49.                 android:layout_height=“wrap_content”  
  50.                 android:text=“Button 4” />  
  51.             <Button  
  52.                 android:layout_width=“fill_parent”  
  53.                 android:layout_height=“wrap_content”  
  54.                 android:text=“Button 5” />  
  55.             <Button  
  56.                 android:layout_width=“fill_parent”  
  57.                 android:layout_height=“wrap_content”  
  58.                 android:text=“Button 6” />  
  59.             <Button  
  60.                 android:layout_width=“fill_parent”  
  61.                 android:layout_height=“wrap_content”  
  62.                 android:text=“Button 7” />  
  63.             <Button  
  64.                 android:layout_width=“fill_parent”  
  65.                 android:layout_height=“wrap_content”  
  66.                 android:text=“Button 8” />  
  67.             <Button  
  68.                 android:layout_width=“fill_parent”  
  69.                 android:layout_height=“wrap_content”  
  70.                 android:text=“Button 9” />  
  71.             <Button  
  72.                 android:layout_width=“fill_parent”  
  73.                 android:layout_height=“wrap_content”  
  74.                 android:text=“Button 10” />  
  75.             <Button  
  76.                 android:layout_width=“fill_parent”  
  77.                 android:layout_height=“wrap_content”  
  78.                 android:text=“Button 11” />  
  79.             <Button  
  80.                 android:layout_width=“fill_parent”  
  81.                 android:layout_height=“wrap_content”  
  82.                 android:text=“Button 12” />  
  83.             <Button  
  84.                 android:layout_width=“fill_parent”  
  85.                 android:layout_height=“wrap_content”  
  86.                 android:text=“Button 13” />  
  87.             <Button  
  88.                 android:layout_width=“fill_parent”  
  89.                 android:layout_height=“wrap_content”  
  90.                 android:text=“Button 14” />  
  91.             <Button  
  92.                 android:layout_width=“fill_parent”  
  93.                 android:layout_height=“wrap_content”  
  94.                 android:text=“Button 15” />  
  95.             <Button  
  96.                 android:layout_width=“fill_parent”  
  97.                 android:layout_height=“wrap_content”  
  98.                 android:text=“Button 16” />  
  99.             <Button  
  100.                 android:layout_width=“fill_parent”  
  101.                 android:layout_height=“wrap_content”  
  102.                 android:text=“Button 17” />  
  103.             <Button  
  104.                 android:layout_width=“fill_parent”  
  105.                 android:layout_height=“wrap_content”  
  106.                 android:text=“Button 18” />  
  107.   
  108.             <Button  
  109.                 android:layout_width=“fill_parent”  
  110.                 android:layout_height=“wrap_content”  
  111.                 android:text=“Button 19” />  
  112.             <Button  
  113.                 android:layout_width=“fill_parent”  
  114.                 android:layout_height=“wrap_content”  
  115.                 android:text=“Button 20” />  
  116.   
  117.         </LinearLayout>  
  118.   
  119.     </ScrollView>  
  120.   
  121. </RelativeLayout>  

Activity class

In activity class, we have not changed any code.

File: MainActivity.java

  1. package com.example.test.scrollviews;  
  2.   
  3. import android.support.v7.app.AppCompatActivity;  
  4. import android.os.Bundle;  
  5.   
  6. public class MainActivity extends AppCompatActivity {  
  7.   
  8.     @Override  
  9.     protected void onCreate(Bundle savedInstanceState) {  
  10.         super.onCreate(savedInstanceState);  
  11.         setContentView(R.layout.activity_main);  
  12.     }  

output :